/* Token condivisi del design system ESportsArena (vedi DESIGN.md).
   Solo font e variabili --ea-*: nessuna regola su elementi, sicuro da caricare su qualsiasi pagina.
   Tema chiaro: <html data-theme="light"> (gestito da js/theme.js). */
/* Titillium Web. Non esiste il peso 500: lo copre il 600. "Titillium Web Head" = titoli, sempre Bold qualunque sia il peso.
   size-adjust compensa x-height e altezza maiuscole piu' basse rispetto ai font precedenti (Inter, Anton). */
@font-face { font-family: "Titillium Web"; src: url("../fonts/titillium-web-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; size-adjust: 108%; }
@font-face { font-family: "Titillium Web"; src: url("../fonts/titillium-web-latin-600-normal.woff2") format("woff2"); font-weight: 500 600; font-display: swap; size-adjust: 108%; }
@font-face { font-family: "Titillium Web"; src: url("../fonts/titillium-web-latin-700-normal.woff2") format("woff2"); font-weight: 700 900; font-display: swap; size-adjust: 108%; }
@font-face { font-family: "Titillium Web Head"; src: url("../fonts/titillium-web-latin-700-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; size-adjust: 108%; }

:root {
  /* colori */
  --ea-red: #DC2626;
  --ea-red-hover: #B91C1C;
  --ea-red-text: #F87171;       /* rosso per testo piccolo (contrasto ≥ 4.5:1 su #0A0A0A) */
  --ea-blue: #2563EB;
  --ea-blue-hover: #1D4ED8;
  --ea-blue-text: #60A5FA;      /* blu per testo piccolo */
  --ea-success: #22C55E;
  --ea-success-text: #22C55E;
  --ea-warning: #F59E0B;
  --ea-warning-text: #F59E0B;
  --ea-bg: #0A0A0A;
  --ea-bg-alt: #0F0F0F;
  --ea-surface: #141414;
  --ea-surface-2: #1E1E1E;
  --ea-border: #2E2E2E;
  --ea-divider: #2A2A2A;
  --ea-text: #F5F5F5;
  --ea-muted: #A3A3A3;
  --ea-nav-bg: rgba(10, 10, 10, .9);
  --ea-logo-filter: brightness(0) invert(1);   /* loghi serie bianchi su fondo scuro */

  /* serie: F1 rossa, WEC blu, MotoGP ambra (mai due colori squadra nello stesso elemento) */
  --ea-f1: var(--ea-red);
  --ea-mgp: var(--ea-warning);
  --ea-wec: var(--ea-blue);

  /* raggi */
  --ea-r-sm: 2px;
  --ea-r: 4px;
  --ea-r-lg: 6px;

  /* glow */
  --ea-glow-sm: 0 0 4px rgba(220, 38, 38, .25);
  --ea-glow: 0 0 10px rgba(220, 38, 38, .30);
  --ea-glow-md: 0 0 20px rgba(220, 38, 38, .40);
  --ea-glow-lg: 0 0 40px rgba(220, 38, 38, .50);
  --ea-glow-blue-sm: 0 0 4px rgba(37, 99, 235, .25);
  --ea-glow-blue: 0 0 10px rgba(37, 99, 235, .30);
  --ea-glow-blue-md: 0 0 20px rgba(37, 99, 235, .40);

  --ea-font-head: "Titillium Web Head", "Titillium Web", system-ui, sans-serif;
  --ea-font-body: "Titillium Web", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ea-font-mono: "Titillium Web", ui-monospace, Consolas, monospace;   /* cifre gia' a larghezza fissa */

  --ea-fast: 150ms;
}

:root[data-theme="light"] {
  --ea-red-text: #B91C1C;       /* contrasto ≥ 4.5:1 su bianco */
  --ea-blue-text: #1D4ED8;
  --ea-success-text: #15803D;
  --ea-warning-text: #B45309;
  --ea-bg: #FAFAFA;
  --ea-bg-alt: #F2F2F2;
  --ea-surface: #FFFFFF;
  --ea-surface-2: #F4F4F5;
  --ea-border: #D9D9D9;
  --ea-divider: #E8E8E8;
  --ea-text: #0A0A0A;
  --ea-muted: #525252;
  --ea-nav-bg: rgba(250, 250, 250, .92);
  --ea-logo-filter: brightness(0);             /* loghi serie neri su fondo chiaro */
  --ea-glow: 0 0 10px rgba(220, 38, 38, .18);
  --ea-glow-md: 0 0 20px rgba(220, 38, 38, .22);
  --ea-glow-lg: 0 0 32px rgba(220, 38, 38, .20);
}