/* tokens.css — design genome movement_studio. Studio di PRATICA del movimento (GYROTONIC®,
   GYROKINESIS®, pilates, yoga, danza, posturale): il cliente non riceve un trattamento, lo ESEGUE.
   La categoria di riferimento e' «Bellezza/benessere», ma i suoi template sono attivita' di trattamento
   e il loro tono e' relax/abbandono: qui il registro si sposta su energia, respiro e controllo.
   Riferimento primario BeAromatherapy (fondo scuro continuo, aloni di colore, display serif leggero,
   bottoni a pillola, mosaico sfalsato), con l'apporto di BeMassage2 (tessere piene, cerchi-icona).
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   Il colore NON viene da un catalogo: e' MISURATO sui pixel del marchio del primo cliente — il navy
   #222955 dell'onda e del fondo, l'indaco #25346d del cerchio del logo, la menta #93CCA0 della linea
   calligrafica. La curva e' il segno del marchio (una «E» a linea continua dentro un cerchio, e l'onda
   che separa le bande): per questo il raggio qui e' GENEROSO, non zero.

   Contratto palette (a11y, MISURATO — non stimato):
   on-dark su navy 13,85 · su navy-deep 16,56 · su indaco 11,73 ·
   on-dark-muted su navy 7,65 · su navy-deep 9,15 · su indaco 6,47 ·
   menta su navy 7,51 · su navy-deep 8,98 · su indaco 6,36 ·
   menta-soft su navy 9,45 · su navy-deep 11,30 ·
   ink su paper 17,14 · su crema 15,31 · su crema-2 13,75 ·
   ink-muted su paper 7,26 · su crema 6,48 · su crema-2 5,82 ·
   menta-ink su paper 6,01 · su crema 5,37 · su crema-2 4,82 ·
   navy su paper 13,85 · su crema 12,37 · su menta 7,51 · su menta-soft 9,45 ·
   ink su menta 9,29 · su menta-soft 11,69.

   ⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - la MENTA di marca NON porta testo su fondo chiaro: su bianco misura 1,84. Su chiaro l'accento che
     porta testo e' SEMPRE --menta-ink. La menta vive sul fondo scuro, dove fa 7,51;
   - sul navy pieno il corpo e' --on-dark (13,85); --on-dark-muted (7,65) regge anche il corpo, non solo
     le etichette — e' la differenza con i verticali a fondo scuro tenue;
   - --menta-ink e' tarato sul fondo chiaro PEGGIORE (--crema-2, 4,82), non sul bianco: la prima stesura
     stava a #52725A e su crema-2 cadeva a 4,31. Un accento verificato su un solo fondo non e' verificato;
   - su fondo MENTA pieno il testo e' --ink (9,29) o --navy (7,51), MAI bianco (1,84 al contrario);
   - --line e' un filetto DECORATIVO fra superfici chiare, non un bordo di componente: non porta un
     rapporto 3:1 e non deve essere l'unico segno che delimita un controllo;
   - un testo sopra una FOTOGRAFIA non e' coperto da questi rapporti. Le sorgenti fotografiche di questo
     mestiere sono murate in risoluzione (il primo cliente: 800px), quindi la testata porta il titolo su
     un PANNELLO pieno accanto al mosaico, non sopra lo scatto. */
:root {
  /* --- Colore: navy del marchio, menta della linea calligrafica, crema come banda chiara TINTA --- */
  --paper:      #FFFFFF;  /* fondo neutro: la pausa, non il fondo dominante */
  --surface:    #F4F2EC;  /* CREMA: banda chiara tinta (asse 2 della categoria: mai bianco piatto) */
  --surface-2:  #EAE6DC;  /* crema profonda: tessere di riposo, campi dei moduli */
  --tint:       #DFEEE4;  /* tint di marca chiarissimo: riquadri d'evidenza su fondo chiaro */
  --ink:        #141A33;  /* inchiostro: testo su chiaro (17,14 su paper) */
  --ink-muted:  #4F566F;  /* secondario SOLO su fondo chiaro (7,26 su paper) */
  --line:       #DDD8CC;  /* filetto decorativo fra superfici chiare (non un bordo di controllo) */
  --navy:       #222955;  /* NAVY di marca: fondo dominante, bande piene, testata */
  --navy-deep:  #171C3C;  /* navy profondo: pie' di pagina, tessere dentro le bande scure */
  --indaco:     #25346D;  /* indaco del cerchio del logo: seconda superficie scura, aloni */
  --menta:      #93CCA0;  /* MENTA di marca: accento SU SCURO — filetti, occhielli, numerali, tessere */
  --menta-soft: #B7DFC0;  /* menta chiara: testo d'accento su scuro dove serve piu' stacco (9,45) */
  --menta-ink:  #4C6A53;  /* menta portata a TESTO su chiaro (6,01 paper · 5,37 crema · 4,82 crema-2) */
  /* ⚠ --accent esiste in TUTTI i verticali: e' il token su cui le topologie condivise prendono il colore
     dal verticale, e il gate `topology` lavora sull'INTERSEZIONE dei token di tutti. Qui l'accento E' la
     menta del marchio: il cliente ha due colori e un terzo non si inventa. */
  --accent:     #93CCA0;
  --on-dark:    #FFFFFF;  /* testo su fondi pieni scuri */
  --on-dark-muted: #B9C0D8; /* secondario su scuro: 7,65 sul navy — regge anche il CORPO */
  /* velo della fotografia: lega scatto e campo di colore. Il contrasto dei titoli resta STRUTTURALE. */
  --scrim:      rgba(23,28,60,.34);
  --scrim-deep: rgba(23,28,60,.66);
  /* aloni di colore del fondo scuro (asse del riferimento BeAromatherapy): non sono superfici, sono
     sfumature radiali dietro il contenuto. Dichiarati qui perche' compaiono in piu' sezioni. */
  --glow-menta: rgba(147,204,160,.20);
  --glow-indaco: rgba(37,52,109,.55);

  --bg: var(--navy);
  --fg: var(--on-dark);
  --focus: var(--menta);

  /* --- Tipografia: Instrument Serif (display) + Instrument Sans (testo), OFL self-hosted.
     Il serif ha tratto sottile e alto contrasto: e' la stessa qualita' di linea della «E» calligrafica
     del marchio. ⚠ I titoli stanno al 400, MAI al 700: a questi gradi il serif impasta.
     tokens.css deve definire --font-display e --font-body (tokensOf lancia se un token manca). --- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica: rapporto ~1,30. Il display e' GRANDE davvero (asse 1 della categoria: 60-142px
     nei riferimenti), ma il massimo e' tarato sul titolo REALE del primo cliente, non su copy di prova. */
  --text-sm:   0.8125rem;                                   /* occhielli, meta, etichette */
  --text-base: 1.0625rem;                                   /* 17 corpo */
  --text-md:   clamp(1.08rem, 1rem + 0.38vw, 1.25rem);      /* lead */
  --text-lg:   clamp(1.3rem, 1.16rem + 0.6vw, 1.62rem);     /* H3 */
  --text-xl:   clamp(1.75rem, 1.4rem + 1.5vw, 2.7rem);      /* H2 di sezione */
  --text-2xl:  clamp(2.1rem, 1.6rem + 2.1vw, 3.3rem);       /* titoli di apertura */
  --text-3xl:  clamp(2.5rem, 1.75rem + 3.3vw, 4.6rem);      /* H1 della testata */
  --text-num:  clamp(2.8rem, 2.1rem + 2.9vw, 4.2rem);       /* numerali dei passi (serif) */

  --lh-body: 1.68;
  --lh-snug: 1.22;
  --lh-tight: 1.02;               /* il serif a corpo alto vuole righe strette */
  --tracking-display: -0.018em;   /* stretta leggera sui gradi alti, come i riferimenti */
  --tracking-label: 0.17em;

  /* --- Spazio: scala unica, usata anche dalle griglie --- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;    --space-8: 4.5rem;
  --space-9: 6.5rem;  --space-10: 9rem;

  --gutter: clamp(1.15rem, 0.6rem + 2.2vw, 2.6rem);
  --container: 1240px;             /* il mosaico sfalsato vuole tre colonne piene */
  --container-narrow: 720px;
  --section-y: clamp(3.8rem, 2.3rem + 4.8vw, 7.4rem);
  /* altezza di riga del mosaico dei percorsi: la usano SIA `grid-auto-rows` SIA la tessera che scavalca,
     che perde lo stiramento e senza un'altezza dichiarata prenderebbe quella della propria fotografia.
     UN valore, due consumatori. */
  /* ⚠ L'altezza di riga decide il RAPPORTO delle celle larghe, e quindi quanto un quadrato viene
     tagliato: a 246px una cella da due colonne usciva 2,0:1 e le fotografie quadrate — che in questo
     mestiere sono quasi tutte — perdevano testa e piedi. A 300px la stessa cella sta a 1,33:1. */
  --tile-row: clamp(208px, 21vw, 304px);

  /* --- Segno: CURVA. Il marchio e' un cerchio con dentro una linea continua, e l'onda separa le bande:
     il raggio qui e' generoso e deciso, mai il raggio medio timido (asse 6 della categoria: gli estremi). */
  --radius: 16px;
  --radius-lg: 30px;              /* contenitori grandi, tessere del mosaico, pannelli */
  --radius-pill: 999px;           /* bottoni: pillola piena, come tutti i riferimenti di categoria */
  --border: 1px solid var(--line);
  --border-dark: 1px solid rgba(147,204,160,.28);   /* filetto sulle bande scure: menta al 28% */
  --shadow-1: 0 1px 2px rgba(20,26,51,.05), 0 8px 26px rgba(20,26,51,.07);
  --shadow-2: 0 2px 8px rgba(20,26,51,.09), 0 26px 56px rgba(20,26,51,.13);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* altezza della testata: serve allo scroll-margin delle ancore (sito a pagina unica) */
  --header-h: 96px;
  --header-h-shrunk: 72px;
}

@media (max-width: 900px) {
  :root { --header-h: 78px; --header-h-shrunk: 68px; }
}