/* tokens.css — design genome mutual_advisory. Consulenza e promozione mutualistica: registro
   ISTITUZIONALE CIVILE su fondo chiaro, con episodi di banda navy piena (testata split, chiusura, pie')
   dove vive il marchio. Taglio SQUADRATO ovunque: nella categoria «Aziende» il raggio zero e' il registro
   (BeCorporation, BeCorporation2 e BeFirm hanno tutti radius 0 sui bottoni).
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   La tesi del verticale e' una frase del PRIMO CLIENTE, non un'invenzione: «non sono clienti, non sono
   audience ma sono soci». Da li' discendono il registro civico e le citazioni costituzionali portate come
   architettura invece che come riempitivo.

   La palette e' MISURATA sui pixel del marchio del primo cliente (figura vitruviana dentro un cerchio
   azzurro): #56A9DE al 41,9% dei pixel opachi, #436EB3 al 31,6%, #454545 al 14,7%. Cade nella famiglia
   navy della categoria (BeCorporation #153587, BeFirm #001946).

   Contratto palette (a11y, MISURATO — non stimato):
   ink su paper 9,59 · ink su surface 8,86 · ink-muted su paper 5,98 · brand su paper 11,21 ·
   brand-mid su paper 5,10 · accent-ink su paper 5,34 · accent-ink su surface 4,93 ·
   on-dark su brand 10,36 · on-dark-muted su brand 6,55 · accent-lt su brand 6,37.

   ⚠⚠ TRE REGOLE D'USO NON NEGOZIABILI — nascono da NUMERI, non da gusto:
   - --sage (#56A9DE, l'azzurro del marchio) NON e' MAI testo, su NESSUN fondo chiaro: 2,58 su carta,
     2,39 su superficie. E come CAMPO PIENO regge un solo colore di testo, --brand-dark (5,67):
     non --brand (4,34), non --ink (3,71), non il bianco (2,58).
   - --sage su bianco vale 2,58, cioe' SOTTO il 3:1 dei componenti non testuali: mai un controllo,
     un bordo portatore di significato o un grafico informativo in azzurro su carta. Solo campo largo
     decorativo, o adiacente al navy (4,34). Dove serve un campo chiaro che regga testo si usa
     --sage-light (ink 5,44 · brand 6,37 · brand-dark 8,33) o --sage-tint.
   - l'accento che porta TESTO su chiaro e' --accent-ink (5,34), MAI --accent (#B5714E, 3,86: e' la
     terracotta del template di riferimento, che come testo non passa AA). --accent e' superficie e segno.
   - un testo sopra una FOTO non e' coperto da questi rapporti: va misurato dal pixel reso. Per questo la
     testata porta il titolo su un PANNELLO pieno accanto alla foto, non sulla foto (hero SPLIT). */
:root {
  /* --- Colore (carta + grafite + navy istituzionale + azzurro di marca + terracotta) --- */
  --paper:      #FFFFFF;  /* carta: fondo dominante */
  --surface:    #F4F6FA;  /* grigio-azzurro freddissimo: sezioni alternate */
  --surface-2:  #E8EDF5;  /* superfici di riposo e placeholder */
  --ink:        #454545;  /* GRAFITE del marchio (la parola «GENIUS»): testo (9,59:1 su paper) */
  --ink-muted:  #5C6470;  /* grafite fredda: testo secondario SOLO su fondo chiaro (5,98:1) */
  --line:       #DCE3EC;  /* filetto: bordi e righe (non-testo) */
  --accent-ink: #9C5A38;  /* TERRACOTTA portata a testo su chiaro: occhielli, link (5,34:1) */
  --accent:     #B5714E;  /* terracotta del riferimento: superfici, filetti, segni — MAI testo (3,86) */
  --accent-dark:#7E4629;  /* terracotta profonda: hover di superficie, bottone (bianco sopra 7,51) */
  --accent-lt:  #95CAEB;  /* azzurro chiaro: porta TESTO su fondo navy (6,37) */
  --brand:      #1E3A6B;  /* NAVY istituzionale: campi pieni, pannello della testata, bottone primario */
  --brand-dark: #14284A;  /* navy profondo: hover, fondo del pie' */
  --brand-mid:  #436EB3;  /* BLU del marchio: l'unico blu che passa AA come testo su chiaro (5,10) */
  --sage:       #56A9DE;  /* AZZURRO del marchio: campo e segno — MAI testo (v. regole sopra) */
  --sage-light: #95CAEB;  /* azzurro chiaro: campo che REGGE testo (ink 5,44 · brand 6,37) */
  --sage-tint:  #E6F0F9;  /* tinta di marca: bande alterne (ink 8,31 · brand 9,72 · accent-ink 4,63) */
  --night:      #0F1D36;  /* navy quasi-nero: velo delle bande fotografiche */
  --on-dark:    #F4F6FA;  /* testo su fondi pieni scuri (10,36 sul navy · 13,55 sul navy profondo) */
  --on-dark-muted: #B9C7DC; /* testo secondario su fondo scuro (6,55 sul navy) */
  /* Velo delle bande fotografiche. ⚠⚠ `--scrim-deep` NON e' un valore estetico: e' CALCOLATO.
     Sulla banda scura il testo piu' debole e' l'occhiello in --accent-lt #95CAEB a 12px, che pretende
     4,5:1. Il velo si taratura sul caso peggiore possibile — una fotografia BIANCA — cosi regge
     QUALUNQUE foto porti il prossimo cliente: a .68 il fondo peggiore dava 3,32 (bocciato), a .80 si
     arriva a 5,06 e a .84 a 5,82. Scelto .84 per avere margine.
     ⚠ Il difetto era INVISIBILE ad axe (0 violazioni su 11 pagine): axe risolve il fondo sugli
     ANTENATI, non sui pixel resi, e sotto la fotografia vedeva il navy piatto. Si e' visto solo
     misurando il pixel piu' sfavorevole dietro ogni riga di testo.
     ⚠ E un velo tarato sulle foto di OGGI e' un difetto che esplode al secondo sito del verticale. */
  --scrim:      rgba(15,29,54,.42);
  --scrim-deep: rgba(15,29,54,.84);

  /* --- Superfici a GRADIENTE. Non ornamento: sono lo strato che da' profondita' a un sito piatto, ed e'
     il tratto piu' riconoscibile del linguaggio 2026. Restano dentro la famiglia della palette — nessun
     colore nuovo — e ogni gradiente parte e finisce su token gia' dichiarati, cosi' un preset che
     rimappa la palette li rimappa tutti insieme. --- */
  --grad-navy:    linear-gradient(145deg, var(--brand-dark) 0%, var(--brand) 55%, #24457C 100%);
  --grad-navy-x:  linear-gradient(100deg, var(--brand-dark) 0%, var(--brand) 62%, #24457C 100%);
  --grad-carta:   linear-gradient(180deg, #FFFFFF 0%, var(--surface) 100%);
  --grad-tint:    linear-gradient(160deg, var(--sage-tint) 0%, #F7FAFD 58%, #FFFFFF 100%);
  --grad-velo:    linear-gradient(180deg, rgba(30,58,107,0) 0%, rgba(30,58,107,.06) 100%);
  --grad-accento: linear-gradient(120deg, var(--accent-ink) 0%, var(--accent-dark) 100%);

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

  /* --- Tipografia: UNA famiglia, Instrument Sans (OFL self-hosted), display e corpo distinti da peso e
     corpo. Scelta su PROVINO con la copy vera alle misure vere, non su opinione.
     ⚠ Il provino ha prima verificato che i quattro candidati fossero DAVVERO caricati confrontando le
     larghezze rese (366 / 372,2 / 378 / 397px sulla stessa stringa a 44px/700): quattro valori distinti,
     nessun fallback al sans di sistema. Senza quella verifica il confronto sarebbe stato una finzione.
     ⚠ E il primo confronto era SBAGLIATO: la misura era in `ch`, che si risolve sul font dell'elemento,
     quindi ogni candidato riceveva una scatola di larghezza diversa. Rimisurato a larghezza FISSA:
     a 420px Instrument Sans e Onest danno 3 righe senza vedova, Schibsted e Sora 4 con vedova; a 480px
     e oltre i quattro sono IDENTICI, perche' li' la vedova e' della STRINGA, non del carattere.
     ⇒ e' la MISURA a decidere lo stacco: il display vive a ~420px (--display-measure).
     Deliberatamente NON accoppiato a Inter, che e' in 10 verticali su 38. --- */
  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Scala istituzionale. La nota di categoria misura sui 5 riferimenti: display sans bold con interlinea
     stretta, corpo piccolo e grigio (13-15px su 21-27px). Qui il corpo sale a 17/1.8: la copy del settore
     e' lunga e argomentativa, e a 15px non si legge. */
  --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.2rem, 1.02rem + 0.72vw, 1.55rem);  /* H3 */
  --text-xl:   clamp(1.6rem, 1.26rem + 1.5vw, 2.2rem);    /* H2 — titoli di sezione e page-head */
  --text-2xl:  clamp(1.85rem, 1.4rem + 1.85vw, 2.75rem);  /* display di sezione */
  --text-3xl:  clamp(2.1rem, 1.6rem + 1.95vw, 3.2rem);    /* display della testata */

  --lh-tight: 1.08;
  --lh-snug: 1.16;
  --lh-body: 1.8;
  --tracking-label: 0.16em;      /* misurato sui riferimenti di categoria */
  --tracking-display: -0.015em;  /* la grottesca 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);
  /* ⚠ Misura del display: e' QUESTA, non il carattere, a decidere dove spezza il titolo (v. provino).
     A 420px «Garanzia di tutela e di assistenza familiare e aziendale» esce 4+2+3, senza vedova. */
  --display-measure: 26ch;

  /* --- Forma: SQUADRATA ovunque (radius 0 in BeCorporation, BeCorporation2 e BeFirm) --- */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  /* Il raggio dei CAMPI si separa da quello dei bottoni: un progetto che scegliesse la pillola per i
     bottoni non vorrebbe una casella di testo a pillola. Il default rimanda a --radius. */
  --field-radius: var(--radius);
  --border: 1px solid var(--line);

  /* --- Leve di registro per-sito. Ogni default e' il comportamento del verticale: un progetto che non
     le ridichiara non cambia di un pixel. Il canale preset accetta solo token GIA' dichiarati. --- */
  --topbar-display: flex;             /* fascia di servizio con recapiti e social */
  --wordmark-logo: none;              /* marchio del cliente: `content: none` e' il GATE, non un vuoto */
  --wordmark-logo-content: none;
  --wordmark-logo-w: 0px;
  --wordmark-logo-h: 0px;
  --wordmark-name-display: inline;
  --header-cta-display: inline-flex;
  /* ⚠ Misure della navigazione TARATE SU SETTE VOCI, non su quattro. Misurato: a corpo 0,8rem,
     tracciatura 0,1em e passo 24px la testata chiedeva 1286px contro i 1200 disponibili — sforava di
     86px, e il risultato non era una nav su due righe ma marchio, voci E bottone tutti spezzati in due.
     Stringere corpo, tracciatura e passo e' l'unica leva che non toglie voci al menu. */
  --nav-size: 0.74rem;
  --nav-tracking: 0.04em;
  --nav-gap: 0.95rem;
  --fig-object-pos: 50% 50%;          /* un ritratto si inquadra in alto, un ambiente al centro */
  --page-figure-mt: 0px;
  --menu-fondo: 0;                    /* spazio in fondo al pannello mobile: dove c'e' la barra fissa */
  --prose-measure: 68ch;              /* misura di lettura dei capoversi */

  /* --- La TESTATA SPLIT: il segno del verticale. Pannello di testo su fondo tramato a sinistra,
     fotografia a META' CAMPO a destra. ⭐ E' il device che la nota di categoria indica per il materiale
     povero — «una foto a meta' campo regge con 1600x1066, una full-bleed no» — e il primo cliente ha
     SOLO fotografia stock generica: a meta' campo la fotografia smette di essere il soggetto. --- */
  --hero-split-cols: minmax(0, 0.46fr) minmax(0, 0.54fr);
  --hero-min-h: clamp(30rem, 44vw, 40rem);
  --hero-panel-bg: var(--paper);
  --hero-panel-pad: clamp(var(--space-6), 4vw, var(--space-9));
  --hero-media-ratio: auto;
  --hero-pad-top: var(--space-7);
  --hero-pad-b: var(--space-8);
  --hero-lead-w: 46ch;

  /* Tramatura diagonale: la texture di fondo dei pannelli chiari in BeCorporation. ⭐ Da' MATERIA senza
     chiedere una fotografia — che e' esattamente il problema di questo verticale. Spenta di default,
     accesa dal pattern della testata. */
  --trama-opacita: 0;
  --trama-colore: var(--brand);
  --trama-passo: 7px;

  /* Sporgenza del blocco pieno che scavalca il confine fra due bande: il secondo segno del verticale,
     preso da BeCorporation (la scheda bianca che galleggia sopra la fascia fotografica). */
  --overlap: clamp(1.5rem, 0.9rem + 2.2vw, 3rem);

  /* Rapporto delle figure. Il materiale del primo cliente e' tutto ORIZZONTALE (1920x1280 e simili):
     il default e' largo, e un preset puo' portarlo verticale per chi avesse scatti in piedi. */
  --fig-ratio: 4 / 3;
  --fig-ratio-wide: 3 / 2;

  /* Distanza fra bordo pagina e contenitore: cio' che un blocco recupera per andare a filo pagina.
     ⚠ CRESCE SENZA LIMITE con la finestra (a 2560px vale 680): chi la usa come padding di compenso DEVE
     sommarla 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. Lezione pagata su law_firm, dal CLIENTE. */
  --bleed: max(var(--gutter), (100vw - var(--container)) / 2);

  /* --- Ombra (sobria: l'istituzionale non gonfia) --- */
  --shadow-sm: 0 6px 18px rgba(15,29,54,.07);
  --shadow-md: 0 26px 54px -32px rgba(15,29,54,.38);

  --tile-gap: clamp(0.9rem, 0.45rem + 1.3vw, 1.5rem);
  --footer-cols: 1.3fr 1fr 1fr 1fr;   /* pie' a 4 colonne di link: la categoria li elenca per esteso */
  --footer-cols-2: 1.3fr 1fr;

  /* Altezza del cromo in testa (fascia di servizio + intestazione). ⚠ Va FISSATA in border-box, non
     dedotta dalle metriche del font: una misura fissata sopravvive al cambio di carattere. */
  --chrome-topbar: 0px;              /* la fascia di servizio non c'e' piu' */
  /* ⚠⚠ --chrome e' lo spazio che la testata FISSA toglie al flusso, e deve valere ESATTAMENTE la sua
     altezza resa. Misurato: la testata usciva 78px (76 interni + i 2px dei bordi della capsula) mentre
     il token diceva 76 — e su mobile 64 — quindi la prima banda scivolava sotto di 2px, di 14 sotto i
     900. L'altezza NON si deduce: si FISSA, e l'interno la deriva sottraendo i bordi, cosi' le due
     misure non possono piu' divergere. Lezione gia' pagata su law_firm. */
  --chrome-bordi: 2px;
  --chrome: calc(78px + var(--chrome-topbar));

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 240ms;
}
/* ⚠ Sotto la soglia del pannello a tendina il bottone della testata SPARISCE: a 390px sporgeva di 124px
   oltre il viewport, ed e' l'azione che la barra fissa in fondo porta gia'. Si spegne dal TOKEN, non con
   una media query su `.site-header__cta`: una media query non aggiunge specificita', e una regola
   `display:none` li' dentro perderebbe contro `.btn` dichiarata dopo — difetto gia' pagato su law_firm. */
/* ⚠ Niente override dell'altezza su mobile: la testata NON si accorcia (il bottone sparisce ma il
   marchio tiene la riga), e un --chrome piu' basso faceva scivolare la prima banda di 14px. */
@media (max-width: 899.98px) { :root { --header-cta-display: none; } }

@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }