/* ==========================================================================
   TOKENS — la fase T, PLAN.md "FASE T / T0"

   Hasta acá el proyecto tenía CERO custom properties: el único `:root` de
   index.html era `color-scheme: dark`, y ~120 clases repetían ~20 hex a mano
   (`#8ea3c7` catorce veces). Esto es la capa que faltaba.

   Regla dura de acá en adelante: NINGÚN archivo de estilo de este proyecto
   escribe un color literal. Si un color no está acá, no existe.

   La estética es BROADCAST DE ESPORTS (decisión del usuario, PLAN.md T.2):
   base casi negra, un acento cyan de "en vivo", oro para logros, y una
   condensada para todo lo que sea número o cartel.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Superficies ------------------------------------------------------
     Cinco niveles, de atrás para adelante. `void` es el fondo de la página;
     `chrome` es la topbar y los rieles (tienen que leerse como marco, no
     como contenido); `surface` es una tarjeta; `raised` es algo apoyado
     sobre una tarjeta; `sunken` son las pistas de barra y los campos.
     F0 saca el navy: grafito / obsidiana, sin matiz azul de dashboard. */
  --bg-void:    #030407;
  --bg-chrome:  #07080c;
  --bg-surface: #0b0d12;
  --bg-raised:  #14171e;
  --bg-sunken:  #05060a;

  /* --- Líneas -----------------------------------------------------------
     Hielo, no azul 148/176/255. Sobre grafito, una arista azul se lee
     "HTML oscuro". El hairline blanco-frío es el de un overlay 2026. */
  --line-faint:  rgba(210, 222, 236, 0.14);
  --line:        rgba(210, 222, 236, 0.24);
  --line-strong: rgba(210, 222, 236, 0.42);

  /* --- Tinta ------------------------------------------------------------
     Hielo. Contraste se re-verifica en validate.js sobre las superficies
     nuevas. D48 (V7): `ink-mute` era #5e6a78 (3,25:1 sobre --bg-raised) y el
     juego lo usa para etiquetas, atajos y notas que SÍ se leen: sube a #7a8a9c
     (misma tonalidad; 5,07:1 sobre --bg-raised y 4,60:1 sobre el relleno oro
     del stat destacado). Sigue siendo la tinta más tenue: --ink-dim da 7,40:1.
     La regla (todo texto >= 4,5:1, grande >= 3:1) la mide src/dev/contraste.mjs. */
  --ink:      #eef3f8;
  --ink-dim:  #9aa8b8;
  --ink-mute: #7a8a9c;

  /* --- Hielo (arista, no significado) -----------------------------------
     `--ice` es el metal del HUD: ticks, labels de eje, monograma. NUNCA
     significa "en vivo" — eso sigue siendo `--live`. */
  --ice:      #d5e4f4;
  --ice-dim:  rgba(213, 228, 244, 0.7);
  --ice-glow: rgba(213, 228, 244, 0.28);
  --edge-lo:  rgba(0, 0, 0, 0.55);
  --scanline: rgba(0, 0, 0, 0.28);
  --cut:      20px;
  --cut-sm:   8px;
  --tick:     var(--ice);
  --tick-len: 28px;
  --tick-w:   3px;
  --clip-corte: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --clip-corte-sm: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));

  /* --- El acento de transmisión ----------------------------------------
     El cyan es "en vivo / ahora / esto es lo activo". No es decoración: si
     algo está en --live es porque está pasando en este momento. */
  --live:      #2ee8ff;
  --live-deep: #0d7f92;
  --live-glow: rgba(46, 232, 255, 0.6);

  /* Un halo de fondo, no una superficie: para la ambientación de base.css,
     dos escalones más tenue que --live-glow. `--horizon` es el que pinta
     el body; las fases lo pisan (amateur más frío, playoffs oro, peligro
     rojo) sin reescribir el stack de fondos. */
  --live-horizon: rgba(46, 232, 255, 0.16);
  --gold-horizon: rgba(255, 200, 97, 0.14);
  --danger-horizon: rgba(255, 51, 85, 0.16);
  --horizon-amateur: rgba(46, 232, 255, 0.1);
  --horizon: var(--live-horizon);

  /* --- Ranked (identidad de la escalera, no un acento más) --------------
     El oro se reserva a Challenger. Hierro/bronce van más claros que el
     metal real para que el nombre del tier se lea sobre --bg-sunken. */
  --rank-iron:        #c4b4a8;
  --rank-bronze:      #e09a62;
  --rank-silver:      #c5cde0;
  --rank-gold:        #ffc861;
  --rank-platinum:    #7ee0e0;
  --rank-emerald:     #3ddc97;
  --rank-diamond:     #7eb0ff;
  --rank-master:      #c4a0ff;
  --rank-grandmaster: #ff6b7a;
  --rank-challenger:  #ffc861;

  /* --- El oro ----------------------------------------------------------
     Logro, hito máximo, título, banda `clase_mundial`. Se usa POCO a
     propósito: si el oro está en todos lados, no significa nada. */
  --gold:      #ffc861;
  --gold-deep: #8a6524;
  --gold-glow: rgba(255, 200, 97, 0.28);

  /* --- Semánticos ------------------------------------------------------- */
  --up:     #3ddc97;   /* sube, gana, positivo */
  --down:   #ff5f56;   /* baja, pierde, negativo */
  --warn:   #ffab4a;   /* costo, riesgo, atención */
  --danger: #ff3355;   /* mentalidad al límite, burnout inminente */

  /* --- Rellenos ("fase T0b" — el candado del botón) ----------------------
     REGLA DURA: --ink, --ink-dim e --ink-mute son TINTA. Nunca son fondo.
     Antes de T0b, `button:hover` ponía --ink de fondo: un bloque casi blanco
     con halo sobre un fondo casi negro, ~19:1 de golpe bajo el cursor. Un
     botón se arma al pasarle el mouse, no se prende: reposo en relleno
     tenue del color de acento, hover en el color sólido. `validate.js`
     verifica en estático que ningún `background`/`background-color` de
     este directorio use `var(--ink)` o `var(--ink-dim)`. */
  --live-fill: rgba(46, 232, 255, 0.22);
  --gold-fill: rgba(255, 200, 97, 0.10);
  --warn-fill: rgba(255, 171, 74, 0.12);
  /* T6: el camino de la serie (mapa ganado/perdido) necesitaba un relleno
     tenue de --up/--down — mismo criterio que los de arriba. */
  --up-fill:   rgba(61, 220, 151, 0.15);
  --down-fill: rgba(255, 95, 86, 0.15);

  /* --- Las 11 categorías de decisión ------------------------------------
     La tabla de PLAN.md §12.1, tokenizada desde el día uno para que la
     fase 12 solo tenga que declarar el campo `categoria` en los JSON: los
     colores ya van a estar acá esperándola. */
  --cat-rutina:      #6b7a99;
  --cat-golpe:       #ff4d4d;
  --cat-oportunidad: #3ddc97;
  --cat-mercado:     #ffc861;
  --cat-parche:      #a97bff;
  --cat-vestuario:   #4d8dff;
  --cat-prensa:      #48d6ff;
  --cat-familia:     #ff9646;
  --cat-salud:       #c1272d;
  --cat-partido:     #e8402a;   /* el rojo LoL */

  /* --- Las 4 bandas de nivel (core/ficha.js `bandaDeNivel`) ------------- */
  --nivel-prospecto:     #93a3c4;
  --nivel-titular:       #3ddc97;
  --nivel-elite:         #2ee8ff;
  --nivel-clase_mundial: #ffc861;

  /* --- Tipografía -------------------------------------------------------
     Dos familias, auto-hospedadas en `fuentes/` (93 KB en total, subset
     latin). Antes de la fase T el proyecto declaraba `Inter` y NUNCA la
     cargaba: el juego se veía en Arial. */
  --font-ui: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Condensed", "Bahnschrift", "Arial Narrow", var(--font-ui);

  /* Escala. El salto 40 → 64 → 96 existe para una sola cosa: el marcador
     y el nivel. Nada más puede usar --fs-9. */
  --fs-0: 11px;  --fs-1: 12px;  --fs-2: 13px;  --fs-3: 15px;
  --fs-4: 17px;  --fs-5: 21px;  --fs-6: 28px;  --fs-7: 40px;
  --fs-8: 64px;  --fs-9: 96px;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh:       1.55;

  /* El tracking de los carteles de broadcast: en condensada y en
     mayúsculas, sin separar las letras, el texto se apelmaza. */
  --track-cartel: 0.10em;
  --track-label:  0.06em;

  /* --- Espacio: escala de 4 ---------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;

  /* --- Radios ------------------------------------------------------------
     Broadcast es más cuadrado que la web: el radio grande se reserva para
     los contenedores, no para los elementos chicos. */
  --r-sharp: 2px;
  --r:       8px;
  --r-lg:    14px;
  --r-pill:  999px;
  /* El corte de esquina del escenario. Subió de 10px a 18px en T0b: a 10px,
     sobre un panel de +1000px, era invisible — no se veía en ninguna
     captura. A 18px se lee como una forma, no como un redondeo raro. */
  --chamfer: 40px;

  /* --- Elevación --------------------------------------------------------- */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --sombra-3: 0 20px 60px rgba(0, 0, 0, 0.55);

  /* --- Motion -----------------------------------------------------------
     `--ease` es expo-out: arranca rápido y frena largo. Es la curva que
     hace que una animación se sienta cara en vez de mecánica.
     Antes de la fase T había CERO `transition` en todo el proyecto. */
  --dur-fast: 120ms;
  --dur:      220ms;
  --dur-slow: 420ms;
  --dur-beat: 700ms;   /* el pulso del reproductor de T3 */

  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Layout (T1) ------------------------------------------------------- */
  --topbar-alto: 64px;
}

@media (max-width: 639px) {
  :root {
    --fs-6: 24px; --fs-7: 32px; --fs-8: 48px; --fs-9: 64px;
    --topbar-alto: 56px;
    --cut: 14px;
    --chamfer: 28px;
    --tick-len: 18px;
  }
}

/* --- El shell de FASE V (V2-C; PLAN.md §V.4) -------------------------------
   La franja (≤ 64 px), el escenario de una columna (~720 px), el acompañante
   (≥ 1180 px), la barra de cuartos fija del celular y el ancho del cuarto. */
:root {
  --franja-alto: 64px;
  --escenario-columna: 720px;
  --escenario-inicio: 1180px;
  --acompanante-ancho: 340px;
  --cuartos-barra-alto: 52px;
  --cuarto-ancho: 1040px;
}
@media (max-width: 1439px) {
  :root { --acompanante-ancho: 300px; }
}
@media (max-width: 639px) {
  :root { --franja-alto: 56px; }
}