:root {
  /* ==========================================================================
     SkyFrontend Public Design Tokens
     ========================================================================== */

  /**
   * Colores base de la aplicación.
   * --sky-bg-page: Fondo principal para páginas standalone (landing, registro, etc.).
   * --sky-bg-surface: Fondo para elementos elevados como cards, modales, paneles.
   * --sky-bg-overlay: Fondo oscuro translúcido para el backdrop de modales.
   */
  --sky-bg-page: #f5f5f5;
  --sky-bg-surface: #ffffff;
  --sky-bg-overlay: rgba(0, 0, 0, 0.5);

  /**
   * Colores de texto.
   * --sky-text-primary: Texto principal, alta visibilidad.
   * --sky-text-secondary: Texto secundario, para labels o descripciones.
   * --sky-text-muted: Texto de baja prioridad, para hints o metadatos.
   * --sky-text-on-accent: Texto sobre fondos de color de acento (ej. botones).
   */
  --sky-text-primary: #1f2937;
  --sky-text-secondary: #6b7280;
  --sky-text-muted: #9ca3af;
  --sky-text-on-accent: #ffffff;

  /**
   * Colores para bordes y separadores.
   * --sky-border-light: Bordes sutiles, para separar elementos dentro de un surface.
   * --sky-border-medium: Bordes para inputs o elementos interactivos.
   */
  --sky-border-light: #e5e7eb;
  --sky-border-medium: #d1d5db;

  /**
   * Color de acento principal para la marca y acciones primarias.
   */
  --sky-accent: #0078d4;
  --sky-accent-hover: #005ea0;
  --sky-accent-disabled: #a0c7e4;

  /**
   * Colores semánticos para estados y notificaciones.
   */
  --sky-success: #16a34a;
  --sky-error: #dc2626;
  --sky-warning: #f59e0b;
  --sky-info: #3b82f6;
  --sky-success-bg-light: #dcfce7;
  --sky-error-bg-light: #fee2e2;
  --sky-warning-bg-light: #fef3c7;
  --sky-info-bg-light: #dbeafe;

  /**
   * Paleta de sombras para dar profundidad.
   */
  --sky-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sky-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sky-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /**
   * Escala de espaciado para márgenes y paddings.
   */
  --sky-space-xs: 4px;
  --sky-space-sm: 8px;
  --sky-space-md: 16px;
  --sky-space-lg: 24px;
  --sky-space-xl: 32px;
  --sky-space-2xl: 48px;

  /**
   * Radios de borde para consistencia en esquinas.
   */
  --sky-radius-sm: 4px;
  --sky-radius-md: 8px;
  --sky-radius-lg: 12px;

  /**
   * Opciones de tipografía.
   */
  --sky-font-sans: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --sky-font-mono: 'Cascadia Code', 'Fira Code', 'Roboto Mono', monospace;
  --sky-fs-xs: 0.75rem;   /* 12px */
  --sky-fs-sm: 0.875rem;  /* 14px */
  --sky-fs-md: 1rem;      /* 16px */
  --sky-fs-lg: 1.125rem;  /* 18px */
  --sky-fs-xl: 1.25rem;   /* 20px */

  /**
   * Z-index para controlar el apilamiento de capas.
   */
  --sky-z-map: 0;
  --sky-z-overlay: 100;
  --sky-z-panel: 200;
  --sky-z-modal: 300;
  --sky-z-spinner: 400;
  --sky-z-notification: 500;

  /* ==========================================================================
     Map Overlay Tokens (Dark Theme)
     ========================================================================== */

  /**
   * Paleta oscura para componentes que flotan sobre el canvas del mapa 3D.
   * Se usan para garantizar legibilidad y contraste sobre fondos variables.
   */
  --sky-map-overlay-bg: rgba(34, 39, 46, 0.95); /* Basado en #22272e */
  --sky-map-overlay-bg-hover: rgba(55, 65, 81, 0.95); /* Basado en un gris más claro */
  --sky-map-overlay-border: rgba(255, 255, 255, 0.1);
  --sky-map-overlay-text-primary: #f9fafb;
  --sky-map-overlay-text-secondary: #9ca3af;
  --sky-map-overlay-accent: #00d4ff; /* Cyan */
  --sky-map-overlay-backdrop-filter: blur(6px);
}