/* Tokens de diseño — mismo patrón que 2daDivision: un único sitio donde viven
   colores, espaciados y tipografía, para que las vistas no inventen valores. */

/* Fuentes auto-hospedadas (mismos archivos y licencia que 2daDivision: Fontshare,
   ITF FFL, permite descarga y auto-hospedaje). Solo las dos que se usan de
   verdad aquí — Satoshi y los pesos intermedios de Cabinet Grotesk se quedan
   en el hermano, que sí los usa en más sitios. `font-display: optional` es la
   pieza que importa: si la fuente no está ya en caché, el primer pintado usa
   el fallback y NO cambia después, así el LCP (el <h1>) no espera a la red. */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/bebas-neue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/bebas-neue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/fonts/cabinet-grotesk-700.woff2') format('woff2');
}

:root {
  /* Rojo de marca, del logo (hsl(360 81% 39%) = #b41313). Solo para elementos
     de "chrome" (botón activo, futuros enlaces/foco) — nunca dentro de la
     tabla, donde el rojo ya significa "descenso" (--descenso, más abajo) y no
     conviene tener dos rojos distintos compitiendo por ese significado. */
  --marca: #b41313;
  --marca-hover: #8a0f0f;
  --marca-tinte: #fceeee;
  /* Para el fondo atenuado: el mismo rojo, muy diluido. Nada de importar el
     verde/naranja de 2daDivision — la homogeneidad pedida es con NUESTRA
     paleta, así que el fondo sale de --marca y de ningún otro color.
     Estructura replicada de 2daDivision (FRONTEND/css/common-head.css, regla
     `body`): dos manchas radiales asimétricas (una fuerte, otra más diluida
     como segundo acento) más rejilla — solo que allí la segunda mancha es de
     otro color (naranja) y aquí es el mismo rojo, dos intensidades. */
  --marca-resplandor: rgb(180 19 19 / 12%);
  --marca-resplandor-2: rgb(180 19 19 / 6%);
  --marca-rejilla: rgb(180 19 19 / 3%);

  --fondo: #f6f7f5;
  --superficie: #ffffff;
  --borde: #e0e3de;
  --texto: #1c211d;
  --texto-suave: #5d6660;

  /* Zonas de la clasificación. Las plazas salen de las bases de competición de
     la RFEF 2026/27 (ver lib/zonas.js), no de una estimación.

     Cada zona tiene dos tonos: el fuerte para la franja lateral y un tinte muy
     suave para el fondo de la fila. Son dos canales a propósito — una franja de
     3px de ámbar junto a otra roja es casi indistinguible en un móvil, y para
     quien no distingue bien los colores no dice nada. El significado lo lleva
     la leyenda; el color solo acompaña. */
  --ascenso: #1a7a4c;
  --ascenso-tinte: #ecf6f0;
  --playoff: #3d8bcd;
  --playoff-tinte: #ecf3fa;
  /* Permanencia: ámbar, deliberadamente distinto del rojo de descenso, porque
     el 13.º NO desciende — solo puede acabar jugando la promoción. */
  --permanencia: #cf8218;
  --permanencia-tinte: #fdf4e8;
  --descenso: #c2453a;
  --descenso-tinte: #fbeeec;

  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-6: 1.5rem;

  --radio: 10px;
  --sombra: 0 1px 3px rgb(0 0 0 / 8%);
  /* Para la tarjeta de contenido principal (la tabla): más presencia que
     --sombra, que se quedó pensada para elementos pequeños. */
  --sombra-tarjeta: 0 4px 16px rgb(0 0 0 / 10%);
  --ancho-max: 1000px;
  --alto-nav: 64px;

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-num: ui-monospace, "SF Mono", Consolas, monospace;
  --fuente-display: 'Bebas Neue', 'Cabinet Grotesk', var(--fuente);
  --fuente-heading: 'Cabinet Grotesk', var(--fuente);
}

/* El sitio se sirve SIEMPRE en claro, por decisión de diseño: no sigue la
   preferencia del sistema. Si algún día se quiere modo oscuro, lo suyo es un
   selector explícito del usuario (atributo data-theme en <html>) y no un
   @media prefers-color-scheme, para que la elección sea del visitante y no
   del sistema operativo. Paleta oscura de partida, por si se retoma:
   fondo #141715 · superficie #1d211f · borde #2e332f · texto #e8ebe9 */

:root {
  color-scheme: light;
}