/* tokens.css — design genome tricology_centre. Centro tricologico che APPLICA all'utente finale un
   dispositivo medico CE per la perdita dei capelli. Registro «editoriale del benessere»: display serif
   a corpo grande su primi piani scuri, molto respiro, un solo accento.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   Riferimenti di categoria (Bellezza/benessere), a RUOLI SEPARATI — non mediati, che è come si perde il
   carattere: BeMassage2 governa testate ed hero (Prata chiaro su primo piano scuro, bottoni piatti);
   BeCosmetics3 governa le sezioni di prodotto (l'oggetto protagonista su fondo pieno profondo).

   La palette NON viene da un catalogo: è MISURATA sui pixel del marchio del cliente — grigio #AAB6BC
   (27,8% dei pixel) e rosso #ED4B54 (il segno dello swoosh). Il grafite è il neutro scuro della famiglia.

   Contratto palette (a11y, MISURATO — non stimato):
   ink su paper 16,56 · ink su surface 15,14 · ink-muted su paper 7,47 · ink-muted su surface 6,83 ·
   accent-ink su paper 5,16 · accent-ink su surface 4,72 · accent-ink su sage-tint 4,54 · accent su paper 3,66 ·
   accent su brand 4,52 ·
   on-dark su brand 16,56 · on-dark su brand-dark 18,80 · on-dark-muted su brand 9,25 ·
   accent-lt su brand 7,69 · accent-lt su brand-dark 8,73 · ink su accent 4,52 · on-dark su accent 3,66 ·
   on-dark su accent-dark 5,94 · sage su brand 7,98 · sage-light su brand 10,79 · ink su sage-tint 14,57 ·
   ink-muted su sage-tint 6,58.
   ⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - --accent è il rosso PIENO del marchio e su CARTA fa 3,66: è filetto, superficie e testo GRANDE, mai
     testo normale su chiaro. Su grafite invece porta testo (4,52), ed è lì che vive l'occhiello.
   - l'accento che porta testo normale su chiaro è --accent-ink, ed è tarato sul fondo chiaro più SCURO
     che il verticale usa (--sage-tint): così vale su tutti, non solo sulla carta. ⚠ La prima taratura
     stava sul solo --paper (4,58) e axe ha trovato due violazioni reali sulle bande tinte (4,02 e 4,18):
     un token di testo si tara sul fondo peggiore, non sul migliore. Su fondo scuro si usa --accent-lt.
   - il BOTTONE primario sta su --accent-dark, non sul rosso pieno: bianco su accent fa 3,66, su
     accent-dark 5,94. Un bottone è testo normale, e il rosso di marca non ci arriva.
   - --ink-muted vale SOLO su fondo chiaro; su fondo scuro si usa --on-dark-muted.
   - ⚠ il FOCUS non può essere un colore solo: --accent-ink fa 4,58 su bianco ma 2,59 sul grafite. Il
     token vale per le superfici chiare (la maggioranza) e viene RIBALTATO in components.css su ogni
     superficie grafite. Un anello di focus invisibile è un difetto di accessibilità, non un dettaglio.
   - un testo sopra una FOTO non è coperto da questi rapporti: va misurato dal pixel renderizzato. Per
     questo il velo dell'hero è dichiarato qui e la testata porta il titolo dentro la fascia velata. */
:root {
  /* --- Colore (grafite di marca + rosso dello swoosh + i grigi del marchio) --- */
  --paper:      #FFFFFF;  /* fondo dominante */
  --surface:    #F3F5F6;  /* grigio carta: sezioni alternate */
  --surface-2:  #E6EAEC;  /* superfici di riposo e placeholder */
  --ink:        #1C1F22;  /* GRAFITE: testo (16,56:1 su paper) */
  --ink-muted:  #4E565C;  /* testo secondario SOLO su fondo chiaro (7,47:1) */
  --line:       #DCE1E4;  /* filetto: bordi e righe (non-testo) */
  --accent-ink: #C23E45;  /* rosso portato a TESTO su OGNI fondo chiaro: paper 5,16 · surface 4,72 · sage-tint 4,54 · accent-tint 4,58 */
  --accent:     #ED4B54;  /* ROSSO DI MARCA: filetti, superfici, testo grande, e testo su grafite (4,52) */
  --accent-dark:#B4363D;  /* rosso profondo: BOTTONE primario (bianco 5,94) e hover */
  --accent-lt:  #F2989D;  /* rosso chiaro: testo su fondo scuro (7,69 sul grafite) */
  --accent-tint:#FCEEEF;  /* rosso tint: fondo di riquadri d'evidenza su chiaro */
  --brand:      #1C1F22;  /* GRAFITE di marca: bande piene, testata delle pagine interne, piè */
  --brand-dark: #0F1214;  /* grafite profondo: piè, hover del bottone scuro */
  --brand-mid:  #3A4147;  /* grafite chiaro: superfici secondarie, filetti su scuro */
  --sage:       #AAB6BC;  /* il GRIGIO del marchio (27,8% dei suoi pixel): testo su scuro, filetti */
  --sage-light: #C9D2D7;  /* grigio chiaro: testo tenue su scuro (10,79) */
  --sage-tint:  #EDF1F3;  /* grigio tint: bande alternate tinte */
  --night:      #0A0C0D;  /* nero-grafite: velo della fotografia */
  --on-dark:    #FFFFFF;  /* testo su fondi pieni scuri (16,56 sul grafite · 18,80 sul profondo) */
  --on-dark-muted: #BAC3C9; /* testo secondario su fondo scuro (9,25 sul grafite) */
  /* Velo della fotografia. ⚠ La coppia serve a far leggere il display sopra il primo piano: nel registro
     BeMassage2 il titolo sta SULLA foto, non accanto — quindi il contrasto dipende dal fotogramma e va
     misurato dal pixel, non dedotto da questi rapporti. */
  --scrim:      rgba(10,12,13,.38);
  --scrim-deep: rgba(10,12,13,.68);

  --bg: var(--paper);
  --fg: var(--ink);
  --focus: var(--accent-ink);

  /* --- Tipografia: PRATA (display serif, il carattere di BeMassage2) + DM SANS (testo), entrambi OFL
     self-hosted. Nessun altro verticale usa questa coppia: Prata sta con Jost su restaurant_gourmet e
     DM Sans con delicatessen_shop — la differenziazione dai fratelli è per costruzione.
     ⚠ Prata esiste a un solo peso (400) ed è giusto così: a queste scale il peso alto impasta le grazie.
     Il testo sta a 400/500, il 700 solo per le etichette. --- */
  --font-display: "Prata", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Scala editoriale: i riferimenti della categoria stanno fra 60 e 142px sul display della testata.
     ⚠ Una size «giusta» sul testo del demo è sbagliata sul testo reale o in un contenitore più stretto:
     i gradi restano dentro una scala (rapporto ~1,4) e i titoli si misurano nel contenitore VERO. */
  --text-sm:   0.8125rem; /* occhielli e meta, maiuscoletto tracciato */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.08rem, 1rem + 0.44vw, 1.26rem);   /* lead */
  --text-lg:   clamp(1.24rem, 1.06rem + 0.74vw, 1.62rem);/* H3 */
  --text-xl:   clamp(1.68rem, 1.3rem + 1.6vw, 2.38rem);  /* H2 — titoli di sezione */
  --text-2xl:  clamp(2rem, 1.5rem + 2.1vw, 3.05rem);     /* display di sezione */
  --text-3xl:  clamp(2.5rem, 1.75rem + 3.3vw, 4.4rem);   /* display della testata */

  --lh-tight: 1.06;
  --lh-snug: 1.12;
  --lh-body: 1.68;
  --tracking-label: 0.2em;      /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: -0.012em; /* il serif a corpo grande si stringe appena */

  /* --- Spaziatura: densità ARIOSA (la categoria respira) --- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4.5rem; --space-9:7rem; --space-10:10rem;
  --section-y: clamp(3.75rem, 2.4rem + 4.4vw, 7rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 64ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem);

  /* --- Forma: bottoni PIATTI (BeMassage2 e BeCosmetics3 hanno entrambi raggio 0-3px), superfici appena
     addolcite. È il segno che separa questo verticale dal registro a pillola dei sanitari. --- */
  --radius: 2px;
  --radius-lg: 4px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* Distanza fra il bordo della pagina e il contenitore: è ciò che un blocco deve recuperare per arrivare
     a filo pagina. ⚠ CRESCE SENZA LIMITE con la finestra: chi la usa come padding di compenso DEVE
     aggiungerla anche alla propria larghezza massima, altrimenti su un monitor largo il padding si mangia
     il blocco e il testo si riduce a una colonna di una lettera. */
  --bleed: max(var(--gutter), (100vw - var(--container)) / 2);

  /* --- Ombra (sobria) --- */
  --shadow-sm: 0 6px 20px rgba(28,31,34,.07);
  --shadow-md: 0 28px 58px -34px rgba(28,31,34,.40);

  --tile-gap: clamp(0.7rem, 0.4rem + 1vw, 1.15rem);

  /* Altezza del «cromo» in testa alla pagina. ⚠ La testata di questo verticale è TRASPARENTE sopra
     l'hero: il valore serve alle PAGINE INTERNE, dove la testata è piena e occupa spazio davvero. */
  /* ⚠ E' l'altezza REALE della testata fissa, MISURATA sul DOM (98px desktop · 100px mobile): le pagine interne la recuperano come padding, e un valore a occhio le farebbe finire sotto. */
  --chrome: 98px;
  --topbar-h: 0px;

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 260ms;
}
@media (max-width: 899.98px) { :root { --chrome: 100px; } }
@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }