/* ==========================================================================
   Cabaret amoremio! — tokens.css
   Livello 1: scala grezza (colori, tipografia, spazio, forma, motion, z).
   Livello 2: variabili semantiche per i tre temi di sezione (scuro, slate, chiaro).
   I componenti usano SOLO il livello 2, salvo le eccezioni di marca documentate
   (rosso CTA, testo navy sui fill arancio, piastra bianca dei loghi).
   ========================================================================== */

/* Font self-hosted (01 §1): nessuna richiesta a Google dal browser del visitatore (GDPR).
   Solo il sottoinsieme «latin», che copre l'italiano; fuori da qui valgono i font di ripiego dello stack.
   Anton ha un solo peso (400); Work Sans è un unico file variabile 400–700. Licenza: OFL, vedi assets/fonts/. */
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/anton-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Work Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/work-sans-latin-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ---------- Colore: scala grezza ---------- */
  --navy-900:#08101F;  /* fondo scuro primario (campionato dai PDF) */
  --navy-800:#121A2B;  /* hover su scuro, dropdown, banner cookie */
  --navy-700:#212836;  /* superficie elevata / sezione slate (campionato) */
  --navy-650:#2B3344;  /* superficie elevata DENTRO la sezione slate */
  --navy-600:#2E3646;  /* bordi su scuro */
  --navy-500:#3D465A;  /* bordi enfatizzati su scuro (decorativi: 2.01:1 su navy-900) */
  --slate-500:#7A8496; /* grafica non testuale su scuro (3.92:1 su navy-700, 5.04:1 su navy-900) */
  --slate-300:#A8B0BE; /* testo secondario su scuro (8.71:1 su navy-900) */

  --orange-500:#F39200; /* accento brand — uso testuale SOLO su fondo scuro (8.08:1) */
  --orange-600:#D57F00; /* titoli display su fondo chiaro (3.06:1 → solo testo grande) */
  --orange-700:#9C5800; /* testo piccolo, occhielli e link su fondo chiaro (5.51:1) */
  --orange-300:#FFB35C; /* arancio schiarito su scuro (hover dei link) */
  --orange-500-rgb:243,146,0; /* componenti RGB per le tinte trasparenti */

  --red-500:#E53030;   /* rosso brand — solo grafica, non testo */
  --red-600:#D42A2A;   /* fill delle CTA (bianco sopra = 5.04:1) */
  --red-700:#C42121;   /* hover CTA / rosso testuale su fondo chiaro (5.86:1) */
  --coral-300:#FF7A6B; /* rosso testuale su fondo scuro (7.47:1 su navy-900) */

  --white:#FFFFFF;
  --grey-050:#F5F5F6;  /* fondo chiaro alternativo */
  --grey-100:#ECEDEF;
  --grey-200:#E3E4E7;  /* bordi su chiaro */
  --grey-600:#5F6675;  /* testo secondario su chiaro (5.76:1 su bianco, 5.29:1 su grey-050) */

  --green-500:#1E9E4A; /* presente solo nel logo. NON usare in UI. */

  /* ---------- Tipografia ---------- */
  --font-display:'Anton','Oswald','Arial Narrow',Impact,sans-serif;
  --font-body:'Work Sans','Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --fs-display:clamp(2.75rem,10vw,6rem);      /* 44 → 96 — H1 hero home */
  --fs-h1:clamp(2.25rem,7.5vw,4.25rem);       /* 36 → 68 — H1 pagine interne */
  --fs-h2:clamp(1.875rem,5.5vw,3rem);         /* 30 → 48 — titoli di sezione */
  --fs-h3:clamp(1.25rem,3vw,1.75rem);         /* 20 → 28 — titoli card */
  --fs-h4:clamp(1.0625rem,2vw,1.25rem);       /* 17 → 20 */
  --fs-lead:clamp(1.0625rem,2.2vw,1.25rem);
  --fs-body:1rem; --fs-body-lg:1.0625rem;
  --fs-small:0.875rem; --fs-xs:0.8125rem; --fs-eyebrow:0.75rem;

  --lh-display:0.92;  /* H1 hero */
  --lh-title:0.98;    /* H1/H2 */
  --lh-heading:1.12;  /* H3/H4 */
  --lh-body:1.6; --lh-lead:1.45;
  --ls-display:0.005em; --ls-eyebrow:0.12em; --ls-btn:0.03em;

  /* ---------- Spazio (base 4px) ---------- */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;   --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-7:2rem;   --sp-8:2.5rem; --sp-9:3rem;   --sp-10:4rem;
  --sp-11:5rem;  --sp-12:6rem;  --sp-13:7.5rem;

  --section-y:clamp(3.5rem,8vw,7.5rem);  /* padding verticale di ogni .section */
  --gutter:clamp(1.25rem,4vw,3rem);      /* padding laterale del container */
  --container:75rem;                     /* 1200px */
  --container-narrow:44rem;              /* 704px — pagine di solo testo */
  --measure:58ch;                        /* larghezza max dei paragrafi. La specifica dice 68ch, ma in Work Sans
                                            il "ch" (la cifra 0) è più largo della lettera media: 68ch ≈ 81
                                            caratteri per riga, oltre il limite di 75 del §9. Misurato in Fase 6:
                                            60ch ≈ 77 caratteri, 58ch ≈ 74. */

  /* ---------- Forma ---------- */
  --r-0:0;        /* media, card grandi, bottoni */
  --r-sm:2px;     /* badge, chip, input */
  --r-md:4px;     /* banner informativi */
  --r-full:999px; /* solo pallini indicatori */
  --bw:1px; --bw-thick:2px;

  /* ---------- Elevazione ---------- */
  --shadow-float:0 1.25rem 2.5rem rgba(0,0,0,.38);  /* card vincitore, lightbox */
  --shadow-sticky:0 .5rem 1.5rem rgba(0,0,0,.28);   /* header compatto, sticky CTA */

  /* ---------- Motion ---------- */
  --dur-fast:150ms; --dur:250ms; --dur-slow:420ms;
  --ease:cubic-bezier(.2,.7,.3,1);

  /* ---------- Z ---------- */
  --z-drawer:80; --z-header:70; --z-stickycta:60; --z-cookiebar:90; --z-lightbox:100;

  /* ---------- Chrome del sito (altezze) ---------- */
  --header-h:88px;          /* header mobile, come nel concept */
  --header-h-md:120px;      /* header desktop (barra principale): contiene il logo da 100px */
  --header-h-compact:64px;  /* header compatto, da 120px di scroll */
  --stickycta-h:4.5rem;     /* barra CTA mobile, esclusa la safe area */
  --logo-h:clamp(64px, calc(26.67vw - 32px), 72px); /* logo nell'header mobile (e nel drawer): 72px da 390px,
                                                       64px a 360px, dove logo, CTA, ricerca e menu stanno appena */
  --logo-h-md:100px;        /* altezza del logo nell'header desktop */
  --logo-h-compact:44px;    /* altezza del logo nell'header compatto (mobile e desktop) */
  --logo-h-footer:88px;     /* altezza del logo nel footer (96px da md) */
  --header-offset:var(--header-h); /* spazio occupato dall'header fisso: aggiornato sotto */

  /* ---------- Icone ---------- */
  --icon-sm:1rem; --icon:1.25rem; --icon-lg:1.5rem;
}

@media (min-width:900px){
  :root{ --header-offset:var(--header-h-md); }
}
:root.has-compact-header{ --header-offset:var(--header-h-compact); }


/* ==========================================================================
   Temi di sezione — override di variabili semantiche
   Default = scuro. .theme-* sono alias per forzare un tema su un elemento
   che non è una .section (contenuti su foto, pannelli della styleguide).
   ========================================================================== */

:root, .section, .theme-dark, .theme-slate{
  --bg:var(--navy-900);
  --bg-elev:var(--navy-700);
  --fg:var(--white);
  --fg-muted:var(--slate-300);
  --accent:var(--orange-500);         /* testo e titoli */
  --accent-display:var(--orange-500); /* titoli display ≥30px */
  --accent-graphic:var(--orange-500); /* fill, bordi, elementi decorativi */
  --accent-tint:rgba(var(--orange-500-rgb),.08); /* fondo di .info-banner--info */
  --on-accent:var(--navy-900);        /* testo su un fill var(--accent) */
  --danger:var(--coral-300);          /* testo rosso */
  --border:var(--navy-600);           /* decorativo */
  --border-strong:var(--navy-500);    /* decorativo, enfatizzato */
  --border-control:var(--slate-500);  /* bordi dei controlli: ≥3:1 (5.04:1) */
  --focus:var(--orange-500);
  --scrim:8,16,31;                    /* componenti RGB per i gradienti sulle foto */
}
.section--slate, .theme-slate{
  --bg:var(--navy-700); --bg-elev:var(--navy-650);
  --border:var(--navy-500); --border-strong:var(--slate-500);
  --border-control:var(--slate-500);  /* 3.92:1 su navy-700 */
}
.section--light, .theme-light{
  --bg:var(--white); --bg-elev:var(--grey-050);
  --fg:var(--navy-900); --fg-muted:var(--grey-600);
  --accent:var(--orange-700);          /* testo piccolo: 5.51:1 */
  --accent-display:var(--orange-600);  /* solo titoli ≥30px: 3.06:1 — MAI su --bg-elev (2.81:1) */
  --accent-graphic:var(--orange-500);
  --accent-tint:rgba(var(--orange-500-rgb),.08);
  --on-accent:var(--white);            /* bianco su orange-700: 5.51:1 */
  --danger:var(--red-700);
  --border:var(--grey-200); --border-strong:var(--grey-600);
  --border-control:var(--grey-600);    /* 5.76:1 */
  --focus:var(--navy-900);
}