/*
  TOKENS DE DISEÑO — fuente de verdad visual del proyecto.
  Valores de la exportación de Claude Design (design/README.md). Las vistas
  consumen SOLO estas variables; nunca se hardcodean colores, tamaños ni espaciados.
  Las medidas del diseño están en px sobre 1920×1080; aquí van en rem (1rem = 16px).
*/
:root {
  color-scheme: dark;

  /* Color — tema oscuro (el activo en el MVP) */
  --color-bg: #0b0c0e;
  --color-surface: #141619; /* panel */
  --color-surface-raised: #1c1f23; /* panel2: campos, elemento activo */
  --color-border: #272a2f;
  --color-fg: #f2f2ef;
  --color-muted: #8a8f98;

  /* Color — semánticos (comunes a ambos temas) */
  --color-primary: #e10600; /* acento: marca, acción principal, en directo */
  --color-primary-fg: #ffffff;
  --color-success: #1fb46a; /* verde: OK, conectado */
  --color-success-fg: #06210f;
  --color-warning: #f5c400; /* amarillo: aviso, bandera amarilla */
  --color-warning-fg: #1a1500;
  --color-danger: var(--color-primary);

  /* Color de dominio */
  --color-lap-record: #9b4dff; /* morado: vuelta rápida / récord */
  --color-lap-personal: var(--color-success); /* verde: mejor vuelta personal */
  --color-flag-yellow: var(--color-warning);
  /* Puestos 1, 2 y 3: oro, plata y bronce en todas las pantallas (mejora 08.3).
     El oro es metálico para no confundirse con la bandera amarilla. */
  --color-place-1: #d4af37;
  --color-place-2: #c0c6cf;
  --color-place-3: #cd7f32;

  /* Tipografía (fuentes locales en css/fonts.css, ADR-009) */
  --font-sans: "Barlow", system-ui, sans-serif;
  --font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --text-xs: 0.8125rem; /* 13: pills */
  --text-sm: 0.875rem; /* 14: migas, cabeceras de tabla, etiquetas */
  --text-md: 0.9375rem; /* 15: etiquetas de KPI, descripciones */
  --text-base: 1rem; /* 16: texto y botones de la administración */
  --text-lg: 1.0625rem; /* 17: navegación */
  --text-xl: 1.375rem; /* 22: título de tarjeta; estado en TV */
  --text-2xl: 1.5rem; /* 24: marca; título de opción */
  --text-3xl: 1.625rem; /* 26: título de página, cifra de récord */
  --text-4xl: 1.875rem; /* 30: marca y antetítulo en TV */
  --text-5xl: 3rem; /* 48: cifra de KPI */
  --text-6xl: 3.25rem; /* 52: titular de TV */
  --text-7xl: 4rem; /* 64: cifra grande de TV */
  --text-8xl: 6rem; /* 96: titular de pantalla de TV */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-display: 0.9;
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-normal: 1.4;

  --tracking-tight: 0.04em;
  --tracking-normal: 0.06em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.12em;

  /* Spacing (base 4px; medios pasos donde el diseño los usa) */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-4-5: 1.125rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radios */
  --radius-xs: 0.1875rem; /* pills */
  --radius-sm: 0.25rem;
  --radius-md: 0.3125rem; /* botones y campos */
  --radius-lg: 0.375rem; /* bloques de TV */
  --radius-xl: 0.5rem; /* tarjetas */
  --radius-full: 999px;

  /* Bordes y foco */
  --border-width: 1px;
  --focus-ring: 2px solid var(--color-fg);
  --focus-offset: 2px;

  /* Medidas de layout */
  --size-control: 2.75rem; /* 44: botones, campos, filas de navegación */
  --size-dot: 0.5rem;
  --size-dot-tv: 0.75rem;
  --size-brand-mark: 1.375rem;
  --size-brand-mark-tv: 1.5rem;
  --size-site-max: 72rem; /* 1152: ancho máximo de las páginas públicas */
  --size-site-lead: 40rem; /* 640: ancho del texto de presentación */
  --size-session-card-min: 24rem; /* 384: tarjeta de retransmisión */
  --size-race-row-min: 36rem; /* 576: fila de última carrera */
  --size-prose-max: 48rem; /* 768: ancho de lectura cómodo del texto largo */
  --size-prose-column: 40rem; /* 640: ancho mínimo de columna en /privacidad/ */
  --size-search-max: 40rem; /* 640: campo de búsqueda de la portada */
  --size-setup-aside: 44rem; /* 704: columna de datos a teclear de /setup/ */
  --size-kpi-min: 13rem;
  --border-width-podium: 0.375rem;
  --skew-brand: -14deg;
  --opacity-disabled: 0.45;

  /*
    TV: el diseño es un lienzo de 1920×1080 (120×67.5 rem). En /tv/ la raíz escala
    con el lado que limita (la tipografía no se deforma) y la pantalla ocupa todo el
    viewport: en pantallas que no son 16:9 el espacio sobrante lo reparten las
    columnas flexibles en lugar de quedar como márgenes negros (mejora 08.1).
  */
  --tv-root-font-size: min(calc(100vw / 120), calc(100vh / 67.5));
  --size-tv-width: 100vw;
  --size-tv-height: 100vh;
  --tv-padding: var(--space-12);
  --tv-gap: var(--space-10);
  --tv-gap-live: var(--space-8); /* 32: entre bloques de 1a */

  /* TV en directo (1a, 1b, 1c): medidas del lienzo de 1920×1080 en rem */
  --text-tv-badge: 2.25rem; /* 36: «en directo» */
  --text-tv-name: 2.625rem; /* 42: piloto en la clasificación */
  --text-tv-cell: 2.625rem; /* 42: vueltas y tiempos de la clasificación (48 → 42 al añadir la peor vuelta, 08.5) */
  --text-tv-podium-name: 3.375rem; /* 54 */
  --text-tv-winner: 4.5rem; /* 72 */
  --text-tv-grid-position: 5rem; /* 80: puesto en la parrilla */
  --text-tv-record: 6.5rem; /* 104: cifra de la vuelta rápida */
  --text-tv-podium-3: 9.375rem; /* 150 */
  --text-tv-podium-2: 11.25rem; /* 180 */
  --text-tv-podium-1: 12.5rem; /* 200 */
  --size-tv-band: 6.5rem; /* 104: banda de estado */
  --size-tv-band-box: 13.75rem; /* 220: caja de vuelta / tiempo */
  --size-tv-badge-dot: 1rem;
  --size-tv-flag-width: 1.375rem;
  --size-tv-flag-height: 2.125rem;
  --size-tv-aside: 31.25rem; /* 500: columna de récords */
  --size-tv-head: 2.5rem; /* 40: cabecera de la clasificación */
  --size-tv-row: 4.875rem; /* 78: fila de la clasificación */
  /* Columnas de la clasificación: el piloto se queda con el resto (≈240 a 1920×1080) */
  --size-tv-col-position: 5.625rem; /* 90 */
  --size-tv-col-laps: 6.25rem; /* 100 */
  --size-tv-col-last: 10.625rem; /* 170 */
  --size-tv-col-best: 14.0625rem; /* 225: tiempo + nº de vuelta (08.4) */
  --size-tv-col-worst: 11.5625rem; /* 185: peor vuelta + nº (08.5) */
  --size-tv-feed-lap: 4.5rem; /* 72 */
  --size-tv-feed-bar: 0.5rem;
  --size-tv-feed-bar-height: 2.25rem;
  --size-tv-swatch: 1.25rem;
  --size-tv-grid-card: 9rem;
  --size-tv-light: 9.5rem; /* luz del semáforo */
  --size-tv-light-compact: 4.5rem; /* 72: semáforo de la reanudación, en la columna */
  --size-tv-podium-first: 23.75rem; /* 380 */
  --size-tv-podium-second: 16.25rem; /* 260 */
  --size-tv-podium-third: 11.875rem; /* 190 */
  --size-tv-result-tile: 6rem; /* 96 */
  --border-width-tv-accent: 0.625rem; /* 10: borde de color de récords y podio */
  --border-width-tv-chip: 0.5rem; /* 8 */

  /* Semáforo de salida */
  --color-light-off: var(--color-surface-raised);
  --color-light-on: var(--color-primary);
  --color-light-go: var(--color-success);
  --duration-light: 120ms;
}

/*
  Tema claro: definido para la fase 3, sin selector en la interfaz.
  Se activaría con <html data-theme="light">.
*/
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f2f2ef;
  --color-surface: #ffffff;
  --color-surface-raised: #f6f6f3;
  --color-border: #e1e1dc;
  --color-fg: #0e0f11;
  --color-muted: #666b73;
}