/* tokens.css — design genome clinical_center. Struttura clinica accreditata: l'INFORMAZIONE è il
   servizio. Petrolio + ciano presi dal LOGO del cliente-tipo (stessa famiglia cromatica del marchio),
   fondo bianco e tint azzurro di marca. Il carattere lo danno i PANNELLI e i blocchi pieni di colore,
   non la fotografia: questi clienti non hanno un parco fotografico proprio (il materiale è il dump del
   sito vecchio, in buona parte stock) → il verticale deve reggere anche a foto zero.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.
   Contratto palette (a11y, VERIFICATO su OGNI fondo con margine >=4.6):
   il ciano si sdoppia in tre — --accent-text (scurito) per il testo-accento e il fondo del CTA;
   --accent-deco (il ciano DEL MARCHIO) SOLO come segno NON testuale; --accent-lt per le campiture chiare.
   ⚠⚠ --accent-deco #0083AC NON PORTA TESTO, di nessun colore: --ink fa 3.7:1 e il bianco 4.3:1 (passerebbe
   solo il nero puro, 4.8:1, che è fuori palette). Quindi niente pannelli/tessere/bottoni di marca col testo
   sopra: una campitura ciano CHE PARLA è --accent-lt (testo --ink, 8.1:1). Il marchio resta su filetti,
   bordi e bollini (non-testo, >=3:1). Verificato con axe sul mock, non a tavolino: la prima stesura di
   queste regole diceva "sul ciano di marca il testo è --ink" ed era sbagliata.
   ⚠ --accent-deco NON è un filetto sul petrolio (2.4:1): lì c'è --accent-lt (5.3:1).
   ⚠ Su --accent-lt il secondario --ink-muted scende a 3.1:1: lì il testo minore resta --ink.
   ⚠ --ink-muted MAI su fondo scuro (lì c'è --muted-on-dark). */
:root {
  /* --- Colore (bianco clinico + petrolio + ciano, dal logo) --- */
  --paper:    #FFFFFF;  /* bianco: fondo pulito, da referto */
  --surface:  #E6F1F7;  /* azzurro chiarissimo: sezioni alternate — TINT DI MARCA, mai grigio */
  --ink:      #16232E;  /* inchiostro: testo (16:1 su paper) */
  --ink-muted:#566572;  /* testo secondario SOLO su fondo chiaro (6.0:1 su paper, 5.2:1 sul tint) */
  --line:     #CFE0EA;  /* filetto: righe e bordi (non-testo) */
  --accent-text:#006485; /* ciano scurito: testo-accento, link, numerali e FONDO del CTA (6.6:1 su paper, 5.8:1 sul tint) */
  --accent-deco:#0083AC; /* ciano DEL MARCHIO: campiture, filetti su chiaro, display grande. MAI testo normale (4.3:1) */
  --accent-lt:#57C6EA;  /* ciano chiaro: accento anche testuale su fondo scuro (5.3:1 su brand, 7.0:1 su night) */
  --on-dark:  #FFFFFF;  /* testo su petrolio (10.3:1) */
  --muted-on-dark:#9FC2D6; /* testo secondario su fondo scuro (footer legal, didascalie — 5.5:1 su brand) */
  --brand:    #004274;  /* petrolio: bande piene, hero, pannelli, tessere */
  --night:    #00304F;  /* petrolio profondo: footer (13.7:1 col testo bianco) */

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

  /* --- Tipografia: display geometrico (Montserrat) + testo sans (Inter), OFL self-hosted --- */
  /* Montserrat è la grottesca del logo CRIVELLO ED è il display di BeClinic2 (il riferimento sancito):
     titolo e marchio parlano la stessa lingua. Inter nel corpo: regge le liste lunghe di esami. */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala clinica: display netti ma non urlati, corpo generoso (si legge molto testo) */
  --text-sm:  0.78rem;    /* eyebrow/meta, uppercase tracked */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:  clamp(1.1rem, 1rem + 0.45vw, 1.3rem);       /* lead */
  --text-lg:  1.2rem;     /* H3 — titolo di card/pannello */
  --text-xl:  clamp(1.75rem, 1.2rem + 2.1vw, 2.6rem);     /* H2 — titoli di sezione */
  --text-2xl: clamp(2rem, 1.35rem + 2.5vw, 3.1rem);       /* display sezione / page-head */
  --text-3xl: clamp(2.1rem, 1.45rem + 2.6vw, 3.5rem);     /* display hero — cappato: a 4rem il titolo reale di questi clienti (58 char) riempiva mezza schermata */
  --text-num: clamp(2.8rem, 2rem + 2.6vw, 3.75rem);       /* numerale degli step: INTERO dentro la scheda, mai tagliato */
  --text-stat: clamp(2.2rem, 1.6rem + 2.2vw, 3rem);       /* i numeri della sezione fiducia */

  --lh-tight: 1.1;    /* display */
  --lh-snug: 1.25;    /* titoli */
  --lh-body: 1.65;
  --tracking-label: 0.16em;   /* eyebrow uppercase (la riga del logo è tracciata) */
  --tracking-display: -0.012em; /* appena stretto: a -0.022 le lettere del display a peso 500 si toccano */

  /* --- Spaziatura (density: compact — è un sito informativo, si scorre) --- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);   /* più aria: la densità compatta stringeva le sezioni */

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 62ch;
  --gutter: clamp(1.25rem, 0.4rem + 4vw, 3.5rem);

  /* --- Forma: raggi ampi e bottoni a pillola. È il segno più forte di "recente" nella categoria (i
     template Dottori moderni stanno su radius 16-24 e pill 38-57); lo squadrato di BeClinic2 data il sito. --- */
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* --- Ombra: le schede stanno su OMBRE MORBIDE, non su filetti da 1px (il bordo secco è il dettaglio
     che fa "modulo", l'ombra fa "scheda"). Due livelli: una diffusa larga + una stretta di appoggio. --- */
  --shadow-sm: 0 2px 8px rgba(0,48,79,.06), 0 1px 2px rgba(0,48,79,.04);
  --shadow-md: 0 18px 48px rgba(0,48,79,.10), 0 4px 14px rgba(0,48,79,.06);
  --shadow-lg: 0 28px 70px rgba(0,48,79,.16), 0 8px 24px rgba(0,48,79,.08);

  /* --- Griglia foto: il gutter è OBBLIGATORIO (le tessere non si toccano mai) --- */
  --tile-gap: clamp(0.5rem, 0.25rem + 1vw, 1rem);

  /* --- Scrim dell'hero: il titolo sta SULLA foto → il velo petrolio è forte e non negoziabile --- */
  --hero-scrim: 0.62;

  /* --- Motion (sobria) --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 240ms;
}
@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }