/* 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. --- */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --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);

  /* 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: 115px;

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