/* tokens.css — design genome specialist_practice. Ambulatorio specialistico di UN medico: il
   professionista È il servizio, e il sito deve sostenersi da solo con POCHE fotografie — questo settore
   produce due scatti d'ambiente e un ritratto, non un archivio. Da qui la scelta di fondo: il peso lo
   portano il COLORE e la TIPOGRAFIA, mai la quantità di immagini.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   Riferimento primario: open-heart-clinic (categoria «Dottori», registro clinico moderno). Ne vengono il
   display grande e LEGGERO spezzato su righe corte, i pannelli tinti ARROTONDATI che portano testo invece
   di fotografie, e l'aria fra le sezioni. Dal template scelto dal cliente vengono il blu e il rigore
   occhiello → titolo → prosa con le spunte.

   La palette non viene da un catalogo: il blu è MISURATO sui pixel del marchio del primo cliente
   (#0094E0, 7609 pixel opachi su 7609 nel PNG del wordmark).

   Contratto palette (a11y, MISURATO su 19 coppie — non stimato):
   ink su paper 15,56 · ink su surface 14,44 · ink su tint 13,86 · ink-muted su paper 6,98 ·
   ink-muted su tint 6,21 · accent-ink su paper 8,09 · accent-ink su tint 7,20 · on-dark su brand-dark
   13,98 · on-dark-muted su brand-dark 8,61 · paper su accent 6,78 · paper su brand-mid 11,11 ·
   brand-mark su brand-dark 4,75.

   ⚠⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - --brand-mark (#0094E0, il blu ESATTO del marchio) NON PORTA TESTO DI NESSUN COLORE, MAI, nemmeno
     su fondo scuro. Fa 3,33 col bianco e 2,94 con --on-dark; sul navy PIATTO farebbe 4,75, ma il
     gradiente col bagliore schiarisce il fondo fino a rgb(11,54,110) e il rapporto REALE scende a
     3,34 — misurato dal pixel sulla pagina servita, dopo che axe l'aveva messo fra gli `incomplete`.
     ⭐⭐ Un contrasto verificato su un token PIATTO non è verificato sul GRADIENTE che rende davvero:
     la rampa va campionata nel suo punto più chiaro. L'occhiello su scuro è --accent-lt (peggiore
     5,38 su tutta la rampa). --brand-mark resta filetto, segno e anello di focus. È la stessa trappola di
     #0083AC su clinical_center e di #028599 su dental_practice: il colore che il cliente chiama «il mio»
     è quasi sempre quello che non può parlare.
   - la banda che PARLA è --brand-dark (bianco 13,98) o --brand (bianco 6,78);
   - --ink-muted vale SOLO su fondo chiaro; su fondo scuro si usa --on-dark-muted;
   - un testo sopra una FOTO non è coperto da questi rapporti: per questo la testata porta il titolo sul
     BLOCCO DI COLORE pieno, e la fotografia gli sta accanto — non sotto. */
:root {
  /* --- Colore (carta clinica + famiglia blu del marchio) --- */
  --paper:      #FFFFFF;  /* carta: fondo dominante */
  --surface:    #F2F7FC;  /* azzurro carta: sezioni alternate */
  --surface-2:  #E1ECF7;  /* superfici di riposo e placeholder */
  --tint:       #EAF3FA;  /* il tint dei PANNELLI arrotondati — il segno del verticale */
  --ink:        #14243D;  /* blu-nero: testo (15,56:1 su paper) */
  --ink-muted:  #4A5A75;  /* blu tenue: testo secondario SOLO su fondo chiaro (6,98:1) */
  --line:       #D6E2EF;  /* filetto: bordi e righe (non-testo) */
  --brand-mark: #0094E0;  /* BLU DEL MARCHIO: filetti, segni, anello di focus. MAI TESTO, su nessun fondo */
  --brand:      #0557BC;  /* il blu che PARLA su chiaro: bottone primario (bianco 6,78) */
  --brand-mid:  #0A3A78;  /* blu medio: hover del bottone, superfici scure intermedie (bianco 11,11) */
  --brand-dark: #0B2340;  /* NAVY: il campo della testata e del piè (bianco 13,98) */
  --accent:     #0557BC;  /* accento = il blu che parla */
  --accent-ink: #0A4E9E;  /* blu portato a TESTO su chiaro: occhielli, link (8,09) */
  --accent-dark:#043E88;  /* blu profondo: corpi piccoli accentati su chiaro (10,25 col bianco) */
  --accent-lt:  #5CBFF0;  /* blu chiaro: l'accento che porta testo su fondo scuro (7,65 sul navy) */
  --on-dark:    #EAF2FA;  /* testo su fondi pieni (13,98 sul navy) */
  --on-dark-muted: #A9C2DC; /* testo secondario su fondo scuro (8,61 sul navy) */
  /* Velo della fotografia. ⚠ NON serve a far leggere il titolo — quello sta sul blocco di colore
     accanto — ma a legare la tessera al campo navy su cui scavalca. */
  --scrim:      rgba(11,35,64,.14);
  --scrim-deep: rgba(11,35,64,.32);

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

  /* --- Tipografia: display geometrico (Jost) + testo umanista (Inter), entrambi OFL self-hosted.
     ⭐ NESSUNO dei quattro verticali sanitari usa Jost (Montserrat · Libre Baskerville · Poppins ·
     Raleway): la famiglia differenzia questo verticale dai fratelli PER COSTRUZIONE.
     ⚠ Jost va a peso 500, non 700: è il peso di open-heart-clinic, e il display grande e leggero è
     precisamente ciò che separa il moderno dall'istituzionale. La lezione «prima di cambiare font,
     guarda il PESO» è già stata pagata due volte (Montserrat 700→500, serif 700→400). --- */
  --font-display: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica: salto display↔testo MARCATO (open-heart-clinic: h1 96px, corpo 16).
     ⚠ Tarata sulla copy DEMO: sulla copy reale va misurata NEL CONTENITORE VERO — le size dei
     componenti display sono la trappola che ha morso sei volte. */
  --text-sm:   0.75rem;   /* occhielli e meta, maiuscoletto tracciato */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.06rem, 0.99rem + 0.4vw, 1.22rem);  /* lead */
  --text-lg:   clamp(1.2rem, 1.04rem + 0.68vw, 1.55rem);  /* H3 */
  --text-xl:   clamp(1.65rem, 1.24rem + 1.7vw, 2.4rem);   /* H2 — titoli di sezione */
  --text-2xl:  clamp(1.9rem, 1.34rem + 2.2vw, 3.1rem);    /* display di sezione e page-head */
  /* ⚠ La page-head NON riusa la size della testata (regola 6): è una testata di pagina, non un hero. */
  --text-3xl:  clamp(2.2rem, 1.45rem + 3vw, 4.1rem);      /* display della testata */

  --lh-tight: 1.06;
  --lh-snug: 1.14;
  --lh-body: 1.68;
  --tracking-label: 0.14em;     /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: -0.018em; /* Jost si apre alle scale grandi: si stringe appena */

  /* --- Spaziatura (densità ARIOSA: è il registro del riferimento) --- */
  --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.9rem, 1.85rem + 3.3vw, 5.2rem);
  /* Le bande che PORTANO un colore proprio respirano di più: sono affermazioni, non continuazioni. */
  --section-y-banda: clamp(3.4rem, 2.1rem + 4.1vw, 6.2rem);
  /* Le sezioni compatte (una riga di dati) non prendono la misura piena: la prenderebbero due volte. */
  --section-y-stretta: clamp(2.2rem, 1.5rem + 2.2vw, 3.6rem);

  /* --- Layout --- */
  --container: 1280px;
  --container-narrow: 62ch;

  /* ⭐ MISURE DI LETTURA, dichiarate come token perché sono una scelta PER SITO.
     Il verticale nasce per un ambulatorio con testi brevi, dove la colonna stretta è giusta. Un cliente
     con pagine lunghe e SENZA fotografie da affiancare vuole l'opposto: il testo prende la banda e va a
     capo da solo, perché una colonna stretta dentro una banda larga lascia due vuoti ai lati.
     ⚠⚠ La misura si mette sul TESTO, mai sul telaio della banda: il telaio resta a tutta larghezza e
     porta il suo colore fino ai bordi. È la regola già pagata su cobbler_workshop.
     ⚠ I valori qui sono ESATTAMENTE quelli che erano scritti nelle regole: chi non li ridichiara rende
     come prima, byte per byte. */
  --measure-prose: 66ch;        /* paragrafi di prosa, lead e testo degli occhielli di sezione */
  --measure-prose-sm: 44ch;     /* la stessa, sotto i 600px */
  --measure-intro: 62ch;        /* il blocco occhiello+titolo+lead che apre una sezione */
  --measure-narrow: 78ch;       /* il contenitore «stretto» delle pagine di testo */
  --measure-page-h1: 20ch;      /* il titolo della testata di pagina */
  --measure-page-lead: 60ch;    /* il suo lead */
  --measure-cta-h2: 22ch;       /* il titolo della fascia CTA di chiusura */

  /* Ritaglio della fascia fotografica a tutta larghezza. ⚠ È un token perché dipende da DOVE sta il
     soggetto nelle foto del cliente: una banda cinematografica su una foto 4:3 taglia all'altezza che
     questo valore decide, e col valore sbagliato mostra un corpo senza testa. */
  --fascia-object-pos: 50% 44%;

  /* Larghezza minima di una tessera nella griglia degli esami. ⚠ Decide QUANTE COLONNE: con un
     contenitore più largo `auto-fit` ne aggiunge una, e sei tessere su quattro colonne diventano 4+2
     con due celle vuote. Il numero di colonne è una conseguenza di questo valore, e va scelto sapendo
     quante voci ha il cliente. */
  --esami-min: 20rem;

  /* Il testo della banda contatti, che divide la riga con i bottoni. ⚠ Con una misura stretta e
     `space-between` il vuoto non finisce ai lati ma IN MEZZO, fra il testo e i bottoni. */
  --measure-contact-band: 46ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem);

  /* --- Forma: MORBIDA e ampia. open-heart-clinic sta su 24–32px sulle tessere e sulla pillola per i
     bottoni: il raggio ampio è ciò che rende il clinico contemporaneo invece che burocratico. --- */
  --radius: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  /* Il raggio dei CAMPI si separa da quello dei bottoni: una casella di testo a pillola non legge come
     moderna ma come sbagliata. */
  --field-radius: 10px;

  --border: 1px solid var(--line);

  /* Distanza fra il bordo della pagina e il contenitore. ⚠ CRESCE SENZA LIMITE con la finestra (a 2560px
     vale 680): 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. */
  --bleed: max(var(--gutter), (100vw - var(--container)) / 2);

  /* Sporgenza della tessera fotografica che scavalca il campo navy della testata: è IL segno del
     verticale. ⚠ Perché lo scavalco si veda servono DUE condizioni insieme (lezione pagata su
     clinical_center): il margine negativo deve superare il padding della banda, e la foto non deve
     determinare l'altezza della banda.
     ⚠⚠ Il primo tentativo qui aveva margine 69px contro un padding di 100: MISURATA, la sporgenza era
     −70px — la tessera restava dentro la banda, e sotto si apriva un vuoto bianco. Non era un valore
     da ritoccare a occhio: la relazione fra i due numeri non era dichiarata da nessuna parte.
     ⭐ Ora la sporgenza è UN SOLO token e gli altri due si DERIVANO da lui — il margine vale
     `sporgenza + padding` (quindi lo supera per costruzione) e la sezione seguente recupera
     esattamente `sporgenza`. Nessuno dei tre può divergere dagli altri. */
  /* ⚠⚠ SPORGENZA ZERO, per decisione dell'owner: la tessera sta DENTRO il campo navy. Scavalcando
     lasciava sotto una striscia di carta che si legge come uno spazio vuoto, non come un dispositivo.
     Il token resta perché la relazione fra i tre valori è ancora quella (margine = sporgenza + padding,
     la sezione seguente recupera la sporgenza): portandolo a un valore >0 il dispositivo torna, e i
     numeri non possono divergere. */
  --hero-pad-b: calc(var(--section-y) * 0.9);
  --hero-sporgenza: 0px;

  /* Rapporto delle figure. Il verticale nasce attorno a fotografia ORIZZONTALE d'AMBIENTE (sala visite,
     scrivania): è ciò che uno studio singolo produce davvero. */
  --fig-ratio: 4 / 3;
  --fig-ratio-wide: 3 / 2;
  --fig-object-pos: 50% 50%;

  /* --- Leve di registro per-sito: il default è il comportamento storico del verticale. --- */
  --topbar-display: flex;            /* fascia di servizio con orari e recapiti */
  --hero-split-cols: 0.88fr 1.12fr;  /* la spartitura della testata: la fotografia prende più riga */
  --hero-min-h: clamp(540px, 74vh, 780px);
  --footer-cols: 1.3fr 1fr 1fr;
  --footer-cols-2: 1.3fr 1fr;
  --contact-fig-h: clamp(230px, 34vw, 420px);
  --ritratto-w: clamp(190px, 22vw, 280px);  /* il ritratto del medico: TESSERA, mai fascia larga */

  /* --- Ombra (sobria: il clinico non gonfia) --- */
  --shadow-sm: 0 6px 18px rgba(20,36,61,.07);
  --shadow-md: 0 26px 54px -30px rgba(20,36,61,.34);

  --tile-gap: clamp(0.9rem, 0.45rem + 1.3vw, 1.6rem);

  /* Altezza del «cromo» in testa alla pagina (fascia di servizio + intestazione). I valori sono le
     altezze REALI dell'header: si FISSANO, non si deducono dalle metriche del font. */
  --chrome-topbar: 34px;
  --chrome: calc(76px + var(--chrome-topbar));

  /* --- Sfumature. ⚠ Il punto più CHIARO di ogni sfumatura che porta testo bianco non sale mai sopra
     --brand (#0557BC, bianco 6,78): sotto quella soglia il contrasto è garantito lungo TUTTA la rampa,
     non solo al centro. Le decorative (bagliori, veli) non portano testo e possono schiarire. --- */
  --grad-brand:   linear-gradient(155deg, #0A3A78 0%, #0B2340 58%, #081B32 100%);
  --grad-panel:   linear-gradient(205deg, #0A3A78 0%, #0B2340 62%, #0A1E38 100%);
  --grad-band:    linear-gradient(100deg, #0B2340 0%, #0A3A78 50%, #0B2340 100%);
  --grad-foot:    linear-gradient(180deg, #0B2340 0%, #081A30 100%);
  --grad-carta:   linear-gradient(180deg, #FFFFFF 0%, #F8FBFE 62%, #F2F7FC 100%);
  --grad-tint:    linear-gradient(160deg, #EAF3FA 0%, #FFFFFF 55%, #E4EFF9 100%);
  --grad-accento: linear-gradient(90deg, #0094E0 0%, #0557BC 100%);
  --grad-velo:    linear-gradient(180deg, rgba(11,35,64,0) 45%, rgba(11,35,64,.32) 100%);
  --grad-bagliore: radial-gradient(58% 58% at 80% 10%, rgba(0,148,224,.22) 0%, rgba(0,148,224,0) 70%);
  --grad-scheda:  linear-gradient(180deg, #FFFFFF 0%, #FAFCFE 100%);
  --grad-carta2:  linear-gradient(200deg, #FFFFFF 0%, #F7FBFE 52%, #EFF6FC 100%);

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