/* ── Design tokens — campionati dal manifesto ufficiale 70×100 stampato ───── */
:root{
  /* fondi e scuri */
  --nero-verde:#22302F;
  --verde-nero:#334B47;
  --teal-scuro:#29464B;
  /* verdi acqua */
  --verde-acqua:#A1C8C3;
  --teal-medio:#82B2AC;
  --ghiaccio:#D5E7EA;
  /* caldi chiari */
  --crema:#F8F2CA;
  --sabbia:#EDE5B9;
  --ocra:#ECCA99;
  /* caldi saturi */
  --terracotta:#C06C54;
  --mattone:#915B52;
  --bordeaux:#633A3D;
  --blu-notte:#182454;
  /* unico colore aggiunto: terracotta scurita per reggere AA sulle CTA */
  --corallo-ui:#C24E33;
  --panna:#FDFBF0;

  /* ombre — hard offset, blur 0: la firma dello stile */
  --shadow-hard:8px 8px 0 0 rgba(34,48,47,.22);
  --shadow-sticker:6px 6px 0 0 rgba(34,48,47,.28);
  --shadow-soft:4px 4px 0 0 var(--verde-acqua);

  /* tipografia */
  --display:"nitti-mostro-comic-solid",system-ui,sans-serif;
  --display-3d:"nitti-mostro-comic-shadow",system-ui,sans-serif;
  --ui:"Aspekta",system-ui,-apple-system,sans-serif;

  /* scala misurata sul reference: corpo 18–21px, titoli 32/46/48/64/70/110 */
  --text-hero:clamp(3rem,1rem + 8vw,7rem);
  --text-h2:clamp(2.2rem,1.2rem + 3.2vw,4rem);
  --text-h3:clamp(1.6rem,1.1rem + 1.7vw,2.6rem);
  --text-lead:clamp(1.15rem,1rem + .6vw,1.35rem);
  --text-base:clamp(1.05rem,1rem + .3vw,1.15rem);
  --text-sm:clamp(.95rem,.9rem + .2vw,1rem);
  --text-lbl:.82rem;

  /* raggi */
  --r-sm:10px; --r-lg:16px; --r-xl:24px; --r-pill:200px; --r-giant:160px;

  /* ritmo variabile, non uniforme: il reference alterna 32 40 64 96 104 160 */
  --space-xs:clamp(1.5rem,1rem + 1.5vw,2rem);    /* 24–32 */
  --space-sm:clamp(2rem,1.4rem + 2.4vw,3.25rem); /* 32–52 */
  --space-md:clamp(3rem,2rem + 3.4vw,5rem);      /* 48–80 */
  --space-lg:clamp(3.75rem,2.4rem + 4.6vw,6.5rem);  /* 60–104 */
  --space-xl:clamp(4.5rem,2.5rem + 7vw,10rem);   /* 72–160 */
  --space-section:var(--space-lg);
  --gutter:clamp(1.25rem,.5rem + 3.4vw,4rem);    /* 20–64, come il reference */
  --container:1440px;
  --measure:1312px; /* larghezza di contenuto del reference */

  /* motion */
  --dur-fast:150ms; --dur:300ms; --dur-slow:500ms;
  --dur-reveal:560ms;              /* entrata: 300ms su 28px non si legge */
  --ease:cubic-bezier(.25,.1,.25,1);
  /* Molla d'ingresso, campionata su feastie.ca: il blocco parte 80px più in
     basso, corre per 1288ms e oltrepassa lo zero del 19% prima di assestarsi.
     Non è una bezier — è una molla, e linear() la riproduce per punti. */
  --molla-salita:80px;
  --molla-dur:1288ms;
  /* primo e ultimo punto forzati a 0 e 1: campionati valevano 0.0023 e 1.0063,
     e un'easing che non chiude a 1 lascia l'elemento fermo a −0.5px dal posto */
  --molla:linear(0, 0.0736, 0.2967, 0.4142, 0.8010, 0.9803, 1.1034, 1.1706,
    1.1902, 1.1751, 1.1320, 1.0866, 1.0433, 1.0078, 0.9799, 0.9724, 0.9724,
    0.9668, 0.9738, 0.9834, 0.9909, 0.9978, 1.0033, 1.0060, 1.0069, 1);

  --ease-out-expo:cubic-bezier(.16,1,.3,1);   /* arriva deciso e frena */

  /* Colori delle attività, campionati dai quadratini della legenda del
     volantino stampato: il sito deve dire le stesse cose con gli stessi
     colori. Il testo di ogni chip è scelto per stare sopra 4.5:1. */
  --cat-maestri:#47777B;   --cat-maestri-t:#FDFBF0;
  --cat-film:#84C547;      --cat-film-t:#182454;
  --cat-corti:#FFCB05;     --cat-corti-t:#182454;
  --cat-ore72:#01515C;     --cat-ore72-t:#FDFBF0;
  /* Talk resta il rosso esatto del volantino: nessun colore della palette ci
     arriva sopra 4.5, quindi il testo è quasi nero (4.81) invece di scurire
     il fondo e tradire la stampa. */
  --cat-talk:#DB6050;      --cat-talk-t:#1A1A1A;
  --cat-workshop:#B7E6E0;  --cat-workshop-t:#182454;
  --cat-musica:#C8D1DA;    --cat-musica-t:#182454;
}