/* tokens.css — design genome dental_practice. Studio odontoiatrico a più specialità: registro clinico
   LUMINOSO su fondo bianco, con episodi di banda piena nel ciano di marca. L'angolo è addolcito (6px) e i
   bottoni sono a pillola — nella categoria «Dottori» il raggio morbido è ciò che separa l'accogliente dal
   burocratico, ed è il REGISTRO che distingue questo verticale dal taglio secco di clinical_center, che
   abita la stessa famiglia di tinta.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   La palette NON viene da un catalogo: è MISURATA sui pixel del marchio del primo cliente — il ciano
   dell'icona-dente e delle quattro icone-valore è UN SOLO colore al 100% dei pixel opachi (#028599), e lo
   stesso valore esce dai computed style del suo sito vivo (rgb(2,133,153)).

   Contratto palette (a11y, MISURATO su 24 coppie — non stimato):
   ink su paper 15,52 · ink su surface 14,29 · ink-muted su paper 6,29 · accent-ink su paper 6,00 ·
   on-dark su brand 6,01 · on-dark su brand-dark 11,26 · on-dark-muted su brand 4,72 ·
   accent-lt su brand 4,85 · accent-lt su brand-dark 9,08 · ink su accent 6,41.

   ⚠⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - --brand-mark (#028599, il ciano ESATTO del marchio) NON PORTA TESTO DI NESSUN COLORE: fa 4,36 col
     bianco e 4,36 con l'inchiostro. È filetto, croce del logo, numerale decorativo, segno. È la stessa
     trappola di #0083AC su clinical_center. Una banda ciano CHE PARLA è --brand, non il marchio.
   - --accent (verde acqua chiaro) non porta il BIANCO (2,42): sopra l'accento il testo è --ink (6,41);
   - l'accento che porta TESTO è --accent-ink su fondo chiaro (6,00) e --accent-lt su fondo scuro;
   - --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: va misurato dal pixel renderizzato — per
     questo la testata porta il titolo sul BLOCCO DI COLORE pieno accanto alla foto, non sopra la foto. */
:root {
  /* --- Colore (carta clinica + ciano di marca + verde acqua secondario) --- */
  --paper:      #FFFFFF;  /* carta: fondo dominante, il registro della categoria è luminoso */
  --surface:    #EFF7F9;  /* azzurro carta: sezioni alternate — TINT DI MARCA */
  --surface-2:  #D9EBEF;  /* superfici di riposo e placeholder */
  --ink:        #11272E;  /* blu-nero: testo (15,52:1 su paper) */
  --ink-muted:  #4B646C;  /* blu tenue: testo secondario SOLO su fondo chiaro (6,29:1) */
  --line:       #CBDFE4;  /* filetto: bordi e righe (non-testo) */
  --brand-mark: #028599;  /* CIANO DEL MARCHIO: croce del logo, filetti, numerali. MAI testo (4,36) */
  --brand:      #026D7E;  /* la banda che PARLA: blocchi pieni, bottone primario (bianco 6,01) */
  --brand-mid:  #01596A;  /* ciano medio: hover del bottone, superfici scure intermedie */
  --brand-dark: #01414D;  /* ciano profondo: fondo del piè, velo (bianco 11,26) */
  --accent:     #2CB9B0;  /* VERDE ACQUA secondario del cliente: superfici e bottoni chiari — sopra va --ink */
  --accent-ink: #0F6F69;  /* verde acqua portato a TESTO su chiaro: occhielli, numerali, link (6,00) */
  --accent-dark:#0B5A55;  /* verde acqua profondo: corpi piccoli accentati su chiaro */
  --accent-lt:  #BBF1EE;  /* verde acqua chiaro: l'accento che porta TESTO su fondo scuro (4,85 sulla banda) */
  --on-dark:    #FFFFFF;  /* testo su fondi pieni (6,01 sulla banda · 11,26 sul piè) */
  --on-dark-muted: #CDE9EE; /* testo secondario su fondo scuro (4,72 sulla banda) */
  /* Velo della fotografia della testata. ⚠ NON serve a far leggere il titolo — quello sta sul blocco di
     colore accanto — ma a tenere unita la banda quando foto e blocco si affiancano. */
  --scrim:      rgba(1,65,77,.16);
  --scrim-deep: rgba(1,65,77,.34);

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

  /* --- Tipografia: display geometrico stretto (Raleway) + testo umanista (Mulish), entrambi OFL
     self-hosted e nessuno dei due usato dagli altri 29 verticali.
     Raleway 800 è il display di dental-care-04, il template di riferimento: sicuro, compatto, moderno.
     Mulish non è casuale — il sito vivo del cliente carica già Muli (= Mulish) accanto a Open Sans: è
     un cenno all'identità che la cliente ha, nel quarto in cui il template si può migliorare. --- */
  --font-display: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica: salto display↔testo marcato, come nei template della categoria (h1 65px in
     dental-care-04). ⚠ Tarata sulla copy DEMO: sulla copy reale va misurata nel contenitore vero. */
  --text-sm:   0.75rem;   /* occhielli e meta, maiuscoletto tracciato */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);   /* lead */
  --text-lg:   clamp(1.18rem, 1.02rem + 0.66vw, 1.5rem);  /* H3 */
  --text-xl:   clamp(1.6rem, 1.26rem + 1.5vw, 2.25rem);   /* H2 — titoli di sezione */
  --text-2xl:  clamp(1.8rem, 1.34rem + 1.85vw, 2.8rem);   /* 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.05rem, 1.5rem + 2.1vw, 3.35rem);   /* display della testata */

  --lh-tight: 1.08;
  --lh-snug: 1.14;
  --lh-body: 1.7;
  --tracking-label: 0.18em;     /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: -0.015em; /* Raleway 800 si stringe 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(3.25rem, 2.1rem + 3.8vw, 6rem);

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

  /* --- Forma: MORBIDA. dental-care-04 ha radius 6px sui bottoni e i template moderni della categoria
     stanno sulla pillola (38–57px): qui i bottoni sono pillole e le superfici hanno 6px. --- */
  --radius: 6px;
  --radius-lg: 6px;
  --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. Il default rimanda a --radius. */
  --field-radius: var(--radius);

  --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 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 e il testo si riduce a una colonna di una lettera. */
  --bleed: max(var(--gutter), (100vw - var(--container)) / 2);

  /* Sporgenza della scheda bianca che scavalca il bordo del blocco di colore: è IL segno del verticale,
     preso da dental-care-04. */
  --overlap: clamp(1.5rem, 0.9rem + 2.4vw, 3.25rem);

  /* Rapporto delle figure. Il verticale nasce attorno a fotografia ORIZZONTALE, perché è ciò che il
     settore produce (scatti clinici di banca immagini, quasi tutti 3/2). È un valore, non una struttura:
     vive qui perché un preset possa portarlo al verticale per il sito che ha solo scatti alti. */
  --fig-ratio: 4 / 3;
  --fig-ratio-wide: 3 / 2;
  --fig-object-pos: 50% 50%;   /* un ritratto va inquadrato in alto, un ambiente al centro */

  /* --- Leve di registro per-sito: il default è il comportamento storico del verticale. --- */
  --topbar-display: flex;        /* fascia di servizio: alcuni studi non vogliono recapiti in testata */
  --hero-split-cols: 1.02fr 0.98fr;  /* la spartitura della testata */
  --hero-min-h: clamp(520px, 72vh, 760px);
  --footer-cols: 1.25fr 1fr 1fr;
  --footer-cols-2: 1.25fr 1fr;   /* ⚠ serve a --footer-cols quando una colonna sparisce: v. components.css */
  --contact-fig-h: clamp(230px, 34vw, 420px);
  --num-display: block;          /* il numerale 01–06 dei trattamenti */

  /* Leve per-sito introdotte col SECONDO cliente: ogni valore qui e' il comportamento
     STORICO del verticale, ed e' questa dichiarazione — non il fallback inline — a rendere
     l'estensione inerte per chi non seleziona un preset. */
  --band-gallery-bg: transparent;
  --band-gallery-grad: var(--grad-carta2;
  --band-head-bg: transparent;
  --band-head-grad: var(--grad-carta2;
  --band-prestazioni-bg: transparent;
  --band-section-alt-bg: transparent;
  --band-section-bg: transparent;
  --band-studio-bg: transparent;
  --band-treats-bg: transparent;
  --band-treats-grad: var(--grad-tint;
  --contact-panel-bg: transparent;
  --contact-panel-pad: 0;
  --contact-panel-radius: 0;
  --contact-panel-shadow: none;
  --hero-kenburns: none;
  --hero-img-will-change: auto;
  --marquee-will-change: auto;
  /* Rivelazione allo scroll: i default sono i valori storici del verticale. */
  --reveal-from-opacity: 0;
  --reveal-shift: 22px;
  --reveal-step: 70ms;
  --reveal-dur: var(--dur);
  --reveal-ease: var(--ease);
  --intro-head-cols: minmax(0, 1fr;
  --intro-head-lead-col: 2;
  --intro-head-lead-margin: 0;
  --intro-head-lead-row: 2 / span 2;
  --intro-head-max: none;
  --intro-max: 62ch;
  --intro-rule-margin: 0;
  --orari-panel-bg: transparent;
  --orari-panel-pad: 0;
  --orari-panel-radius: 0;
  --orari-panel-shadow: none;
  --prose-panel-bg: transparent;
  --prose-panel-pad: 0;
  --prose-panel-radius: 0;
  --prose-panel-shadow: none;
  --studio-card-align: stretch;
  --studio-card-offset: 0;
  --studio-card-overlap: 0;
  --studio-cols: minmax(0, 1.06fr;
  --studio-gap: clamp(var(--space-6;
  --tile-caption-veil: linear-gradient(180deg, rgba(1,65,77,0;
  --treat-bar-scale: 1;
  --treat-num-color: var(--accent-ink;
  --treat-num-lh: inherit;
  --treat-num-tracking: var(--tracking-label;
  --treat-pad: clamp(var(--space-4;
  --treat-shadow: none;
  --treats-grid-bg: transparent;
  --treats-grid-pad: 0;
  --treats-grid-radius: 0;

  /* Tessera trattamento: al default e' la scheda sobria del golden. */
  --treat-bar: 0;                /* filo d'accento in cima: 0 = non esiste */
  --treat-num-size: var(--text-sm);
  --treat-icon-pad: 0;
  --treat-icon-radius: 0;
  /* Intestazioni di sezione: allineate a sinistra nel golden. */
  --intro-align: start;
  --intro-margin: 0;
  /* Nastro dei trattamenti sotto la nav: le sue voci sono le specialità del PRIMO cliente, cablate nel
     pattern. Finché non entrano dalla copy, uno studio con altre specialità lo SPEGNE invece di
     pubblicare quelle di un collega. */
  --ribbon-display: block;
  --ribbon-client-display: none; /* nastro con le specialità dichiarate dallo studio */
  --page-checks-display: none;   /* elenco prestazioni della pagina Trattamenti: opt-in di progetto */
  /* Consenso marketing nel modulo: si accende solo dove il cliente lo raccoglieva davvero. */
  --consent-marketing-display: none;
  /* Il marchio in testata. ⚠ È il segno del VERTICALE: senza queste leve ogni studio del verticale
     pubblicherebbe il marchio del primo cliente. Il default `normal` lascia in pagina l'immagine del
     `src` — cioè il marchio del verticale, invariato; un progetto che porta il proprio lo consegna dal
     canale asset-di-design (`assets/img/design/<id>.svg`) e la url() si risolve rispetto al FOGLIO. */
  --brand-mark-img: none;
  --brand-mark-plate: none;             /* nessuno pseudo: il marchio resta quello del pattern */
  --brand-mark-native-display: inline-block;
  --brand-mark-w: 46px;
  --brand-mark-h: 46px;
  --wordmark-name-display: flex;  /* il nome composto: si spegne quando il marchio porta già la scritta */
  /* Testata: la fotografia sta AFFIANCATA al blocco di colore (storico) oppure DIETRO l'intera banda,
     col blocco che ci galleggia sopra come scheda. Sono due valori, non due fogli. */
  /* ⚠⚠ Il default è `relative`, non `static`: la fotografia è il blocco contenitore del proprio velo
     (`.hero__media::after`, inset 0). Con `static` il velo risalirebbe a `.hero__split` e coprirebbe
     l'intera testata — una regressione invisibile nel sorgente e visibile solo nel reso. */
  --hero-media-position: relative;
  --hero-media-inset: auto;
  --hero-media-ar: var(--fig-ratio-wide);  /* sotto i 900px: rapporto della fotografia in testata */
  --hero-panel-bg: var(--grad-brand);
  --hero-panel-radius: 0;
  --hero-panel-margin: 0;
  --hero-panel-pad: var(--space-8) var(--space-7) var(--space-8) var(--bleed);
  --hero-scrim-opacity: 0;        /* velo sulla fotografia: serve solo quando il testo le sta sopra */

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

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

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

  /* --- Sfumature. ⚠ Il punto più CHIARO di ogni sfumatura che porta testo bianco non sale mai sopra
     --brand (#026D7E, bianco 6,01): sotto quella soglia il contrasto è garantito lungo TUTTA la rampa,
     non solo al centro. Le sfumature decorative (bagliori, veli) non portano testo e possono schiarire. --- */
  --grad-brand:   linear-gradient(155deg, #026D7E 0%, #01596A 52%, #01414D 100%);
  --grad-panel:   linear-gradient(205deg, #01596A 0%, #026D7E 60%, #024E5C 100%);
  --grad-band:    linear-gradient(100deg, #01596A 0%, #026D7E 48%, #014E5D 100%);
  --grad-foot:    linear-gradient(180deg, #01414D 0%, #012F38 100%);
  --grad-carta:   linear-gradient(180deg, #FFFFFF 0%, #F6FBFC 62%, #EFF7F9 100%);
  --grad-tint:    linear-gradient(160deg, #EFF7F9 0%, #FFFFFF 55%, #E7F3F6 100%);
  --grad-accento: linear-gradient(90deg, #028599 0%, #2CB9B0 100%);
  --grad-velo:    linear-gradient(180deg, rgba(1,65,77,0) 45%, rgba(1,65,77,.34) 100%);
  --grad-bagliore: radial-gradient(60% 60% at 78% 12%, rgba(44,185,176,.20) 0%, rgba(44,185,176,0) 70%);
  --grad-scheda:  linear-gradient(180deg, #FFFFFF 0%, #FBFDFE 100%);
  --grad-carta2:  linear-gradient(200deg, #FBFEFE 0%, #EAF5F7 48%, #FFFFFF 100%);
  --grad-nastro:  linear-gradient(90deg, #01414D 0%, #026D7E 50%, #01414D 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; } }