/* =============================================================================
   SPINA · TOKENS STATICI — le scale numeriche della fabbrica (v2, 24/08/2026)

   Qui stanno i NUMERI, non i colori. La differenza e' il punto di tutto il disegno v2:
   le scale sono le stesse per ogni demo (e quindi nessuno deve ricordarsele), mentre
   palette, coppia di font e raggio scelto arrivano dal token file della singola demo
   (dna-lite) che la regia scrive e sovrascrive DOPO questo file.

   Regola d'oro: se una regola del contratto si puo' scrivere come numero, sta qui.
   Se sta qui, `lint_tokens` la verifica e nessun prompt deve piu' menzionarla.

   Copre — vedi contract/MATRICE-v2.md sezione B1:
     DUR-13  i controlli non traslano in hover        --t-hover / --ease
     DUR-17  ariosita' di fascia e sezione            --sp-*
     DUR-36  accenti nelle maiuscole                  --lh-display (>= 1.1)
     DUR-54  effetto impercettibile = bug             --mov-corsa-min
     DUR-64  micro-animazioni tipografiche            --t-micro
     DUR-114 respiro nelle pill/chip                  --pad-control-*
     DUR-120 scala interna coerente                   --fs-* (una sola scala)
     DUR-135 il velo non soffoca il media             --scrim-max
     DUR-148 hover fluidi sempre                      --t-hover 150-300ms
     DUR-193 ampiezza del movimento                   --mov-corsa-* / --mov-rot-max
     DUR-197 il corpo si legge in mano                --fs-body >= 16px
     DUR-201 i campi a 16px                           --fs-field
   ============================================================================= */

:root {
  /* ---- TIPOGRAFIA: una sola scala, di cui il corpo e' il pavimento -----------
     --fs-body ha un minimo DURO di 1rem = 16px: sotto quella soglia TESTO-1
     boccia la build e su iOS i campi fanno saltare la pagina. Non e' una
     preferenza tipografica, e' il motore del browser. */
  --fs-body:      clamp(1rem, 0.96rem + 0.22vw, 1.16rem);
  --fs-small:     clamp(0.94rem, 0.92rem + 0.10vw, 1rem);
  --fs-field:     1rem;              /* MAI sotto: DUR-201 / MOBILE-5 */
  --fs-h3:        clamp(1.35rem, 1.15rem + 0.85vw, 1.8rem);
  --fs-h2-s:      clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --fs-h2:        clamp(2.3rem, 1.5rem + 2.8vw, 3.7rem);
  --fs-h1:        clamp(2.9rem, 1.8rem + 4.2vw, 5.1rem);

  /* interlinee: il minimo sui display esiste perche' l'accento di una maiuscola
     accentata (TORTOLI') buca la riga sopra e deforma i glifi. */
  --lh-display:   1.1;               /* MAI sotto: DUR-36 */
  --lh-body:      1.6;
  --measure:      65ch;              /* <= 65 caratteri per riga (test-dna v2) */

  /* rapporto display/corpo: il test-dna vuole > 6:1 fra il piu' grande e il corpo.
     Non e' un token che si applica: e' il numero contro cui si misura. */
  --dna-display-body-ratio-min: 6;

  /* ---- SPAZIO: una scala, niente numeri a mano ------------------------------ */
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;    --sp-7: 4.5rem;
  --sp-section:    clamp(4.5rem, 7vw, 8.5rem);
  --sp-band-x:     clamp(1.25rem, 4vw, 3.5rem);   /* mai testo attaccato al bordo */
  --pad-control-y: 0.72em;
  --pad-control-x: 1.15em;           /* icona e testo non toccano mai il bordo */

  /* ---- FORME: al massimo DUE raggi in tutta la pagina (DUR-104/132) ---------
     La demo sceglie i valori nel suo token file; qui vive la REGOLA che i valori
     ammessi sono due, piu' il cerchio. lint_tokens conta i border-radius distinti. */
  --r-1: 14px;
  --r-2: 4px;
  --r-round: 999px;

  /* ---- MOVIMENTO: i numeri che mancavano ------------------------------------
     Sotto --mov-corsa-min il movimento non si legge e viene letto come un bug;
     sopra --mov-corsa-max il disegno si disintegra. Misurati, non scelti. */
  --mov-corsa-min: 22px;
  --mov-corsa:     34px;
  --mov-corsa-max: 68px;
  --mov-rot-max:   4.6deg;
  --mov-trigger:   30%;              /* l'animazione parte DENTRO la viewport */
  --ease:          cubic-bezier(.2, .8, .2, 1);
  --t-hover:       180ms;            /* 150-300ms, mai scatti secchi */
  --t-micro:       420ms;
  --t-reveal:      620ms;

  /* ---- MEDIA -------------------------------------------------------------- */
  --scrim-max:     0.55;             /* il velo aiuta a leggere, non nasconde */

  /* ---- PIANI: chi sta sopra a chi, deciso una volta ------------------------ */
  --z-page: 1; --z-float: 200; --z-chrome: 300; --z-cookie: 400;

  /* ---- IL TELEFONO --------------------------------------------------------- */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* L'altezza-schermo che mente: 100vh e' il viewport GRANDE, cioe' il telefono con
   la barra del browser gia' ritratta. La coppia progressiva la corregge dove il
   browser la supporta e non rompe dove non la supporta (DUR-199 / MOBILE-3). */
:root { --vh-full: 100vh; }
@supports (height: 100svh) { :root { --vh-full: 100svh; } }
@supports (height: 100dvh) { :root { --vh-hero: 100dvh; } }

/* Chi ha chiesto meno movimento non lo subisce. La corsa va a zero, non l'effetto. */
@media (prefers-reduced-motion: reduce) {
  :root { --mov-corsa: 0px; --mov-rot-max: 0deg; --t-reveal: 1ms; --t-micro: 1ms; }
}