/* tokens.css — design genome building_metalwork. Produttore e rivenditore di manufatti metallici per
   l'edilizia (grigliati e chiusini in pressofusione, sigilli portapavimento, porte in lamiera zincata,
   sportelli e cassette per contatori).

   IL SEGNO DEL VERTICALE: il terreno della pagina è NERO PIENO perché è il fondo su cui questo mestiere
   fotografa. In un catalogo di manufatti metallici lo scatto di posa si fa su fondale nero: il pezzo è
   chiaro, opaco, tutto spigoli, e su nero si stacca senza bisogno di cornice. Mettere quelle foto su una
   carta chiara significa disegnare 23 rettangoli neri dentro altrettante tessere bianche.
   ⚠ Misurato sul materiale del primo cliente: il fondo dei 23 scatti è #000000 esatto su TUTTO il
   perimetro di TUTTI e 23 (non solo agli angoli: il primo controllo campionava gli angoli e sarebbe
   passato anche su una foto con una vignettatura grigia al centro). Da qui `--paper: #000000` e non un
   near-black: con #121212 ogni foto disegnerebbe il proprio riquadro.
   ⭐ Corollario sfruttato dai componenti: su un terreno nero pieno il riempimento di `object-fit: contain`
   è INVISIBILE, quindi ritratti e panorami stanno nella stessa cella senza che nessuno venga tagliato.

   ⓘ Le quattro icone di categoria del cliente sono raster dentro un guscio SVG: come <img> non
   erediterebbero currentColor, ma usate come `mask-image` la maschera prende il canale alfa e il colore
   lo dà il background — quindi sono ricolorabili, e non serve spedirne una copia per colore.

   ⚠ Il vocabolario dei ruoli palette è CHIUSO e obbligatorio (schemas/ir.schema.json): i nomi vanno letti
   PER FUNZIONE, non per colore. Qui `paper` è il nero del terreno e `ink` è il bianco del testo — come in
   workshop_supplier, l'altro verticale a fondo scuro. La famiglia `sage*` porta la CARTA CHIARA, cioè la
   banda di lettura: la prosa lunga non si legge su nero.

   CONTRATTO PALETTE — MISURATO, 12 coppie, prima di scrivere una riga di componenti:
     bianco su paper 21,0 · ink-muted su paper 8,83 · bianco su surface 18,42 · ink-muted su surface 7,75
     bianco su brand 17,04 · accent su paper 4,79 · accent-dark col bianco 6,17
     ink-on-light su sage 16,46 · ink-muted-on-light su sage 6,50 · accent-ink su sage 4,90
     nero su accent 4,79 · focus su paper 4,79 e su sage 3,89

   ⚠⚠ I DUE DIVIETI, e nascono dai numeri:
   1. MAI bianco su --accent: fa 4,39, cioè SOTTO 4,5 — in tutti e due i versi (è lo stesso rosso in
      entrambi). Il bottone rosso porta TESTO NERO (4,79), che è anche il marchio del cliente (profilo
      nero + fiamma rossa). Se serve il bianco, la superficie è --accent-dark (6,17).
      È lo stesso vincolo di workshop_supplier sull'arancione e di language_school sul rosso di marca.
   2. Un pannello NON si distingue per riempimento: --surface contro --paper fa 1,14. Sul nero pieno la
      separazione la fanno i FILETTI e lo spazio, mai i fondi. È anche il dispositivo del riferimento di
      categoria (BeArchitect6), quindi il vincolo e la forma coincidono.
   ⚠ Un testo sopra una FOTO non è coperto da nessuno di questi rapporti: va misurato dal pixel reso, con
   ogni slide congelata a turno. Per questo l'occhiello dell'hero è una TARGA opaca in --accent con testo
   nero e non testo colorato: sopra la foto l'accento scendeva a 2,40 anche con lo scrim. */
:root {
  /* --- Colore. Il rosso è quello del sito del cliente (#DD3D31, campionato dal DOM) ed è lo stesso
     delle sue quattro icone di categoria; il marchio porta un rosso più saturo (#F81010) che resta
     nel logo e non entra nell'interfaccia. --- */
  --paper:      #000000;  /* TERRENO: identico al fondo degli scatti di prodotto */
  --surface:    #141414;  /* pannello sollevato (⚠ 1,14 sul terreno: separa il FILETTO, non il fondo) */
  --surface-2:  #1C1C1C;  /* riga di catalogo, campo di modulo */
  --brand:      #1C1C1C;  /* banda intermedia sul nero (bianco 17,04) */
  --brand-mid:  #232323;  /* hover della banda intermedia */
  --brand-dark: #000000;  /* testata e piè: nero pieno, continuo col terreno */
  --ink:        #FFFFFF;  /* testo sul terreno (21,0) */
  --ink-muted:  #A8A8A8;  /* secondario sul terreno (8,83) e sul pannello (7,75) */
  --line:       #2A2A2A;  /* filetto sul nero: decorativo, è ciò che separa i blocchi */
  --accent:     #DD3D31;  /* rosso di marca: SUPERFICIE, e testo SOLO sul nero (4,79). Mai col bianco. */
  --accent-dark:#B82B20;  /* rosso profondo: la superficie che porta il bianco (6,17) */
  --accent-ink: #C62D22;  /* rosso come TESTO sulla carta chiara (4,90) */
  --on-dark:    #FFFFFF;  /* testo sulle bande piene scure */
  --on-dark-muted: #A8A8A8;
  /* Carta chiara: la banda di LETTURA. La prosa lunga delle pagine categoria non sta sul nero. */
  --sage:       #F2F1EF;  /* carta chiara (registro del riferimento di categoria, non bianco puro) */
  --sage-light: #FFFFFF;  /* tessera bianca dentro la carta: i prodotti SCONTORNATI SU BIANCO vanno qui */
  --sage-tint:  #D8D5D0;  /* filetto sulla carta chiara */
  --ink-on-light: #131313;      /* testo sulla carta (16,46) */
  --ink-muted-on-light: #565656;/* secondario sulla carta (6,50) */
  --focus:      #DD3D31;  /* ⭐ l'unico colore che supera 3:1 contro ENTRAMBI i terreni (4,79 e 3,89) */
  --bg:         #000000;  /* alias di terreno per i blocchi WP */
  --fg:         #FFFFFF;
  --scrim:      rgba(0,0,0,.72);
  --veil-rgb:   0 0 0;    /* il velo fotografico in terna: serve trasparente a più fermate */

  /* --- Tipografia. Bricolage Grotesque (display) + Inter (testo) + IBM Plex Mono per i META TECNICI: codice, misura,
     unità. Non è un vezzo: sono letteralmente le colonne del catalogo del cliente (CODICE · MISURA cm · UM).
     Evitati Archivo (building_supplier, thermo) e Poppins (workshop_supplier): sarebbero un'eco.
     La grottesca ha un'irregolarita' ottica VOLUTA: alle taglie del titolo si vede che qualcuno l'ha
     scelta, ed e' cio' che mancava a una grottesca neutra. La usa solo canine_center — altro mestiere,
     palette opposta. --- */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body:    Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --text-sm:   .8125rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-lg:   clamp(1.25rem, 1.1rem + .55vw, 1.5rem);
  --text-xl:   clamp(1.55rem, 1.25rem + 1.3vw, 2.15rem);
  --text-2xl:  clamp(1.9rem, 1.4rem + 2.1vw, 2.9rem);
  --text-3xl:  clamp(2.3rem, 1.35rem + 3.6vw, 4.1rem);
  --lh-tight:  1.06;
  --lh-snug:   1.22;
  --lh-heading:1.14;
  --lh-body:   1.7;
  --tracking-display: -.02em;
  --tracking-label:   .16em;

  /* --- Spazio e misura --- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;    --space-5: 1.5rem;
  --space-6: 2rem;    --space-7: 2.75rem; --space-8: 3.5rem;  --space-9: 4.5rem;  --space-10: 6rem;
  --container: 1280px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* ⚠ Il respiro fra sezioni era 4–7,5rem: su pagine da 8.000px sommava a vuoti che facevano sembrare
     il sito sconnesso, e ogni banda cambiava passo perché il clamp scalava molto col viewport. Ridotto
     e stretto, così il ritmo è lo stesso su tutte le pagine. */
  --section-y: clamp(3rem, 4.5vw, 4.75rem);
  --grid-gap: clamp(1rem, 2.4vw, 2.4rem);
  --bleed: calc((100% - 100vw) / 2);

  /* --- Forma. La categoria è POLARIZZATA sul raggio: o spigolo vivo o pillola. Il riferimento
     (BeArchitect6) è a spigolo vivo, e il mestiere pure: qui non si arrotonda nulla. --- */
  --radius: 0;
  --radius-lg: 0;
  --radius-pill: 999px;   /* dichiarato per le topologie condivise; non usato dai componenti */
  --field-radius: 0;
  --border: 1px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 10px 30px rgba(0,0,0,.55);
  --tile-ratio: 4 / 3;    /* cella di catalogo: uniforme, e il `contain` non si vede sul nero */
  --dur: .22s;
  --ease: cubic-bezier(.2,.6,.2,1);
}