/* tokens.css — design genome law_firm. Studio legale associato: registro istituzionale su fondo chiaro
   caldo, con episodi di banda PIENA in cotto (testata, chiusura, footer) dove vive il marchio. Il taglio è
   squadrato ovunque — nella categoria «Avvocati» il raggio zero non è un dettaglio, È il registro.
   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 palazzo del primo cliente — il cotto dei
   pavimenti (#783808 dominante), l'ocra dell'affresco in nicchia, l'intonaco delle volte, il bruno delle
   travi. Cade nella stessa famiglia dell'inchiostro bruno del template di riferimento (Dictum).

   Contratto palette (a11y, MISURATO — non stimato):
   ink su paper 15,14 · ink su surface 13,38 · ink-muted su paper 7,65 · brand su paper 10,31 ·
   on-dark su brand 10,31 · on-dark su night 16,44 · accent-ink su paper 5,90 · accent-lt su brand 5,19.
   ⚠ REGOLE D'USO NON NEGOZIABILI (le prime due nascono da numeri, non da gusto):
   - --accent (ocra grezza) NON è MAI testo, su NESSUN fondo: 4,05 su chiaro, 2,54 sul cotto, 4,05 sul
     notte. È filetto, superficie, segno. E nulla di leggibile le si posa sopra.
   - l'accento che porta TESTO è --accent-ink su fondo chiaro (5,90) e --accent-lt su fondo scuro (5,19);
   - --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 su una TARGA piena, non sulla fotografia. */
:root {
  /* --- Colore (intonaco + travi + cotto di marca + ocra d'affresco) --- */
  --paper:      #F6F2EA;  /* intonaco delle volte: fondo dominante */
  --surface:    #EBE4D8;  /* crema più densa: sezioni alternate — TINT DI MARCA */
  --surface-2:  #E1D8C8;  /* superfici di riposo e placeholder */
  --ink:        #241B15;  /* bruno delle travi: testo (15,14:1 su paper) */
  --ink-muted:  #574A40;  /* bruno tenue: testo secondario SOLO su fondo chiaro (7,65:1) */
  --line:       #D8CFC0;  /* filetto: bordi e righe (non-testo) */
  --accent-ink: #8A4E1C;  /* ocra portata a TESTO su chiaro: occhielli, link, accenti (5,90:1) */
  --accent:     #A8672A;  /* OCRA dell'affresco: filetti, superfici, segni — MAI testo */
  --accent-dark:#7A4718;  /* ocra profonda: hover di superficie */
  --accent-lt:  #D9A468;  /* ocra chiara: l'unico accento che porta TESTO su fondo scuro (5,19 sul cotto) */
  --brand:      #5E2A1C;  /* COTTO di marca: blocchi pieni, targa della testata, bottone primario */
  --brand-dark: #3B1A11;  /* cotto profondo: hover del bottone, fondo del footer */
  --brand-mid:  #7A3A25;  /* cotto chiaro: superfici secondarie piene */
  --night:      #1A130F;  /* bruno-nero: velo della testata */
  --on-dark:    #F6F2EA;  /* testo su fondi pieni scuri (10,31 sul cotto · 16,44 sul notte) */
  --on-dark-muted: #D6C9B8; /* testo secondario su fondo scuro (7,08 sul cotto) */
  /* velo della testata: la coppia .38→.62 è MISURATA sulla foto reale, non stimata. Non serve ad annegare
     la fotografia — il contrasto del titolo lo dà la targa piena — ma a tenere unita la banda. */
  --scrim:      rgba(26,19,15,.38);
  --scrim-deep: rgba(26,19,15,.62);

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

  /* --- Tipografia: display serif EDITORIALE (Newsreader, con dimensioni ottiche vere) + testo sans
     istituzionale (Public Sans), entrambi OFL self-hosted.
     ⚠ Prima erano Lora + Inter: Lora perché è il serif del template di riferimento, cioè una scelta di
     FEDELTÀ e non di merito. Ma il riferimento si segue su struttura e gerarchia; la tipografia sta nel
     quarto in cui si deve MIGLIORARE il template. Lora è una faccia da testo di origine calligrafica,
     disegnata per la lettura lunga: a 52px di display non è nel suo mestiere, e l'accoppiata Lora+Inter
     è fra le più diffuse degli ultimi anni. Newsreader ha più contrasto, grazie affilate e una gabbia
     più stretta (342px contro 380 sulla stessa stringa a 52px); Public Sans tiene la chiarezza di Inter
     su etichette e moduli con un'aria istituzionale.
     ⚠ Il display vive a PESO 400: alle scale grandi il serif in 700 impasta le grazie (lezione già pagata
     sul serif di Pafundi). tokens.css deve definire --font-display e --font-body. --- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica istituzionale: salto display↔testo marcato (~3,5×), come nei template di categoria */
  --text-sm:   0.75rem;   /* occhielli e meta, maiuscoletto molto 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.25rem);   /* H2 — titoli di sezione e page-head */
  --text-2xl:  clamp(1.85rem, 1.38rem + 1.9vw, 2.9rem);   /* display di sezione */
  /* ⚠ Il display sta DENTRO la scala, non fuori: a 4,95rem il salto verso l'H2 valeva 2,20 mentre gli
     altri gradi stanno a ~1,45, e il titolo misurava 5,5vw — «alla vista troppo grosso», e i numeri
     davano ragione all'occhio. Un titolo forte lo è per contrasto e composizione, non per statura. */
  --text-3xl:  clamp(2.1rem, 1.55rem + 1.9vw, 3.4rem);   /* display della testata */

  --lh-tight: 1.1;
  --lh-snug: 1.16;
  --lh-body: 1.72;
  --tracking-label: 0.22em;   /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: -0.008em; /* il serif si stringe appena 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: SQUADRATA ovunque. Tutti e tre i template della categoria hanno radius 0 sui bottoni;
     è il segno che distingue l'istituzionale dal commerciale. --- */
  /* Leve di registro per-sito: il default e' il comportamento storico del verticale. */
  --topbar-display: flex;        /* fascia di servizio: alcuni studi non vogliono recapiti in testata */
  --hero-index-display: flex;    /* numerale editoriale della testata */
  --hero-pad-top: var(--space-7);
  --fig-object-pos: 50% 50%;     /* un ritratto va inquadrato in alto, un ambiente al centro */
  --worklike-offset: var(--space-5);
  --areas-fig-ratio: auto;       /* colonna della banda Aree: `auto` = si stira come sempre */
  --areas-fig-h: 100%;           /* va portato a `auto` insieme al rapporto, sennò l'altezza vince */
  --areas-fig-min: 340px;
  --areas-fig-min-wide: 112%;   /* la stessa figura ha tre minimi diversi per fascia: token distinti */
  --areas-fig-min-xl: 118%;
  --areas-fig-mt: -6%;
  --hero-pad-b: var(--space-8);
  --hero-mark-display: block;
  --hero-plate-w: 52rem;
  --hero-plate-bleed: var(--bleed);
  --hero-lead-w: 54ch;
  --hero-plate-pad-l: var(--bleed);
  --fig-zoom-pe: auto;
  --fig-zoom-cursor: zoom-in;
  --hero-min-h: calc(100vh - var(--chrome));
  --hero-justify: flex-end;
  --footer-cols: 1.3fr 1fr 1fr;
  --footer-cols-2: 1.3fr 1fr;
  --contact-fig-h: clamp(230px, 34vw, 420px);
  --trama-opacita: 0;            /* trama geometrica di riempimento: spenta finché non la si accende */
  --trama-colore: currentColor;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  /* Il raggio dei CAMPI si separa da quello dei bottoni: un progetto che sceglie la pillola per i
     bottoni non vuole una casella di testo a pillola, che non legge come moderna ma come sbagliata.
     Il default rimanda a --radius, quindi chi non lo dichiara non cambia di un pixel. */
  --field-radius: var(--radius);

  /* --- Strato atmosferico, geometria e flusso della pagina Aree ---------------
     ⚠ Ogni token qui sotto vale il comportamento STORICO: sono tutti no-op
     (`none`, `0`, `transparent`, `auto`, o il valore che la regola aveva
     cablato). Servono a rendere governabili da preset cose che prima erano
     costanti nel foglio; un progetto che non li ridichiara rende come prima.
     Il canale preset accetta solo token GIA' dichiarati: senza queste righe un
     preset che li nomina viene rifiutato, ed e' la ragione per cui esistono. */
  --veil-1: rgba(26,19,15,.58);   /* velo della testata: era cablato bruno */
  --veil-2: rgba(26,19,15,.12);
  --veil-3: rgba(26,19,15,.22);
  --veil-4: rgba(26,19,15,.42);
  --veil-0: rgba(26,19,15,0);
  --grad-deep: none;              /* sfumature di banda: spente */
  --grad-soft: none;
  --grad-glow: none;
  --grad-head: none;
  --grad-panel: none;
  --grad-form: none;
  --grad-cta: none;
  --grad-body: none;
  --body-bg-hero: var(--paper);        /* fondo del body sulla home: serve solo ad axe */
  --header-bg-top: var(--night);       /* intestazione in cima: piena come sempre */
  --header-bg-scrolled: var(--night);  /* intestazione dopo lo scorrimento */
  --header-border-top: rgba(246,242,234,.14);
  --header-border-scrolled: rgba(246,242,234,.14);
  --topbar-bg-top: var(--brand);
  --tl-bg: transparent;                /* voci della linea del tempo: testo nudo */
  --tl-radius: 0;
  --tl-pad: var(--space-7) 0 0 0;
  --tl-border: 0 solid transparent;
  --tl-marker-x: 0;
  --tl-marker-y: 0;
  --tl-rule-y: 7px;
  --tl-rule-right: calc(-1 * clamp(var(--space-5), 3vw, var(--space-7)));
  --tl-rule-right-last: 0;
  --header-dur: var(--dur);
  --prose-bg: transparent;
  --prose-radius: 0;
  --prose-pad: 0;
  --deco-op: 0;                   /* figure geometriche: spente */
  --deco-colore: currentColor;
  --deco-num-op: 0;               /* numerale d'area accanto al titolo */
  --spina-op: 0;                  /* spina della colonna fotografica */
  --spina-colore: currentColor;
  --spina-x: 50%;
  --area-row-bg: transparent;     /* schede della pagina Aree: testo nudo */
  --area-row-bg-alt: transparent;
  --area-row-bg-last: transparent;
  --area-row-radius: 0;
  --area-row-pad: 0 0 var(--space-7) 0;
  --area-row-pad-last: 0;
  --studio-body-bg: transparent;  /* pannelli di sezione */
  --studio-body-radius: 0;
  --studio-body-pad: 0;
  --item-bg: transparent;
  --item-radius: 0;
  --item-pad: 0;
  /* Geometria della pagina Aree: i default sono le misure storiche del foglio. */
  --areas-page-cols: minmax(0, 0.34fr) minmax(0, 0.66fr);
  --areas-page-cols-xl: minmax(0, 0.4fr) minmax(0, 0.6fr);
  --areas-page-fig-ratio: var(--fig-ratio);
  --areas-page-fig-ratio-xl: var(--fig-ratio-wide);
  --areas-page-gap: clamp(var(--space-8), 9vw, var(--space-10));
  /* Flusso a zig-zag: `grid` = le due colonne separate di sempre; le
     collocazioni restano `auto`, cioe' nessuna imposizione. */
  --aree-gallery-display: grid;
  --aree-list-display: grid;
  --aree-row-gap: 0;
  --aree-align: start;
  --f1c: auto; --f1r: auto; --f2c: auto; --f2r: auto;
  --f3c: auto; --f3r: auto; --f4c: auto; --f4r: auto;
  --a1c: auto; --a1r: auto; --a2c: auto; --a2r: auto;
  --a3c: auto; --a3r: auto; --a4c: auto; --a4r: auto;
  --a5c: auto; --a5r: auto; --a6c: auto; --a6r: auto;
  --border: 1px solid var(--line);

  /* sporgenza della targa piena che scavalca la fotografia: è IL segno del verticale */
  --overlap: clamp(1.5rem, 0.9rem + 2.2vw, 3rem);

  /* Rapporto delle colonne fotografiche (lo studio, le aree). Il verticale nasce attorno a fotografia
     VERTICALE di ambienti, perché è ciò che il primo cliente aveva; ma un fondo fotografico fatto di soli
     scatti orizzontali, ritagliato a 4/5, perde metà dell'inquadratura e decapita il soggetto. È un valore,
     non una struttura: vive qui perché un preset di stile possa portarlo in orizzontale per il sito che ha
     solo scatti larghi, lasciando invariato chi non lo dichiara. */
  --fig-ratio: 3 / 4;        /* base */
  --fig-ratio-wide: 4 / 5;   /* da 861px in su */

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

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

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

  /* Altezza del «cromo» in testa alla pagina (fascia di servizio + intestazione): la testata
     cinematografica la sottrae per combaciare ESATTAMENTE con la finestra residua. Senza, i suoi segni
     (indice, freccia, indicatore di scorrimento) finiscono sotto la piega o dietro l'header — misurato:
     la testata partiva a y=115 e sforava di 115px. I tre valori sono le tre altezze reali dell'header. */
  --chrome-topbar: 34px;   /* contributo della fascia di servizio: 0 se spenta */
  --chrome: calc(81px + var(--chrome-topbar));

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