/* =========================================================
   Rosi Pneumatici · «In asse» · tokens.css
   Design-kit OMNIROUTE Fase 1 — 2026-10-07
   Caricare per primo. Font: da ospitare in /fonts (woff2).
   ========================================================= */

/* --- Font (versione ospitata; per le prove si può usare Google Fonts) --- */
/* @import di Google Fonts tolto in Fase 2: i font sono ospitati in /assets/fonts (vedi fonts.css). */

:root {
  /* --- Colore: fondi --- */
  --c-fondo: #1C1C1E;            /* grafite, sfondo principale */
  --c-fondo-profondo: #111111;   /* footer, fasce, ombra del duotono */
  --c-superficie: #26262A;       /* card, menu aperto, campi */
  --c-superficie-alta: #303035;  /* hover card, tooltip */

  /* --- Colore: testo --- */
  --c-testo: #F1EFEA;            /* 14.81:1 su fondo */
  --c-testo-2: #A8A39C;          /* 6.79:1 */
  --c-testo-3: #8E8A84;          /* 4.96:1 — solo etichette ≥14px */
  --c-rosso-testo: #FF5A5F;      /* testo rosso su scuro 5.57:1 */

  /* --- Colore: rosso del brand --- */
  --c-rosso-logo: #A3171B;       /* luce del duotono, fasce attive */
  --c-azione: #D3202A;           /* bottoni e pillola (bianco 5.24:1) */
  --c-azione-premuto: #A3171B;
  --c-su-azione: #FFFFFF;

  /* --- Colore: linee e stati --- */
  --c-bordo: rgba(241, 239, 234, .14);
  --c-ok: #4ADE80;
  --c-errore: #FF6B6B;
  --c-avviso: #F5B841;

  /* --- Tema gesso (una sezione per pagina) --- */
  --c-gesso: #F1EFEA;
  --c-gesso-testo: #111111;      /* 16.43:1 */
  --c-gesso-testo-2: #5E5A55;    /* 5.95:1 */
  --c-gesso-rosso: #D3202A;      /* 4.56:1 — timbri e link */

  /* --- Duotono fotografico [P13] --- */
  --duo-ombra: #111111;
  --duo-luce: #A3171B;

  /* --- Font [F28] --- */
  --f-titoli: "Krona One", "Arial Black", system-ui, sans-serif;
  --f-testo: "Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Scala tipografica fluida --- */
  --t-display: clamp(2.25rem, 1.1rem + 5vw, 5.4rem);
  --t-h1: clamp(1.9rem, 1.2rem + 3vw, 3.6rem);
  --t-h2: clamp(1.5rem, 1.05rem + 2vw, 2.6rem);
  --t-h3: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  --t-h4: 1.125rem;
  --t-grande: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --t-testo: 1.0625rem;
  --t-piccolo: .875rem;
  --t-etichetta: .75rem;
  --t-misura: .875rem;
  --t-numero-gigante: clamp(4rem, 12vw, 10rem);

  --lh-display: 1.02;
  --lh-h1: 1.05;
  --lh-h2: 1.1;
  --lh-h3: 1.2;
  --lh-testo: 1.6;
  --ls-titoli: -.02em;
  --ls-etichetta: .14em;
  --ls-misura: .04em;

  --riga-testo: 62ch;
  --riga-grande: 44ch;
  --riga-titolo: 18ch;

  /* --- Spaziature (base 4) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;

  /* --- Layout --- */
  --contenitore: 1240px;
  --margine: 16px;               /* 24px ≥768, 40px ≥1280 (sotto) */
  --gap: 16px;
  --sezione: 72px;               /* ritmo verticale: 96 tablet, 128 desktop */
  --header-h: 72px;
  --pillola-h: 56px;

  /* --- Forme --- */
  --r-1: 3px;
  --r-pill: 999px;
  --r-tondo: 50%;
  --bordo: 1px solid var(--c-bordo);
  --bordo-attivo: 2px solid var(--c-azione);
  --ombra-pillola: 0 10px 40px -10px rgba(211, 32, 42, .55);
  --ombra-menu: 0 30px 80px -20px rgba(0, 0, 0, .7);
  --focus: 2px solid var(--c-testo);
  --focus-offset: 3px;

  /* --- Livelli --- */
  --z-base: 0;
  --z-assetto: 1;
  --z-bagliore: 2;
  --z-header: 40;
  --z-pillola: 50;
  --z-menu: 60;
  --z-transizione: 80;
  --z-avviso: 90;

  /* --- Movimento [M06] --- */
  --d-scatto: 160ms;
  --d-base: 450ms;
  --d-scena: 800ms;
  --e-editoriale: cubic-bezier(.77, 0, .18, 1);
  --e-uscita: cubic-bezier(.16, 1, .3, 1);
  --e-assetto: cubic-bezier(.65, 0, .35, 1);
  --sfasamento: 70ms;

  /* --- Convergenza [NUOVO] --- */
  --assetto-max: 3;              /* gradi massimi desktop */
  --assetto-mobile: .6;          /* fattore su mobile */

  /* --- Bagliore-fanale [NUOVO] --- */
  --glow: .55;
}

@media (min-width: 768px) {
  :root { --margine: 24px; --gap: 24px; --sezione: 96px; }
}
@media (min-width: 960px) {
  :root { --gap: 32px; }
}
@media (min-width: 1280px) {
  :root { --margine: 40px; --sezione: 128px; }
}

/* --- Tema gesso --- */
.tema-gesso {
  --c-fondo: var(--c-gesso);
  --c-testo: var(--c-gesso-testo);
  --c-testo-2: var(--c-gesso-testo-2);
  --c-rosso-testo: var(--c-gesso-rosso);
  --c-bordo: rgba(17, 17, 17, .16);
  --focus: 2px solid var(--c-gesso-testo);
  background: var(--c-fondo);
  color: var(--c-testo);
}