/*
 * Tokens de identidad — raceday.cl, propuesta A "Meta".
 * Fuente: identidad_corporativa/raceday-propuesta-A.md (docs/DISENO.md).
 * No hardcodear estos valores en otros archivos CSS: usar las variables.
 */
:root {
  /* Paleta */
  --color-asfalto: #15171C;
  --color-naranja: #FF5B1F;
  --color-tiza: #F5F2EB;
  --color-cemento: #666B73;
  --color-amarillo: #FFC629;

  /* Tipografía */
  --font-display: "Barlow Condensed", sans-serif; /* titulares, cifras, dorsales — siempre italic/black, mayúsculas */
  --font-body: "Barlow", sans-serif; /* texto corrido, interfaz, botones */

  /* Geometría de marca */
  --brand-skew: -12deg;
  --radius-button: 8px;
  --radius-isotipo: 24px;
  --touch-target-min: 44px;

  /* Tokens semánticos (adaptan con el tema claro/oscuro) — usar estos para
     el "chrome" de la página (fondo, texto, tarjetas, botones, navbar).
     El manual de marca no define un modo oscuro: hero y footer se quedan
     siempre en Asfalto (bloques de marca fijos), no usan estos tokens. */
  --bg: var(--color-tiza);
  --text: var(--color-asfalto);
  --surface: #ffffff;
  --border: var(--color-asfalto);
}

/* Oscuro por preferencia del sistema, salvo que el usuario haya elegido
   explícitamente "light" con el botón (ver base.html). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--color-asfalto);
    --text: var(--color-tiza);
    --surface: #1f222a;
    --border: var(--color-tiza);
  }
}

/* Oscuro elegido explícitamente con el botón, sin importar el sistema. */
:root[data-theme="dark"] {
  --bg: var(--color-asfalto);
  --text: var(--color-tiza);
  --surface: #1f222a;
  --border: var(--color-tiza);
}