/* tokens.css — design genome integrative_medicine. Studio di medicina integrata: un professionista solo,
   che ci mette la faccia. Il registro è clinico contemporaneo — la famiglia «Dottori» dei riferimenti di
   categoria, non quella editoriale-calda dei «Psicologi» — con la persona al centro e il movimento sobrio.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   La palette NON viene da un catalogo: il petrolio è MISURATO sul sito attuale del primo cliente
   (rgb(1,71,100) dominante, azzurro rgb(142,203,240) di appoggio, oro rgb(255,196,2) di dettaglio).
   Cade nella stessa famiglia dei riferimenti della categoria (BeDoctor #204289, BeClinic #263A78).

   Contratto palette (a11y, MISURATO — non stimato, 21 coppie su 21 sopra AA):
   ink su paper 18,10 · ink su surface 17,10 · ink-muted su paper 7,17 · ink-muted su surface 6,77 ·
   brand su paper 10,06 · brand su surface 9,51 · brand su azzurro-tint 8,74 · brand-mid su paper 5,90 ·
   on-dark su brand 10,06 · on-dark su brand-dark 14,08 · on-dark-muted su brand 6,49 ·
   azzurro su brand 5,73 · azzurro-lt su brand 7,11 · azzurro-tint su brand 8,74 ·
   accent su brand 6,30 · accent su brand-dark 8,82 · accent-ink su paper 5,27 · accent-ink su surface 4,98 ·
   accent-dark su paper 7,65 · ink su azzurro 10,30 · ink-muted su azzurro-tint 6,22.

   ⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - --accent (ORO pieno) NON è MAI testo su fondo CHIARO: fa 1,60 su paper, cioè illeggibile. Su chiaro è
     filetto, superficie, segno. Su fondo PETROLIO invece porta testo (6,30), ed è lì che vive l'occhiello.
   - l'oro che porta TESTO su fondo chiaro è --accent-ink (5,27), e per i corpi piccoli --accent-dark (7,65);
   - --ink-muted vale SOLO su fondo chiaro; su fondo scuro si usa --on-dark-muted;
   - --azzurro è appoggio e testo su SCURO (5,73 sul petrolio): su bianco non porta testo;
   - ⚠ il FOCUS non può essere un colore solo: il petrolio fa 10,06 su bianco ma sparisce sul petrolio. Il
     token vale per le superfici chiare e viene RIBALTATO in components.css su ogni superficie scura.
   - un testo sopra una FOTO non è coperto da questi rapporti: va misurato dal pixel renderizzato. La
     testata cinematografica porta perciò un velo dichiarato (--scrim/--scrim-deep), non una speranza. */
:root {
  /* --- Colore (petrolio di marca + azzurro d'appoggio + oro di dettaglio + neutri freddi) --- */
  --paper:      #FFFFFF;  /* fondo dominante */
  --surface:    #F5F9FC;  /* superficie fredda: sezioni alternate */
  --surface-2:  #E9F0F6;  /* superfici di riposo e placeholder */
  --ink:        #161616;  /* inchiostro: testo (18,10:1 su paper) */
  --ink-muted:  #4A5A62;  /* testo secondario SOLO su fondo chiaro (7,17:1) */
  --line:       #D9E4EB;  /* filetto: bordi e righe (non-testo) */

  --brand:      #014764;  /* PETROLIO di marca: testata, bande piene, bottone primario */
  --brand-dark: #012F44;  /* petrolio profondo: piè di pagina, hover del bottone, velo */
  --brand-mid:  #2C6B87;  /* petrolio chiaro: testo di appoggio su chiaro (5,90), filetti su scuro */

  --azzurro:      #8ECBF0;  /* azzurro d'appoggio: testo e segni su fondo scuro (5,73 sul petrolio) */
  --azzurro-lt:   #B9DEF5;  /* azzurro chiaro: testo su scuro quando serve più stacco (7,11) */
  --azzurro-tint: #E3F1FA;  /* azzurro tint: fondo dei riquadri d'evidenza su chiaro */

  --accent:     #FFC402;  /* ORO: filetti, superfici, segni — e TESTO SOLO su petrolio (6,30) */
  --accent-ink: #8A6600;  /* oro portato a TESTO su chiaro: occhielli, valutazioni (5,27) */
  --accent-dark:#6B4F00;  /* oro profondo: corpi piccoli su chiaro (7,65), hover di superficie */
  --accent-tint:#FFF3CC;  /* oro tint: fondo di riquadri d'evidenza su chiaro */

  --on-dark:       #FFFFFF;  /* testo su fondi pieni scuri (10,06 sul petrolio · 14,08 sul profondo) */
  --on-dark-muted: #B7D4E3;  /* testo secondario su fondo scuro (6,49 sul petrolio) */

  /* verde del marchio WhatsApp: colore di TERZI, non della palette. Vive solo sul suo pulsante, e non
     entra in nessun'altra superficie. Il testo che ci si posa sopra è bianco su #128C4A (4,71:1). */
  /* ⚠ MISURATO: #128C4A col bianco sopra fa 4,31 — sotto AA per il testo normale, e axe lo segnala.
     Il verde scende a #0F7F42 (5,08) restando riconoscibile come il marchio. Il numero non si stima. */
  --whatsapp:      #0F7F42;
  --whatsapp-dark: #0B6634;

  /* velo della fotografia nella testata cinematografica: la coppia .30→.72 tiene leggibile il titolo
     bianco su uno scatto CHIARO (lo studio è luminoso), che è il caso peggiore e quello reale. */
  --scrim:      rgba(1,29,44,.30);
  --scrim-deep: rgba(1,29,44,.72);

  /* --- SFUMATURE: il registro 2026 non impila campiture piatte, le fonde. Ogni superficie del sito
     nasce da una di queste, così il colore non ha mai un bordo netto dove non serve. --- */
  --grad-notte:   linear-gradient(152deg, #0A5F82 0%, #01567A 34%, var(--brand) 72%, #013049 100%);
  --grad-abisso:  linear-gradient(200deg, #01415F 0%, #01547A 48%, #012434 100%);
  --grad-alba:    linear-gradient(180deg, #FFFFFF 0%, #F7FBFE 40%, #EDF6FC 100%);
  --grad-velo:    linear-gradient(115deg, rgba(142,203,240,.30) 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,0) 70%);
  --grad-oro:     linear-gradient(90deg, var(--accent) 0%, #FFD95C 100%);
  /* aloni: cerchi di luce sfocati che tolgono la piattezza a una banda senza aggiungere oggetti */
  --alone-azzurro: radial-gradient(closest-side, rgba(160,214,246,.55), rgba(142,203,240,0));
  --alone-oro:     radial-gradient(closest-side, rgba(255,196,2,.30), rgba(255,196,2,0));

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

  /* --- Tipografia: Poppins per il display, Inter per il testo, entrambi OFL self-hosted.
     Poppins è il font dei titoli del sito attuale del cliente: la continuità di marca non si paga nulla.
     Il testo passa a Inter perché le pagine di questo verticale sono prosa lunga e fitta, e un geometrico
     in colonna lunga stanca. ⚠ Il display vive a PESO 500/600, mai 700: Poppins a 700 sui gradi alti
     impasta le contro-forme circolari. tokens.css deve definire --font-display e --font-body. --- */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica: rapporto ~1,25, con la testata staccata. ⚠ I gradi alti sono CAPPATI con clamp()
     perché la copy reale di questo mestiere è lunga («L'importanza della figura osteopatica in campo
     estetico»): un display senza tetto manda un titolo a quattro righe. */
  --text-sm:   0.8125rem; /* occhielli e meta, maiuscoletto tracciato */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.09rem, 1rem + 0.44vw, 1.28rem);    /* lead */
  --text-lg:   clamp(1.24rem, 1.08rem + 0.7vw, 1.6rem);   /* H3 */
  --text-xl:   clamp(1.62rem, 1.3rem + 1.4vw, 2.3rem);    /* H2 — titoli di sezione */
  --text-2xl:  clamp(1.95rem, 1.5rem + 2vw, 2.9rem);      /* display di sezione e page-head */
  --text-3xl:  clamp(2.4rem, 1.75rem + 2.9vw, 3.9rem);    /* display della testata */

  --lh-tight: 1.06;
  --lh-snug: 1.12;
  --lh-body: 1.65;
  --tracking-label: 0.12em;    /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: -0.012em; /* il geometrico si stringe appena alle scale grandi */

  /* --- Spaziatura --- */
  --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(2.75rem, 1.8rem + 3vw, 4.75rem);

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

  /* --- Forma: PILL sui bottoni (i riferimenti moderni della categoria stanno tutti fra 38 e 57px di
     raggio), tessere addolcite. È il segno che separa il clinico contemporaneo dall'istituzionale. --- */
  --radius: 14px;
  --radius-lg: 28px;
  --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 (a 2560px vale 650): 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 (morbida e bassa: il clinico contemporaneo posa, non gonfia) --- */
  --shadow-sm: 0 6px 20px rgba(1,47,68,.07);
  --shadow-md: 0 28px 56px -34px rgba(1,47,68,.40);
  --shadow-lg: 0 40px 80px -40px rgba(1,47,68,.46);

  --tile-gap: clamp(0.85rem, 0.45rem + 1.2vw, 1.5rem);

  /* Altezza del «cromo» in testa alla pagina: sono le altezze REALI dell'intestazione ai suoi punti di
     rottura, non stime. Serve alla testata agganciata e allo scroll-margin delle ancore. */
  --chrome: 68px;
  /* altezza della barra CTA fissa su mobile: è lo spazio che il fondo pagina deve lasciare libero */
  --ctabar-h: 0px;

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 260ms;
  --pulse-dur: 2400ms;  /* alone del pulsante WhatsApp: lento, non è un lampeggio */
}
@media (max-width: 599.98px) { :root { --ctabar-h: 62px; } }
@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }