/* =========================================================
   ESPT Competizione — tokens.css
   ÚNICO sitio donde se definen colores, tipografía, tamaños
   y espaciados. El resto de CSS y charts.js leen de aquí.
   Si cambias un valor, cambia en toda la web (gráficos incluidos).

   Los colores "derivados" (brillos, fondos translúcidos) se
   calculan con color-mix() a partir del color base: cambia
   --c-rojo y sus variantes se recalculan solas.

   Las fuentes se cargan con <link> en el <head> de cada HTML
   (no con @import aquí: un @import retrasa el pintado de toda
   la hoja de estilos hasta que responde el servidor de fuentes).
   ========================================================= */

:root {
  /* La web es oscura siempre: así el navegador pinta oscuros también
     las barras de scroll, los <select> y el autocompletado. */
  color-scheme: dark;

  /* ---------- Fondos ---------- */
  --c-pista:        #08080a;   /* fondo de página (igual que theme-color en los HTML) */
  --c-asfalto:      #101014;   /* superficies: tarjetas, tabla */
  --c-asfalto-alto: #17171c;   /* superficies elevadas: cabeceras, campos */
  --c-tarjeta:      #1f1f26;   /* hover de superficies elevadas */
  --c-linea:        #2b2b34;
  --c-linea-suave:  #1b1b21;   /* separadores entre filas */

  /* ---------- Texto ----------
     Los tres pasan de 4.5:1 de contraste sobre cualquiera de los fondos. */
  --c-texto:        #f5f5f7;
  --c-texto-2:      #adadb9;
  --c-texto-3:      #868694;

  /* ---------- Acentos base ---------- */
  --c-rojo:         #ff2a36;   /* marca, enlaces y piloto A */
  --c-rojo-oscuro:  #c9121e;   /* fondo de botón: el blanco encima se lee (5.8:1) */
  --c-rival:        #4cc3ff;   /* piloto B. Azul y no verde: rojo/verde no lo distingue un daltónico */
  --c-oro:          #ffc23d;   /* títulos */

  /* ---------- Acentos derivados (no tocar: salen de los base) ---------- */
  --c-rojo-glow:    color-mix(in srgb, var(--c-rojo) 32%, transparent);
  --c-rojo-suave:   color-mix(in srgb, var(--c-rojo) 9%, transparent);
  --c-rival-suave:  color-mix(in srgb, var(--c-rival) 10%, transparent);
  --c-oro-suave:    color-mix(in srgb, var(--c-oro) 12%, transparent);

  /* Fondos de fila: OPACOS a propósito. La columna congelada de la tabla
     los necesita sólidos para que las demás celdas no se vean por debajo. */
  --c-fila-par:     #0c0c0f;
  --c-fila-hover:   color-mix(in srgb, var(--c-rojo) 9%, var(--c-asfalto));

  /* ---------- Tipografía ----------
     Tres papeles, tres fuentes:
       display  rótulos grandes: logo, título de página, nombre de piloto
       base     todo lo que se lee: párrafos, tablas, formularios
       dato     cifras grandes y etiquetas en mayúsculas
     Accelerator es una fuente de rótulo: en tamaños pequeños o en una tabla
     no se lee, por eso solo se usa en display. */
  --f-display: "Accelerator W01", "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-base:    "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-dato:    "Barlow Condensed", "Barlow", system-ui, "Arial Narrow", sans-serif;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-md:   1rem;
  --t-lg:   1.25rem;
  --t-xl:   clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --t-2xl:  clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  --t-3xl:  clamp(2rem, 1.2rem + 4.4vw, 4.5rem);

  /* ---------- Espaciado y formas ---------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 16px;
  --e-4: 24px;
  --e-5: 40px;
  --e-6: 64px;
  --radio: 2px;    /* esquinas rectas: es una hoja de resultados, no una app */
  --ancho: 1280px;
  --margen: clamp(16px, 4vw, 32px);   /* margen lateral: el mismo a izquierda y derecha */
  --alto-cabecera: 64px;

  /* ---------- Movimiento ---------- */
  --t-rapido: 140ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 640px) {
  /* En móvil la cabecera tiene dos filas: logo y menú. */
  :root { --alto-cabecera: 108px; }
}