/* tokens.css — design genome cleaning_services. Impresa di pulizie e servizi ambientali: registro
   istituzionale (la committenza è fatta anche di ASP, comuni e scuole) con il verde del marchio come
   unica famiglia cromatica e una testata NERA che regge la navigazione. Taglio squadrato ovunque: nella
   categoria «Aziende» i riferimenti (BeCorporation, BeCorporation2, BeFirm) hanno tutti raggio 0, ed è il
   segno che separa l'ente dal commerciale.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   Il verde NON viene da un catalogo: è MISURATO sui pixel del marchio del primo cliente (dominante
   #287850 sul lettering corsivo e sul quadrifoglio). Il nero della testata è una richiesta esplicita del
   cliente, e cade nella famiglia dei riferimenti di categoria, che usano tutti una barra di navigazione a
   CAMPO PIENO invece che trasparente.

   Contratto palette (a11y, MISURATO — non stimato):
   ink su paper 17,87 · ink su surface 16,12 · ink su tint 14,91 · ink-muted su paper 7,76 ·
   ink-muted su surface 7,00 · brand-text su paper 7,54 · brand-text su surface 6,80 ·
   brand-text su tint 6,29 · on-dark su brand 5,39 · on-dark su brand-dark 8,63 · on-dark su night 18,68 ·
   on-dark-muted su brand 3,49 · on-dark-muted su night 12,08 · brand-soft su night 7,42 ·
   brand su night 3,46 · ink su line 12,89 · on-dark su forest 14,61 · on-dark su forest-2 11,60 ·
   on-dark-muted su forest 9,45 · brand-soft su forest 5,81 · brand su forest 2,71. Ricalcolati da local_docs/silva-work/palette.mjs, che LEGGE
   questo file: un numero scritto qui e non derivato è un difetto, non un dettaglio.
   ⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - sul verde pieno --brand va il BIANCO (5,39 = AA per il testo), MAI --ink (3,31: solo UI e grandi);
   - il verde che porta TESTO su fondo chiaro è --brand-text (7,54), mai --brand;
   - --ink-muted vale SOLO su fondo chiaro; su verde pieno il secondario è --on-dark-muted (3,49 = basta
     per il testo GRANDE e la UI, NON per il corpo: sul verde il corpo resta bianco pieno), mentre su nero
     lo stesso token è comodo (12,08);
   - --brand su --night fa 3,46: sulla testata nera il verde è superficie, filetto e testo GRANDE, mai
     corpo. Un'etichetta piccola in verde sul nero sarebbe illeggibile;
   - ⚠ sul VERDE PROFONDO --brand scende a 2,71: lì anche i filetti passano a --brand-soft (5,81), che è
     l'unico verde che si legge su quel fondo;
   - il FOCUS non è un colore solo: --brand-text fa 7,54 sul bianco ma 2,20 sul verde pieno. Il token vale
     per le superfici chiare e viene RIBALTATO in components.css su ogni superficie verde o nera;
   - un testo sopra una FOTO non è coperto da questi rapporti: per questo la testata porta il titolo su un
     PANNELLO pieno accanto al mosaico, non sopra una fotografia. */
:root {
  /* --- Colore (verde del marchio + neutri caldi di grigio-verde) --- */
  --paper:      #FFFFFF;  /* fondo dominante */
  --surface:    #F1F4F1;  /* sezioni alternate */
  --surface-2:  #E7ECE8;  /* superfici di riposo, placeholder */
  --tint:       #E3EDE6;  /* tint di marca: tessere chiare del mosaico, riquadri d'evidenza */
  --ink:        #14181A;  /* inchiostro: testo (17,87:1 su paper) */
  --ink-muted:  #4A5550;  /* testo secondario SOLO su fondo chiaro (7,76:1) */
  --line:       #D5DDD7;  /* filetto: bordi e righe (non-testo) */
  --brand:      #287850;  /* VERDE di marca: campi pieni, tessere, bottone primario (bianco sopra 5,39) */
  --brand-dark: #1B5637;  /* verde profondo: hover, fondi pieni più fermi (bianco sopra 8,63) */
  --brand-text: #186040;  /* verde portato a TESTO su chiaro: occhielli, link (7,54:1) */
  --brand-soft: #6FB18C;  /* verde chiaro: filetti, segni e testo su fondo NERO (7,42 sul night) */
  /* ⚠ --accent esiste in TUTTI i verticali: è il token su cui le topologie condivise prendono il colore
     dal verticale, e il gate `topology` lavora sull'INTERSEZIONE dei token di tutti. Qui l'accento È il
     verde del marchio: il cliente ha chiesto verde, bianco e nero, e un quarto colore non si inventa. */
  --accent:     #287850;
  --night:      #101312;  /* NERO: SOLO la testata e la barra fissa mobile — è una richiesta del cliente */
  --night-2:    #1B211E;  /* nero rialzato, per gli stessi due usi */
  /* ⚠ Le bande PROFONDE del contenuto non sono nere ma VERDE-NERO: un'impresa di pulizie e giardinaggio
     letta in nero pieno sembra un'altra cosa. Il nero resta dov'è stato chiesto (la testata), il resto
     della pagina è verde e bianco come il marchio. */
  --forest:     #102E23;  /* verde profondissimo: bande scure del contenuto, piè di pagina */
  --forest-2:   #17402F;  /* verde profondo rialzato: tessere dentro le bande scure */
  --on-dark:    #FFFFFF;  /* testo su fondi pieni scuri */
  --on-dark-muted: #C6D3CB; /* secondario su fondo scuro (12,08 sul night · 3,49 sul verde) */
  /* velo della fotografia: serve a legare foto e campo di colore, non ad annegare lo scatto — il
     contrasto dei titoli è STRUTTURALE (pannello pieno), non affidato al fotogramma. */
  --scrim:      rgba(16,19,18,.30);
  --scrim-deep: rgba(16,19,18,.62);

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

  /* --- Tipografia: UNA famiglia, Plus Jakarta Sans (OFL self-hosted), su due ruoli. È un grottesco
     geometrico-umanista: la geometria dialoga col mosaico di quadrati del riferimento di categoria,
     l'umanesimo tiene lontano il registro «software house». Display a 800, testo a 400/500/600.
     ⚠ Il display NON è condensato: i gradi alti restano più bassi di un verticale a font stretto, perché
     qui i titoli del mestiere sono lunghi («Disinfestazioni, derattizzazioni e interventi ambientali»).
     tokens.css deve definire --font-display e --font-body (tokensOf lancia se un token manca). --- */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica: rapporto ~1,28 fra i gradi. Un titolo è forte per contrasto e peso, non per statura. */
  --text-sm:   0.8125rem;                                   /* occhielli, meta, etichette */
  --text-base: 1.0625rem;                                   /* 17 corpo */
  --text-md:   clamp(1.06rem, 1rem + 0.34vw, 1.2rem);       /* lead */
  --text-lg:   clamp(1.22rem, 1.12rem + 0.42vw, 1.44rem);   /* H3 */
  --text-xl:   clamp(1.58rem, 1.34rem + 1.05vw, 2.28rem);   /* H2 */
  --text-2xl:  clamp(1.9rem, 1.5rem + 1.7vw, 2.75rem);      /* titoli di apertura */
  /* ⚠ Il grado massimo è tarato sul titolo REALE del cliente, non su una copy di prova: a 3,95rem
     «Impresa di pulizie affidabile e professionale a Canicattini Bagni» andava a QUATTRO righe con
     una spezzatura sgraziata. È la lezione della size giusta sul testo del demo e sbagliata sul vero. */
  --text-3xl:  clamp(2.25rem, 1.68rem + 2.4vw, 3.45rem);   /* H1 della testata */
  --text-num:  clamp(2.6rem, 2rem + 2.4vw, 3.6rem);         /* numerali dei passi */

  --lh-body: 1.65;
  --lh-snug: 1.18;
  --lh-tight: 1.06;
  --tracking-display: -0.021em;   /* il geometrico chiede un filo di stretta ai gradi alti */
  --tracking-label: 0.15em;

  /* --- Spazio: scala unica, usata anche dalle griglie --- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;    --space-8: 4.5rem;
  --space-9: 6.5rem;  --space-10: 9rem;

  --gutter: clamp(1.15rem, 0.6rem + 2.2vw, 2.6rem);
  --container: 1240px;             /* il mosaico vuole tre colonne piene */
  --container-narrow: 760px;
  --section-y: clamp(3.6rem, 2.2rem + 4.6vw, 7rem);
  /* altezza di riga della griglia dei lavori: la usano SIA `grid-auto-rows` SIA la tessera che scavalca,
     che perde lo stiramento e senza un'altezza dichiarata prenderebbe quella della propria fotografia —
     tre volte le sorelle, e la griglia si sfalda. UN valore, due consumatori. */
  --work-row: clamp(178px, 14.4vw, 258px);

  /* --- Segno: raggio ZERO, filetti sottili, ombre appena percettibili --- */
  --radius: 0px;
  --radius-lg: 0px;               /* anche i contenitori grandi: la categoria non arrotonda nulla */
  --border: 1px solid var(--line);
  --shadow-1: 0 1px 2px rgba(16,19,18,.05), 0 8px 24px rgba(16,19,18,.06);
  --shadow-2: 0 2px 6px rgba(16,19,18,.08), 0 22px 48px rgba(16,19,18,.11);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* altezza della testata: serve allo scroll-margin delle ancore (sito a pagina unica) */
  --header-h: 84px;
  --header-h-shrunk: 64px;
}

@media (max-width: 900px) {
  :root { --header-h: 68px; --header-h-shrunk: 60px; }
}