/* ============================================================================
   VGLIA — Design tokens
   ----------------------------------------------------------------------------
   Única fuente de verdad de los valores visuales de la plataforma. Ningún
   componente debe escribir un color, un radio, una sombra o una duración a
   mano: si un valor no existe aquí, se añade aquí.

   Orden de lectura:
     1. Marca Vector          colores corporativos oficiales
     2. Paleta VGLIA          superficies, acentos y texto del modo oscuro
     3. Semántica             estado, foco, gráficas y mapas
     4. Tipografía
     5. Espaciado y medidas
     6. Formas, sombras, desenfoque
     7. Movimiento
     8. Capas (z-index)
     9. Layout de la aplicación

   Documentado en docs/DESIGN_SYSTEM.md.
   ========================================================================= */

:root {
  /* ==========================================================================
     1. MARCA VECTOR — colores corporativos oficiales
     Se mantienen intactos: son la identidad de Vector Global Logistics.
     ====================================================================== */
  --vector-primary-red: #ff3e32;
  --vector-primary-blue: #003c6f;
  --vector-primary-black: #000000;
  --vector-primary-light: #f3f5f7;

  --vector-secondary-orange-red: #f15b40;
  --vector-secondary-yellow: #fbb03b;
  --vector-secondary-yellow-soft: #fbbf6d;
  --vector-secondary-ocean: #0f6e8c;
  --vector-secondary-teal: #148c9a;
  --vector-secondary-green-soft: #6eaaa0;
  --vector-secondary-gray-blue: #b0c2cb;
  --vector-secondary-gray-light: #c5d5df;
  --vector-secondary-gray-extra-light: #daebf5;

  /* Canales RGB para componer transparencias sin repetir el hex. */
  --vector-primary-red-rgb: 255 62 50;
  --vector-primary-blue-rgb: 0 60 111;

  /* ==========================================================================
     2. PALETA VGLIA — modo oscuro
     ====================================================================== */

  /* Fondos: del más profundo al más cercano al contenido. */
  --vglia-bg-950: #030a12;
  --vglia-bg-900: #06111c;
  --vglia-bg-850: #081722;
  --vglia-bg-800: #0b1b2a;

  /* Superficies: tarjetas, paneles y sus estados. */
  --vglia-surface-900: #0a1724;
  --vglia-surface-850: #0d1e2d;
  --vglia-surface-800: #102638;
  --vglia-surface-750: #142d42;
  --vglia-surface-hover: #18364d;

  /* Acentos de tecnología: azul y cian. */
  --vglia-blue-500: #1677ff;
  --vglia-blue-400: #2b8cff;
  --vglia-blue-300: #55a7ff;
  --vglia-cyan-500: #00c8e8;
  --vglia-cyan-400: #22d8f5;
  --vglia-cyan-300: #67e8f9;
  --vglia-teal-500: #148c9a;
  --vglia-teal-400: #26a9b6;

  /* Acento de IA: morado. Reservado a lo inteligente y predictivo. */
  --vglia-purple-500: #7c5cff;
  --vglia-purple-400: #967dff;
  --vglia-purple-300: #b2a4ff;

  /* Acento de atención: ámbar. */
  --vglia-amber-500: #fbb03b;
  --vglia-amber-400: #fbbf6d;

  --vglia-blue-rgb: 43 140 255;
  --vglia-cyan-rgb: 0 200 232;
  --vglia-purple-rgb: 124 92 255;
  --vglia-teal-rgb: 38 169 182;
  --vglia-amber-rgb: 251 176 59;

  /* Texto, en orden decreciente de énfasis. */
  --vglia-text-primary: #f4f8fc;
  --vglia-text-secondary: #b4c3d1;
  --vglia-text-muted: #7890a3;
  --vglia-text-disabled: #526878;
  /* Sobre un acento claro (cian, ámbar) el texto tiene que ser oscuro. */
  --vglia-text-on-accent: #030a12;
  /* Sobre un acento saturado y oscuro (azul, morado, rojo) tiene que ser
     blanco. Es el único blanco puro del sistema y por eso está aquí: escrito a
     mano en cada componente, nadie sabría que son el mismo color. */
  --vglia-text-on-solid: #ffffff;

  /* Bordes. */
  --vglia-border-subtle: rgb(176 194 203 / 0.1);
  --vglia-border-default: rgb(176 194 203 / 0.16);
  --vglia-border-strong: rgb(103 232 249 / 0.25);
  --vglia-border-active: rgb(43 140 255 / 0.55);

  /* Cristal y velos. */
  --vglia-glass-bg: rgb(13 30 45 / 0.72);
  --vglia-glass-bg-strong: rgb(10 23 36 / 0.88);
  --vglia-overlay: rgb(3 10 18 / 0.72);

  /* ==========================================================================
     3. SEMÁNTICA
     ====================================================================== */
  --color-info: var(--vglia-blue-400);
  --color-success: #2ec75c;
  --color-warning: var(--vector-secondary-yellow);
  --color-danger: var(--vector-primary-red);

  --color-info-rgb: 43 140 255;
  --color-success-rgb: 46 199 92;
  --color-warning-rgb: 251 176 59;
  --color-danger-rgb: 255 62 50;

  /* Superficies teñidas de estado, para insignias y avisos. */
  --surface-info: rgb(var(--color-info-rgb) / 0.12);
  --surface-success: rgb(var(--color-success-rgb) / 0.12);
  --surface-warning: rgb(var(--color-warning-rgb) / 0.12);
  --surface-danger: rgb(var(--color-danger-rgb) / 0.12);

  /* Foco de teclado: siempre visible, nunca eliminado. */
  --focus-ring: 0 0 0 2px var(--vglia-bg-950), 0 0 0 4px var(--vglia-blue-400);
  --focus-ring-offset: 2px;

  /* Paleta de gráficas. El orden importa: es la secuencia que ECharts asigna
     a las series. Todas superan 4.5:1 sobre --vglia-surface-850. */
  --chart-1: #22d8f5;
  --chart-2: #967dff;
  --chart-3: #26a9b6;
  --chart-4: #55a7ff;
  --chart-5: #fbbf6d;
  --chart-6: #6eaaa0;
  --chart-7: #ff7a6e;
  --chart-8: #b2a4ff;
  --chart-grid: rgb(176 194 203 / 0.08);
  --chart-axis: rgb(176 194 203 / 0.35);
  --chart-label: #7890a3;

  /* Mapa. */
  --map-water: #061019;
  --map-land: #0e2033;
  --map-border: rgb(103 232 249 / 0.18);
  --map-node: #22d8f5;
  --map-node-office: #967dff;
  --map-route-ocean: rgb(34 216 245 / 0.55);
  --map-route-road: rgb(150 125 255 / 0.55);

  /* ==========================================================================
     4. TIPOGRAFÍA
     Poppins y Lato son las fuentes corporativas de Vector; JetBrains Mono se
     reserva a datos tabulares, identificadores y código. Se sirven desde
     static/fonts (ver fonts.css): la plataforma no depende de Google Fonts.
     ====================================================================== */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Lato", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs: 0.6875rem;  /* 11px — etiquetas de eje, microcopy */
  --text-xs: 0.75rem;     /* 12px — insignias, pies de tarjeta */
  --text-sm: 0.8125rem;   /* 13px — interfaz densa, tablas */
  --text-base: 0.875rem;  /* 14px — cuerpo por defecto */
  --text-md: 1rem;        /* 16px — texto destacado */
  --text-lg: 1.125rem;    /* 18px — títulos de tarjeta */
  --text-xl: 1.375rem;    /* 22px — títulos de sección */
  --text-2xl: 1.75rem;    /* 28px — título de página */
  --text-3xl: 2.25rem;    /* 36px — cifras de KPI */
  --text-4xl: 3rem;       /* 48px — landing */
  --text-5xl: 4rem;       /* 64px — landing */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;

  /* ==========================================================================
     5. ESPACIADO Y MEDIDAS
     Escala de 4px. Todo margen, relleno y hueco sale de aquí.
     ====================================================================== */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-sm: 40rem;
  --container-md: 56rem;
  --container-lg: 72rem;
  --container-xl: 90rem;
  --container-full: 120rem;

  /* Altura de controles: mantiene alineados inputs, botones y selects. */
  --control-height-sm: 30px;
  --control-height-md: 36px;
  --control-height-lg: 44px;

  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.75;

  /* ==========================================================================
     6. FORMAS, SOMBRAS Y DESENFOQUE
     ====================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  --shadow-sm: 0 1px 2px rgb(3 10 18 / 0.4);
  --shadow-md: 0 6px 18px rgb(3 10 18 / 0.45);
  --shadow-lg: 0 18px 42px rgb(3 10 18 / 0.55);
  --shadow-xl: 0 32px 72px rgb(3 10 18 / 0.65);

  /* El resplandor es un acento, no el estado por defecto de una tarjeta. */
  --glow-blue: 0 0 28px rgb(var(--vglia-blue-rgb) / 0.18);
  --glow-cyan: 0 0 28px rgb(var(--vglia-cyan-rgb) / 0.16);
  --glow-purple: 0 0 28px rgb(var(--vglia-purple-rgb) / 0.15);
  --glow-amber: 0 0 28px rgb(var(--vglia-amber-rgb) / 0.15);

  --blur-sm: 8px;
  --blur-md: 14px;
  --blur-lg: 22px;

  /* ==========================================================================
     7. MOVIMIENTO
     Rápido y contenido. La interfaz debe sentirse inmediata, no coreografiada.
     ====================================================================== */
  --transition-fast: 120ms;
  --transition-normal: 200ms;
  --transition-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-enter: 320ms;
  --duration-stagger: 45ms;

  /* ==========================================================================
     8. CAPAS
     Un único lugar donde se decide qué va encima de qué.
     ====================================================================== */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-sidebar: 200;
  --z-topbar: 300;
  --z-dropdown: 400;
  --z-overlay: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-tooltip: 800;

  /* ==========================================================================
     9. LAYOUT DE LA APLICACIÓN
     ====================================================================== */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 68px;
  --page-padding-x: var(--space-6);
  --page-padding-y: var(--space-6);
  --card-padding: var(--space-5);
  --grid-gap: var(--space-4);
}

/* El tema claro no existe todavía: VGLIA es una plataforma de modo oscuro.
   Se declara el esquema para que los controles nativos del navegador
   (scrollbars, selects, date pickers) se pinten en oscuro y no rompan. */
:root {
  color-scheme: dark;
}

/* Menos densidad en pantallas pequeñas: el mismo sistema, otra escala. */
@media (max-width: 768px) {
  :root {
    --page-padding-x: var(--space-4);
    --page-padding-y: var(--space-4);
    --card-padding: var(--space-4);
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 2.75rem;
  }
}