/* =====================================================================
   00 — TOKEN
   L'unico file del tema in cui un colore, una dimensione o una spaziatura
   sono scritti per esteso. Altrove: solo var(--token).
   Se serve un valore che qui non c'e', si aggiunge qui, non nel punto
   in cui serve.
   ===================================================================== */

:root{
  /* --- Brand PrinTrace ---------------------------------------------
     Il ciano del logo con testo bianco sopra da' 2,88:1 e non passa
     l'accessibilita'. Da qui la separazione fra --brand e --cta:
     --brand e' grafica, --cta e' tutto cio' che si legge.            */
  --brand:#00A4D8;   /* colore del logo: grafica, fasce piene. NON per il testo */
  --cta:#0077A0;     /* bottoni, link, testo colorato — 4,85:1 sulla carta */
  --deep:#004F6C;    /* hover dei bottoni, accento sulle fasce chiare */
  --on:#14161A;      /* testo sopra --brand: SCURO, non bianco */
  --tint:#EAF6FB;    /* superficie tenue */

  /* --- Neutri --- */
  --paper:#FBFAF7; --paper-2:#F5F4EF;
  --ink:#14161A; --ink-2:#3D4046; --ink-3:#5F6058;
  --rule:#DCD9D0; --rule-2:#C4C0B4;

  /* --- Tipografia ---
     Nessun peso sotto 300 o sopra 800: sotto sparisce, sopra urla.   */
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-h1:clamp(2rem,1.4rem + 2.4vw,3rem);
  --fs-h2:clamp(1.625rem,1.3rem + 1.3vw,2.25rem);
  --fs-h3:clamp(1.25rem,1.15rem + .4vw,1.5rem);
  --fs-lead:clamp(1.125rem,1.05rem + .3vw,1.25rem);
  --fs-body:clamp(1rem,.97rem + .15vw,1.0625rem);
  --fs-sm:.875rem;             /* 14px: il minimo assoluto, note comprese */
  --lh-body:1.62; --lh-head:1.12;
  --measure:68ch;              /* 60-75 caratteri: oltre, l'occhio perde la riga */

  /* --- Spazi: scala 4px. Se serve 23, si usa 24. --- */
  --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;
  --section-y:clamp(64px,7vw,112px);

  /* --- Layout --- */
  --container:1280px; --container-text:700px;
  --gutter:clamp(20px,4vw,40px);

  /* --- Aree toccabili: 44px e' il minimo, 8px la distanza minima fra due --- */
  --touch:44px;

  /* --- Testata ad altezza fissa: nessuno spostamento del contenuto
         al caricamento (CLS). --- */
  --header-h:70px;
  --header-h-desk:90px;

  /* --- Movimento. Tutte le transizioni del tema leggono questi due:
         un solo punto per rallentare o spegnere tutto. --- */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:200ms;

  /* --- Rilievo. Serve solo dove un pannello si stacca dalla pagina: la
         tendina del menu. I filetti (`inset`) non stanno qui: sono bordi
         disegnati con box-shadow e leggono i colori dei token. --- */
  --shadow-pop:0 12px 32px rgb(20 22 26 / .10);

  /* --- Impilamento. Dichiarato qui per non inventare z-index a caso. --- */
  --z-header:60;
  --z-sub:70;
  --z-panel:80;
}

/* Chi ha chiesto di ridurre il movimento non deve vedere animazioni.
   Azzerare la durata alla radice spegne ogni transizione del tema in un
   colpo solo, comprese quelle che verranno aggiunte in futuro. */
@media (prefers-reduced-motion: reduce){
  :root{ --dur:0ms; }
}

/* Breakpoint dichiarati: 620 · 1000 · 1280, sempre in min-width.
   Le custom property non si possono usare nelle media query, quindi qui
   restano come promemoria dell'unica scala ammessa.
   620px  -> due colonne dove serve
   1000px -> tendine desktop, il menu mobile scompare
   1280px -> larghezza massima raggiunta */