/* ==========================================================================
   El Camino DT — Design tokens
   --------------------------------------------------------------------------
   Mundo visual: PIZARRA Y CAL.
   El fondo es verde-negro mate (una pizarra táctica bajo reflectores), no azul
   ni gris neutro. El acento es la cal: la línea blanca-lima que se pinta sobre
   el césped. Ámbar y arcilla completan el vocabulario semántico (amonestación,
   lesión). Nada de gradientes, glows ni cristal: superficies mates separadas
   por hairlines de 1px.

   Regla: el color significa algo o no se usa. Todo el chrome es neutro.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. PRIMITIVAS — la paleta cruda. No usar directamente en componentes.
     ---------------------------------------------------------------------- */

  /* Pizarra: neutro con desviación verde. 13 pasos, porque una UI densa
     necesita muchas capas de superficie para separar sin dibujar bordes. */
  --ink-1000: hsl(160 22% 4%);
  --ink-950:  hsl(160 18% 6%);
  --ink-900:  hsl(158 16% 8.5%);
  --ink-850:  hsl(158 14% 11%);
  --ink-800:  hsl(157 12% 14%);
  --ink-750:  hsl(157 11% 17%);
  --ink-700:  hsl(156 10% 21%);
  --ink-600:  hsl(155 8% 30%);
  --ink-500:  hsl(154 7% 42%);
  --ink-400:  hsl(152 7% 55%);
  --ink-350:  hsl(152 7% 60%);  /* mínimo legible sobre el relleno de tramo 2 */
  --ink-300:  hsl(150 8% 68%);
  --ink-200:  hsl(148 10% 82%);
  --ink-100:  hsl(146 14% 93%);

  /* Cal: la línea del campo. Es el único acento del producto. */
  --cal-700: hsl(80 50% 24%);
  --cal-600: hsl(79 55% 33%);
  --cal-500: hsl(78 62% 43%);
  --cal-400: hsl(76 70% 55%);
  --cal-300: hsl(74 78% 68%);
  --cal-200: hsl(72 85% 80%);

  /* Ámbar: amonestación, contrato por vencer, atención. */
  --amber-500: hsl(40 90% 52%);
  --amber-400: hsl(40 92% 62%);
  --amber-300: hsl(41 94% 74%);

  /* Arcilla: lesión, baja forma, negativo. El color de la cancha de tierra. */
  --clay-500: hsl(9 62% 47%);
  --clay-400: hsl(9 68% 57%);
  --clay-300: hsl(10 74% 70%);

  /* ----------------------------------------------------------------------
     2. SEMÁNTICAS — lo que usan los componentes.
     ---------------------------------------------------------------------- */

  /* Superficies */
  --bg-page:      var(--ink-950);
  --bg-chrome:    var(--ink-900);   /* barra de navegación */
  --bg-panel:     var(--ink-850);   /* paneles de contenido */
  --bg-row:       var(--ink-800);   /* filas, celdas elevadas */
  --bg-raised:    var(--ink-750);   /* controles sobre panel */
  --bg-hover:     hsl(157 12% 16%);
  --bg-active:    hsl(157 12% 19%);
  --bg-selected:  hsl(78 45% 42% / 0.14);

  /* Líneas. Una UI densa se ordena con hairlines, no con sombras. */
  --line-hairline: hsl(157 12% 16%);
  --line:          var(--ink-700);
  --line-strong:   var(--ink-600);

  /* Texto */
  --text-primary:   var(--ink-100);
  --text-secondary: var(--ink-300);
  --text-muted:     var(--ink-400);
  --text-disabled:  var(--ink-500);
  --text-on-accent: var(--ink-1000);

  /* Un icono habilitado no es texto deshabilitado. Este token existe para que
     los iconos tenues pasen 3:1 incluso sobre la superficie más clara del
     sistema (--bg-raised), donde --text-disabled se queda en 2,7:1. */
  --icon-quiet:     hsl(153 7% 50%);

  /* Acento */
  --accent:        var(--cal-400);
  --accent-strong: var(--cal-300);
  --accent-dim:    var(--cal-600);
  --accent-wash:   hsl(78 60% 45% / 0.12);
  --accent-wash-hi: hsl(78 60% 45% / 0.2);   /* hover del botón de acento suave */
  --accent-line:   hsl(78 55% 45% / 0.4);    /* borde de pastilla/botón de acento */

  /* Tintes de fondo para una cifra juzgada (calificación de partido). Se
     mantienen por debajo del 20 %: por encima, el número deja de pasar 4,5:1. */
  --tint-good: hsl(78 55% 45% / 0.18);
  --tint-bad:  hsl(9 62% 47% / 0.18);

  /* Estados semánticos */
  --warn:   var(--amber-400);
  --danger: var(--clay-400);
  --good:   var(--cal-400);

  /* Foco. Nunca se remueve, nunca es sutil. */
  --focus-ring: var(--cal-400);

  /* ----------------------------------------------------------------------
     3. RAMPA DE ATRIBUTOS (1–20)
     --------------------------------------------------------------------
     Rampa de LUMINANCIA en un solo tono, no de matiz (rojo→verde). Dos
     razones: el ojo encuentra "lo brillante" más rápido que "lo verde", y
     no depende de distinguir rojo de verde. El número siempre acompaña,
     así que el color nunca es el único portador de significado.

     Un atributo bajo no se pinta de rojo: se apaga. La ausencia de brillo
     ES la señal, y así el color queda racionado.
     ---------------------------------------------------------------------- */
  --attr-1-fill: transparent;                    /*  1–5   flojo   */
  --attr-1-text: var(--ink-400);
  --attr-2-fill: hsl(157 10% 18% / 0.9);         /*  6–9   pobre   */
  --attr-2-text: var(--ink-350);
  --attr-3-fill: hsl(78 35% 38% / 0.22);         /* 10–13  correcto*/
  --attr-3-text: var(--ink-200);
  --attr-4-fill: hsl(78 52% 44% / 0.30);         /* 14–16  bueno   */
  --attr-4-text: var(--cal-200);
  --attr-5-fill: hsl(76 68% 50% / 0.38);         /* 17–20  élite   */
  --attr-5-text: var(--cal-200);

  /* ----------------------------------------------------------------------
     4. TIPOGRAFÍA
     --------------------------------------------------------------------
     Una sola familia. Archivo es variable en peso Y ancho: el ancho
     condensado hace de voz de marcador (nombres, dorsales, resultados) y
     el ancho normal carga los datos. Una familia, dos registros.
     ---------------------------------------------------------------------- */
  --font-ui: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fija en rem, ratio ~1.15. En producto la escala fluida molesta:
     el usuario mira siempre al mismo DPI y a la misma distancia. */
  --fs-2xs: 0.625rem;   /* 10px — etiquetas micro en versalitas */
  --fs-xs:  0.6875rem;  /* 11px — etiquetas */
  --fs-sm:  0.75rem;    /* 12px — datos secundarios */
  --fs-md:  0.8125rem;  /* 13px — dato base */
  --fs-lg:  0.9375rem;  /* 15px — títulos de panel, valores destacados */
  --fs-xl:  1.125rem;   /* 18px */
  --fs-2xl: 1.375rem;   /* 22px */
  --fs-3xl: 1.875rem;   /* 30px — nombre del jugador */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.5;

  --tracking-label: 0.08em;  /* versalitas necesitan aire */
  --tracking-tight: -0.01em;

  /* Los DOS registros de ancho. Sólo existen estos dos: el comprimido es la
     voz de marcador (nombres, dorsales, cifras grandes, reloj) y el normal
     carga todo lo demás. Un tercer valor intermedio no se lee como registro,
     se lee como inconsistencia — 84 %, 88 % y 92 % son el mismo ancho con
     tres nombres. Se aplican con font-stretch, que mapea al eje wdth. */
  --wd-condensed: 76%;
  --wd-normal: 100%;

  /* ----------------------------------------------------------------------
     5. ESPACIADO — escala apretada. Una UI densa vive entre 2px y 24px.
     ---------------------------------------------------------------------- */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;

  /* ----------------------------------------------------------------------
     6. FORMA Y MOVIMIENTO
     ---------------------------------------------------------------------- */
  --r-hair: 1px;   /* pips, barras y banderas: casi recto, sólo mata el pixel */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Producto: el movimiento comunica estado, nunca decora. 120–200ms. */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  /* Altura de fila. El ritmo vertical de toda la ficha sale de acá. */
  --row-h: 22px;
  --chrome-h: 44px;
  --subnav-h: 30px;
}