/* Copia de sputnik/design/tokens.css (commit 18da3ba). No se edita aquí: se cambia la fuente y se corre tools/sync_design.py. */
/* =====================================================================================
   Sputnik Racing · tokens de diseño (BORRADOR 2026-10-13)

   Fuente única de colores, tipografía, espaciado y radios para el overlay, Sputnik Settings y
   Debrief (AGENTS.md → Sistema de diseño). Los componentes consumen solo estas variables: nada de
   colores ni tamaños sueltos. Estructura en capas (docs/research/web-design-reference/):
     1. crudos      escala neutra y acentos, sin significado
     2. semánticos  superficie, texto, borde, acento, estados
     3. datos       significado fijo de manejo: freno, gas, veredicto, vueltas
     4. tipografía, espaciado, radios, movimiento
   Temas: oscuro por defecto (el overlay vive sobre el juego) y claro para Settings y Debrief con
   `[data-theme="light"]` o la preferencia del sistema. La paleta sale del mockup del DDU revisado
   por el piloto (STATUS.md, 2026-10-13); la fuente de las cifras del overlay sigue pendiente
   (hoy Inter 800, provisional) y las fuentes se empaquetan con cada pieza: nada externo.
   ===================================================================================== */

/* ---- 1. Crudos ---- */
:root {
  --n-1000: #07090d;
  --n-950: #0b0e14;
  --n-900: #10141c;
  --n-850: #151a24;
  --n-800: #1b2130;
  --n-700: #242b3b;
  --n-600: #2f3748;
  --n-500: #414a5d;
  --n-400: #5c667b;
  --n-300: #8890a4;
  --n-200: #b4bbcb;
  --n-100: #dde1e9;
  --n-50: #eef0f4;
  --n-0: #ffffff;

  /* Escala gris azulada de la web (Settings y Debrief en tema oscuro), la de la referencia de
     diseño medida el 2026-10-13; elegida por el piloto el 2026-10-20. */
  --slate-900: #1f2433;
  --slate-850: #222838;
  --slate-800: #293040;
  --slate-750: #2f3647;
  --slate-700: #3b4254;
  --slate-300: #939db8;

  --cyan-400: #22d3ee;
  --cyan-600: #0e9fb5;
  --green-400: #2fd45b;
  --lime-400: #9bdb3e;
  --yellow-400: #ffd23f;
  --orange-400: #ff8a1f;
  --amber-400: #ffb23f;
  --red-400: #f03a3a;
  --red-300: #ff7373; /* texto rojo sobre la escala gris azulada: 5:1 */
  --red-600: #c81e1e; /* texto rojo sobre blanco (tema claro) */
  --teal-400: #20d3c2;
  --sky-400: #5cc8f0;
  --violet-400: #b57bff;
}

/* ---- 2. Semánticos · tema oscuro (por defecto) ---- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-overlay: var(--n-950); /* fondo opaco de cada ventana del overlay */
  --surface-1: var(--n-900); /* fondo de página */
  --surface-2: var(--n-850); /* tarjetas, paneles, campos */
  --surface-3: var(--n-800); /* hover, fila activa, chips */
  --surface-4: var(--n-700); /* relleno de controles */
  --border-1: var(--n-700); /* borde de tarjeta, divisores */
  --border-2: var(--n-600); /* borde de campo */
  --text-primary: var(--n-0);
  --text-secondary: var(--n-200);
  --text-dim: var(--n-300); /* etiquetas; 6.1:1 sobre --surface-overlay */
  --text-faint: var(--n-500); /* marcador de «sin dato»: se ve, pero no parece un valor */
  --accent: var(--cyan-400); /* un solo acento; sin color de marca todavía */
  --accent-contrast: var(--n-950); /* texto sobre el acento */
  --focus-ring: var(--cyan-400);

  --status-ok: var(--green-400);
  --status-warn: var(--yellow-400);
  --status-error: var(--red-400);
  --status-off: var(--n-400); /* apagado por config, sin dato */
  --status-info: var(--sky-400);
  --danger: var(--status-error); /* texto y borde de una acción que corta algo (Stop core); blanco sobre este rojo no llega a 4.5:1 */
}

/* ---- 2a. Semánticos · web en tema oscuro (Settings y Debrief) ----
   Las páginas web llevan `<html data-app="web">`: el fondo pasa a la escala gris azulada, que se
   lee mejor de cerca y a pantalla completa. El overlay no lleva el atributo y sigue casi negro.
   Va antes del tema claro para que este gane cuando rige. */
:root[data-app="web"] {
  --surface-1: var(--slate-900);
  --surface-2: var(--slate-850);
  --surface-3: var(--slate-800);
  --surface-4: var(--slate-750);
  --border-1: var(--slate-750);
  --border-2: var(--slate-700);
  --text-secondary: var(--slate-300); /* 5.4:1 sobre una tarjeta */
  --text-dim: var(--n-300); /* 4.6:1 sobre una tarjeta */
  --text-faint: var(--n-400);
  --danger: var(--red-300);
}

/* ---- 2b. Semánticos · tema claro (Settings y Debrief) ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --surface-overlay: var(--n-950);
  --surface-1: var(--n-50);
  --surface-2: var(--n-0);
  --surface-3: var(--n-100);
  --surface-4: var(--n-100);
  --border-1: var(--n-100);
  --border-2: var(--n-200);
  --text-primary: var(--n-900);
  --text-secondary: var(--n-500);
  --text-dim: var(--n-400);
  --text-faint: var(--n-300);
  --accent: var(--cyan-600);
  --accent-contrast: var(--n-0);
  --focus-ring: var(--cyan-600);
  --status-off: var(--n-300);
  --danger: var(--red-600);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --surface-overlay: var(--n-950);
    --surface-1: var(--n-50);
    --surface-2: var(--n-0);
    --surface-3: var(--n-100);
    --surface-4: var(--n-100);
    --border-1: var(--n-100);
    --border-2: var(--n-200);
    --text-primary: var(--n-900);
    --text-secondary: var(--n-500);
    --text-dim: var(--n-400);
    --text-faint: var(--n-300);
    --accent: var(--cyan-600);
    --accent-contrast: var(--n-0);
    --focus-ring: var(--cyan-600);
    --status-off: var(--n-300);
    --danger: var(--red-600);
  }
}

/* ---- 3. Datos de manejo: el mismo significado en todo el producto ---- */
:root {
  --brake-ref: var(--red-400); /* freno de la referencia */
  --brake-mine: var(--orange-400); /* mi freno */
  --brake-trail: var(--amber-400); /* la referencia suelta el freno girando */
  --throttle-ref: var(--green-400); /* gas de la referencia */
  --throttle-mine: var(--teal-400); /* mi gas */
  --neutral-data: var(--sky-400); /* dentro de la banda neutra */

  /* Veredicto graduado por magnitud del error; la dirección (EARLY/LATE) va en texto */
  --verdict-5: var(--green-400); /* clavado */
  --verdict-4: var(--lime-400); /* bien */
  --verdict-3: var(--yellow-400); /* cerca */
  --verdict-2: var(--orange-400); /* lejos */
  --verdict-1: var(--red-400); /* muy lejos */

  /* Tiempo perdido por zona (`analysis.md` §6.1): la zona donde más se pierde y la segunda, y la
     velocidad de entrada que se aparta de la referencia. */
  --time-lost-most: var(--red-400);
  --time-lost-second: var(--orange-400);
  --speed-off: var(--amber-400);

  /* Fase de neumático (`tire-phases.md`): de frío a caliente, como un DDU de auto real. */
  --tire-cold: var(--sky-400);
  --tire-warming: var(--amber-400);
  --tire-peak: var(--green-400);

  --lap-session-best: var(--violet-400);
  --lap-personal-best: var(--green-400);

  /* Live Canvas y barras (DDU v2, elegido el 2026-10-15). El color de dato (qué es) va solo en
     líneas y barras; el de veredicto (qué tan bien va) solo en cajas, y lo que va bien queda
     neutro. La referencia, atenuada, queda por debajo de tu curva (color pleno, más gruesa).
     Suponen fondo oscuro: el canvas y las barras viven en el overlay, que siempre va en tema
     oscuro. Si Debrief dibuja el canvas en tema claro, necesita su propia versión. */
  --canvas-ref-line: color-mix(in srgb, var(--brake-ref) 80%, var(--n-850));
  --canvas-gas-ref: color-mix(in srgb, var(--throttle-ref) 60%, var(--n-850));
  --canvas-ladder: rgba(255, 255, 255, 0.04); /* escalera de 20 % en 20 % */
  --canvas-tick: rgba(255, 255, 255, 0.28); /* marcas de la escalera en los bordes */
  --canvas-target: var(--n-100); /* chevrones del objetivo de presión */
  --canvas-target-line: color-mix(in srgb, var(--n-100) 45%, transparent); /* la línea del objetivo, más baja que tu curva */
  --canvas-bp: rgba(255, 255, 255, 0.55); /* punto de frenada de la referencia */
}

/* ---- 4. Tipografía, espaciado, radios, movimiento ---- */
:root {
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "Inter", system-ui, sans-serif; /* cifras del overlay: fuente pendiente */
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --font-num-weight: 800;

  /* Escala densa de Settings y Debrief (base 14 px) */
  --text-2xs: 11px; /* badges */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-display: 28px;
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* Escala del overlay (se lee a ~1 m, de reojo) */
  --ov-label: 12px;
  --ov-value: 34px; /* 30 → 34 px en el DDU v2: la fila de indicadores tiene una caja menos */
  --ov-value-xl: 48px;
  --ov-unit: 11px;
  --ov-pad: 4px;
  --ov-gap: 4px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px; /* banners */
  --radius-pill: 999px;
  --control-h: 36px;
  --control-h-sm: 32px;
  --dot-size: 8px;
  --content-max: 1000px; /* ancho de una fila de formulario; los datos (gráficos, tablas) usan todo */
  --card-max: 612px;
  --text-col-min: 220px;
  --chart-h: 220px; /* alto de los gráficos de Settings (la referencia con y sin offset) */
  --chart-h-sm: 140px; /* alto del gráfico de la prueba de sonido de Settings */
  --swatch-w: 18px; /* muestra de línea en una leyenda */
  --content-max-list: 1120px; /* pantallas de lista (Status de Settings): más ancho que un formulario */
  --cockpit-side: 400px; /* columna de condiciones y Feedback en Training; abajo de 1200 px va en una */
  --foot-h: 36px; /* alto del pie de Settings; la barra de Guardar se apoya encima */
  --dialog-w: 440px; /* ancho de un diálogo de confirmación */
  --logo-size: 20px; /* el logo del menú lateral, Sputnik 1 */
  --rail-tip-max: 256px; /* ancho máximo del tooltip del menú cerrado */
  --dur-swap: 180ms; /* cruce del logo con el ícono de abrir el menú */
  --phase-choice-min: 120px; /* cada fase del gráfico de Training, para que el tiempo no salte */
  --icon-size: 16px; /* íconos dentro de botones y campos */
  --kbd-size: 20px; /* la tecla de atajo dentro de un campo («/») */
  --chip-select-max: 256px; /* el valor de un filtro «etiqueta | valor» */
  --menu-min: 220px; /* ancho mínimo de un menú (Add lap, Set as) */
  --pop-w: 380px; /* el panel de un campo que se abre desde un botón */
  --dd-max-h: 384px; /* el alto máximo del panel de un desplegable, antes de desplazarse */
  --who-min: 224px; /* la columna del piloto y la vuelta en la biblioteca */
  --textarea-min-h: 88px; /* un comentario de unas líneas */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 120ms;
  --dur-normal: 200ms;

  /* Menú lateral (rail): abierto con etiquetas, cerrado solo con íconos y tooltip */
  --rail-w: 220px;
  --rail-w-collapsed: 52px;
  --nav-item-h: 36px;
  --nav-icon: 18px;
  --nav-bar-w: 2px; /* barra de acento del ítem activo, en su borde izquierdo */
  --nav-bar-h: 15px;
  --ease-rail: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-rail: 250ms;

  /* Controles de formulario */
  --check-size: 16px;
  --switch-w: 28px; /* interruptor de encendido (módulos) */
  --switch-h: 16px;
  --switch-knob: 12px;
  --info-size: 14px; /* el ícono (i) de una ayuda */
  --tip-max: 280px; /* ancho máximo del texto de una ayuda */
  --input-narrow: 160px; /* un campo de pocos caracteres (un puerto) no se estira */
  --check-mark-w: 9px; /* la tilde de la casilla */
  --check-mark-h: 5px;
  --check-mark-stroke: 2px;
  --segment-h: 28px;
  --segment-pad: 2px; /* aire entre el borde del control y la opción elegida */
  --pill-h: 24px;
  --pill-dot: 7px;
  --badge-h: 18px;
  --banner-tint: 10%; /* fondo de un banner: el color de su estado mezclado a este porcentaje */
  --banner-edge: 45%; /* su borde, del mismo color, más presente */
  --toast-w: 360px; /* ancho de un aviso que entra por la derecha (toast) */
  --toast-shadow: 0 8px 24px rgb(0 0 0 / 0.35); /* lo separa del contenido que tapa */
  --z-toast: 60; /* encima del tooltip del menú (50); un <dialog> abierto igual queda arriba */
}