/* tokens.css — design genome building_design_studio (studio tecnico di progettazione edilizia).
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   Il NAVY non e' una scelta di gusto: e' il colore del marchio del primo cliente, MISURATO sui pixel del
   logo (#1A186C). L'OCRA e' la scelta di design che porta il calore da cantiere che il blu non ha: la nota
   di categoria «Architetti/imprese edili» prescrive UN accento saturo usato con decisione, e avverte che
   senza di esso il sito esce corretto ma anonimo.

   ⚠⚠ VINCOLO GENERATIVO DEL VERTICALE — da qui discende quasi tutto il resto. Uno studio tecnico vende
   COMPETENZA, non merce: il materiale e' fatto di prosa lunga e discorsiva e di pochissime fotografie, per
   lo piu' di formato medio. Il carattere quindi NON puo' stare nella fotografia: sta nei CAMPI DI COLORE
   PIENI che CONTENGONO la copy (dispositivo firma di BeBuilder2) e nella tipografia. Ogni sezione deve
   reggere anche a foto assente.

   ⚠⚠ REGOLA DI COMPOSIZIONE NON NEGOZIABILE (regola owner, difetto ricorrente): una sezione SENZA foto
   cambia TELAIO, non solo contenuto. Nessuna griglia a due colonne resta a due colonne quando il secondo
   figlio non c'e': ogni griglia di questo verticale ha la REGOLA DEL FIGLIO UNICO (:only-child) che la
   riporta a colonna piena. La misura di lettura sta sui PARAGRAFI, mai sul contenitore o sulla riga di
   griglia. Si verifica a >=1920px, dove la meta' vuota si vede.

   Contratto palette (a11y, CALCOLATO — non stimato; da riverificare dal DOM prima della sanzione):
   ink su paper 17,60 · su surface 16,02 · su surface-2 14,52 · su accent-tint 16,40 ·
   ink-muted su paper 8,19 · su surface 7,45 · su accent-tint 7,63 ·
   accent-ink su paper 5,01 · su surface 4,56 · su accent-tint 4,67 ·
   accent-dark su paper 7,56 · su surface 6,88 ·
   on-dark su brand 13,62 · su brand-dark 15,97 · su brand-mid 10,72 ·
   on-dark-muted su brand 7,88 · su brand-dark 9,24 · su brand-mid 6,21 ·
   accent-lt su brand 8,99 · su brand-dark 10,54 · su brand-mid 7,08 ·
   accent su brand 7,10 · su brand-dark 8,32 · su brand-mid 5,59 ·
   ink su accent 8,28 · ink su accent-lt 10,48.

   ⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - --accent (ocra piena) NON e' MAI testo su fondo CHIARO: 2,13 su paper. Su chiaro e' filetto,
     superficie, segno — e nulla di leggibile gli si posa sopra.
   - --accent-lt NON e' MAI testo su fondo chiaro (1,68 su paper): esiste solo per i fondi navy.
   - --accent-ink e' l'accento quando e' TESTO su chiaro; su fondo NAVY sarebbe illeggibile: li' l'accento
     testuale e' --accent-lt.
   - su un campo OCRA il testo e' --ink (8,28), MAI bianco (2,13). Vale per bottoni e tessere piene.
   - --ink-muted vale SOLO su fondo chiaro; su fondo navy il secondario e' --on-dark-muted.
   - ⚠ il FOCUS non puo' essere un colore solo: --accent-ink e' leggibile su chiaro ma non sul navy. Il
     token vale per le superfici chiare (la maggioranza) e viene RIBALTATO in base.css su ogni superficie
     scura. Un anello di focus invisibile e' un difetto di accessibilita', non un dettaglio.
   - un testo sopra una FOTO non e' coperto da questi rapporti. In questo verticale il problema NON si
     pone per costruzione: il titolo sta sempre su un CAMPO PIENO accanto alla fotografia, mai sopra di
     essa. E' anche la ragione per cui non serve alcun velo per rendere leggibile una testata. */
:root {
  /* --- Colore (navy di marchio + ocra da cantiere + neutri freddi) --- */
  --paper:      #FFFFFF;  /* fondo dominante */
  --surface:    #F3F4F8;  /* sezioni alternate, ghiaccio appena azzurrato */
  --surface-2:  #E7E9F1;  /* superfici di riposo e placeholder */
  --ink:        #16191F;  /* inchiostro: testo (17,60:1 su paper) */
  --ink-muted:  #4A4F5C;  /* testo secondario SOLO su fondo chiaro (8,19:1) */
  --line:       #DDE0E9;  /* filetto: bordi e righe (non-testo) */
  --accent-ink: #B4531A;  /* ocra portata a TESTO su chiaro: occhielli, link (5,01:1) */
  --accent:     #F0A202;  /* OCRA: filetti, superfici, segni, fondo dei bottoni. MAI testo su chiaro. */
  --accent-dark:#8A3E12;  /* ocra profonda: hover, testo su chiaro ad alto contrasto (7,56) */
  --accent-lt:  #F7BF4A;  /* ocra chiara: testo su fondo navy (8,99 sul brand) */
  --accent-tint:#FEF6E8;  /* ocra tint: fondo dei riquadri d'evidenza su chiaro */
  --brand:      #1A186C;  /* NAVY DEL MARCHIO, misurato sul logo: bande piene, campo che porta la copy */
  --brand-dark: #121143;  /* navy profondo: footer, hover del bottone */
  --brand-mid:  #2B2889;  /* navy chiaro: superfici secondarie, filetti su scuro */
  --night:      #0D0C2E;  /* quasi-nero navy: velo della fotografia */
  --on-dark:    #F2F3F8;  /* testo su fondi pieni navy (13,62 sul brand · 15,97 sul profondo) */
  --on-dark-muted: #B7BAD2; /* testo secondario su fondo navy (7,88 sul brand) */
  /* velo della fotografia: qui serve solo a LEGARE la striscia al campo di colore accanto, mai a rendere
     leggibile un testo — nessun testo di questo verticale sta sopra una foto. */
  --scrim:      rgba(13,12,46,.22);
  --scrim-deep: rgba(13,12,46,.52);

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

  /* --- Tipografia: Archivo per il display, Inter per il testo, entrambi OFL self-hosted.
     Archivo e' una grottesca a tagli PIENI: alle scale grandi tiene il peso di un titolo appoggiato dentro
     un campo di colore, che e' il dispositivo firma del verticale. Nessun altro verticale della flotta la
     usa — il verticale nasce gia' distinguibile dai fratelli.
     Inter regge la prosa lunga a 17px senza affaticare, ed e' il contenuto piu' abbondante di questo
     mestiere.
     ⚠ Il display vive a PESO 600/700; il testo a 400/500/600.
     ⚠ tokens.css DEVE definire --font-display e --font-body (tokensOf lancia se un token manca). --- */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Scala tipografica. ⚠ I gradi alti sono CAPPATI con clamp() (regola 6): la copy reale del cliente e'
     molto piu' lunga di quella del demo, e un display senza tetto produce titoli da 5 righe.
     ⚠ Il corpo sta a 17px: i template della categoria scendono a 13–15px ed e' troppo piccolo — e' nel
     «cosa migliorare» della nota di categoria. */
  --text-sm:   0.8125rem; /* occhielli e meta, maiuscoletto tracciato */
  --text-base: 1.125rem;  /* 18 corpo: sotto i 18px un testo lungo su riga piena stanca */
  --text-md:   clamp(1.14rem, 1.04rem + 0.44vw, 1.34rem);  /* lead */
  --text-lg:   clamp(1.32rem, 1.14rem + 0.76vw, 1.72rem);  /* H3 */
  --text-xl:   clamp(1.85rem, 1.4rem + 1.9vw, 2.8rem);     /* H2 — titoli di sezione */
  --text-2xl:  clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);      /* display di sezione */
  --text-3xl:  clamp(2.7rem, 1.9rem + 3.6vw, 5rem);        /* display della testata */
  /* l'elenco delle competenze: leggermente sotto il titolo di sezione, sopra il corpo */
  --text-index: clamp(1.02rem, 0.96rem + 0.3vw, 1.16rem);

  /* ⚠ Alle scale grandi l'interlinea si STRINGE e il tracciamento si CHIUDE: e' cio' che distingue un
     titolo del 2026 da uno del 2012, molto piu' della famiglia scelta. Un display da 5rem con
     interlinea 1.08 e tracking 0 legge slegato e datato. */
  --lh-tight: 0.94;
  --lh-snug: 1.02;
  --lh-body: 1.62;
  --tracking-label: 0.16em;     /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: -0.032em; /* la grottesca alle scale grandi vuole una stretta decisa */

  /* --- 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.5rem, 2.2rem + 4vw, 6.5rem);

  /* --- Layout --- */
  --container: 1200px;
  /* ⚠⚠ REGOLA OWNER (2026-09-10, seconda formulazione, piu' stretta della prima): i testi normali — non i
     titoli — NON si cappano MAI. Devono prendere tutta l'area e andare a capo DA SOLI: mai una colonna di
     testo appoggiata a sinistra con il resto della banda bianco. Il cap a 68ch produceva esattamente
     quello, e la prima correzione aveva sistemato la COPERTURA della sezione lasciando pero' cappati i
     paragrafi dentro di essa.
     I due token restano perche' li usano ancora le superfici STRETTE per costruzione (la scheda dei
     recapiti, la colonna del modulo), dove la larghezza la detta il contenitore e non un cap. */
  --measure: 68ch;
  --measure-wide: 78ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem);

  /* --- Forma: SQUADRATA. Nella categoria i riferimenti architettonici (BeArchitect6, BeEco3, BeBuilder2)
     hanno tutti raggio 0, e un disegno tecnico e' fatto di angoli retti. --- */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --border: 1px solid var(--line);

  /* Distanza fra il bordo della pagina e il contenitore: e' cio' che un blocco deve recuperare per
     arrivare a filo pagina. ⚠ CRESCE SENZA LIMITE con la finestra (a 2560px vale 660): 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: quasi assente. Qui la profondita' e' data dallo SFALSAMENTO dei campi di colore, non
     dall'ombra portata (dispositivo di BeRepair3/BeBuilder2). --- */
  --shadow-sm: 0 4px 14px rgba(13,12,46,.06);
  --shadow-md: 0 24px 50px -34px rgba(13,12,46,.34);

  /* --- IL BLOCCO: il segno del verticale. Il campo di colore pieno che CONTIENE la copy e scavalca la
     striscia fotografica accanto. Il valore e' di quanto la scavalca. --- */
  --block-overlap: clamp(0px, -2rem + 4vw, 3.5rem);
  --block-pad: clamp(1.5rem, 1rem + 2.6vw, 3.25rem);

  /* Altezza del «cromo» in testa alla pagina: serve a chi deve scavalcarlo (ancore, testata alta). */
  --chrome: 88px;

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