/* tokens.css — design genome waste_recovery_plant. Impianto autorizzato di autodemolizione e recupero
   rifiuti. Categoria template «Aziende»; riferimento BeLogistics2 (BeCorporation è già di
   security_institute: due verticali della stessa categoria non possono somigliarsi). Da lì arrivano la
   testata SCURA col mezzo in movimento, la parte di titolo nell'accento e il taglio squadrato — nella
   categoria nessun riferimento istituzionale arrotonda.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   La palette NON viene da un catalogo. Il fondo è GRAFITE, non navy: il navy è dell'istituto di vigilanza,
   e qui il materiale è ferro. Il verde è MISURATO sul marchio vero del primo cliente (bucket dominanti
   #7BA657 e #86A858, estratti dalla scansione del suo Codice di Condotta, dove il marchio compare con la
   foglia). ⚠ È il verde di uno scanner, non un valore di marca dichiarato: resta una domanda al cliente.
   L'azzurro del sito precedente (#178BC1, fornitore ex Prismi) è scartato: non è del marchio.

   Contratto palette (a11y, MISURATO — non stimato):
   ink su paper 17,99 · ink su surface 16,26 · ink su surface-2 14,74 · ink su accent-tint 15,89 ·
   ink-muted su paper 7,01 · su surface 6,33 · su surface-2 5,74 · su accent-tint 6,19 ·
   on-dark su brand 15,69 · su brand-dark 18,50 · su brand-mid 12,50 · su accent-dark 7,13 ·
   on-dark-muted su brand 9,38 · su brand-dark 11,06 · su brand-mid 7,47 ·
   accent su brand 5,56 · su brand-dark 6,55 · brand su accent 5,56 ·
   accent-ink su paper 7,13 · su surface 6,44 · su surface-2 5,84 · su accent-tint 6,29 ·
   accent-lt su brand 8,75 · su brand-dark 10,32 · su brand-mid 6,98 ·
   line-strong su paper 3,45 (bordo di CONTROLLO: la soglia è 3,0, non 4,5).
   ⚠ --line è DECORATIVO (1,34 su paper) e non può fare da bordo a un campo di modulo: per quello esiste
   --line-strong. La distinzione non è estetica — WCAG 1.4.11 chiede 3,0 ai confini dei controlli.

   ⚠⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - --accent (il verde del marchio) è CHIARO: 2,82 su paper e 2,55 su surface. Su fondo chiaro è
     superficie, filetto e segno — e NIENTE di leggibile gli si posa sopra. Sopra --accent va solo
     --brand (5,56), mai il bianco (2,82). È l'errore che questo verticale non deve fare mai.
   - l'accento che porta TESTO su fondo chiaro è --accent-ink (7,13); su fondo scuro --accent-lt (8,75);
   - --ink-muted vale SOLO su fondo chiaro; su fondo scuro si usa --on-dark-muted;
   - ⚠ il FOCUS non può essere un colore solo: --accent-ink fa 7,13 su bianco ma 2,20 sulla grafite. Il
     token vale per le superfici chiare (la maggioranza) e viene RIBALTATO a --accent-lt in components.css
     su ogni superficie scura. Un anello di focus invisibile è un difetto di accessibilità, non un dettaglio.
   - un testo sopra una FOTO non è coperto da questi rapporti: va misurato DAL PIXEL renderizzato. Le
     fotografie di questo mestiere sono scure di per sé (piazzali, rottame, controluce): il velo si tara
     al ribasso e si verifica, non si alza per prudenza. */
:root {
  /* --- Colore (grafite industriale + il verde del marchio + neutri leggermente caldi) --- */
  --paper:      #FFFFFF;  /* fondo dominante */
  --surface:    #F2F4F0;  /* sezioni alternate: un grigio che tira appena al verde */
  --surface-2:  #E6EADF;  /* superfici di riposo e placeholder */
  --ink:        #14171A;  /* inchiostro: testo (17,99:1 su paper) */
  --ink-muted:  #525A62;  /* testo secondario SOLO su fondo chiaro (7,01:1) */
  --line:       #DCE0D8;  /* filetto: bordi e righe decorative (non-testo, non un bordo di controllo) */
  --line-strong:#848D7C;  /* filetto FUNZIONALE: bordo di campi e controlli (3,45:1 su paper — un bordo di
                             CONTROLLO deve passare 3,0, e il filetto decorativo --line fa 1,34) */
  --accent-ink: #446026;  /* verde portato a TESTO su chiaro: occhielli, link, bottone pieno (7,13:1) */
  --accent:     #7BA657;  /* VERDE DEL MARCHIO: superfici, filetti, segni. Porta solo --brand (5,56) */
  --accent-dark:#446026;  /* verde profondo: fondo del bottone primario, hover */
  --accent-lt:  #A9CD7D;  /* verde chiaro: testo e focus su fondo scuro (8,75 sulla grafite) */
  --accent-tint:#EDF3E4;  /* verde tint: fondo dei riquadri d'evidenza su chiaro */
  --brand:      #1E2428;  /* GRAFITE: barra istituzionale, bande piene, pannelli */
  --brand-dark: #101418;  /* grafite profonda: footer, hover */
  --brand-mid:  #2C353B;  /* grafite chiara: superfici secondarie e filetti sul fondo scuro */
  --night:      #080A0C;  /* quasi-nero: velo della fotografia */
  --on-dark:    #FFFFFF;  /* testo su fondi pieni scuri (15,69 sulla grafite · 18,50 sulla profonda) */
  --on-dark-muted: #C2CBBB; /* testo secondario su fondo scuro (9,38 sulla grafite) */
  /* Velo della fotografia. ⚠⚠ I valori NON sono di gusto: sono il risultato di una misura DAL PIXEL sul
     sito servito (testo nascosto, riquadro fotografato, percentile peggiore del fondo). Con .30→.66 il
     lead della testata misurava 3,81 e l'occhiello 2,13 — sotto AA — perché la fotografia del piazzale ha
     ampie zone di ruggine chiara. La coppia .42→.84 li riporta sopra soglia. Chi la alleggerisce deve
     RIMISURARE: nessun token dice se un testo sopra una foto è leggibile. */
  /* Componenti RGB del verde di marca: servono alle animazioni che modulano l'alfa (l'anello che pulsa
     sotto le icone social). Un token colore intero non si può usare dentro rgb(... / a). */
  --veil-rgb:   123 166 87;
  --scrim:      rgba(8,10,12,.30);
  --scrim-deep: rgba(8,10,12,.56);

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

  /* --- Tipografia: Archivo per il display, IBM Plex Sans per il testo, entrambi OFL self-hosted.
     Archivo è un grottesco industriale che regge i pesi alti senza impastare; IBM Plex Sans è la faccia
     tecnica giusta per il contenuto regolamentare, che qui è contenuto vero (numeri di iscrizione,
     categorie, scadenze) e non deve sembrare marketing.
     ⚠ Il display vive a 700/800, il testo a 400/500/600. tokensOf lancia se --font-display o --font-body
     mancano. --- */
  --font-display: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Scala tipografica. ⚠ Archivo NON è condensato: a parità di corpo occupa più larghezza di un
     condensato, quindi i gradi alti restano più bassi di quelli di security_institute. La copy reale del
     primo cliente è lunga («Fiducia , Rispetto , Credibilità e Soprattutto Serietà.»): la scala è misurata
     su quella, non su una copy demo corta. */
  --text-sm:   0.8125rem; /* occhielli e meta, maiuscoletto tracciato */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.06rem, 0.99rem + 0.36vw, 1.2rem);   /* lead */
  --text-lg:   clamp(1.24rem, 1.08rem + 0.66vw, 1.56rem);  /* H3 */
  --text-xl:   clamp(1.6rem, 1.28rem + 1.35vw, 2.2rem);    /* H2 — titoli di sezione */
  --text-2xl:  clamp(1.9rem, 1.48rem + 1.85vw, 2.8rem);    /* display di sezione */
  --text-3xl:  clamp(2.2rem, 1.62rem + 2.55vw, 3.6rem);    /* display della testata */

  --lh-tight: 1.05;
  --lh-snug: 1.12;
  --lh-body: 1.66;
  --tracking-label: 0.16em;    /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: -0.012em; /* un grottesco largo 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: 1240px;
  /* ⚠ La misura di lettura si mette sui PARAGRAFI, mai su un contenitore, su una riga di griglia o sulla
     piastra di un titolo: è così che nasce la colonna stretta con metà schermo bianco. E `ch` si risolve
     sul font del CONTENITORE, non su quello del testo reso. */
  --measure: 68ch;
  --container-narrow: 72ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem);

  /* --- Forma: SQUADRATA ovunque (raggio 0 in tutti i riferimenti della categoria) --- */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --border: 1px solid var(--line);

  /* 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: chi la usa come padding di compenso DEVE
     aggiungerla anche alla propria larghezza massima. */
  --bleed: max(var(--gutter), (100vw - var(--container)) / 2);

  /* --- Ombra (sobria: l'industriale non gonfia) --- */
  --shadow-sm: 0 6px 18px rgba(16,20,24,.10);
  --shadow-md: 0 26px 54px -32px rgba(16,20,24,.45);

  --tile-gap: clamp(0.75rem, 0.4rem + 1.1vw, 1.25rem);

  /* Altezza del «cromo» in testa alla pagina (barra di servizio + intestazione), ai suoi punti di rottura. */
  --chrome: 112px;
  --topbar-h: 36px;
  /* Altezza della barra CTA fissa su mobile: l'overlay del menu deve lasciarle spazio, altrimenti
     l'ultima voce finisce sotto. */
  --ctabar-h: 62px;

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