/* 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;
  --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; } }