/* tokens.css — design genome builders_merchant. Deposito edile multi-reparto che si VISITA: magazzino,
   sala mostre e noleggio di macchine operatrici convivono nello stesso mestiere. Il carattere lo dà la
   FOTOGRAFIA dei reparti a piena larghezza (questi clienti fotografano allestimenti e piazzali propri),
   non i blocchi di colore: il colore di marca fa struttura — filetti, occhielli, bande, CTA — e non
   tinge MAI una foto, perché in una sala mostre il colore del materiale è il prodotto e falsarlo è un
   errore di mestiere. Registro grottesco contemporaneo, angoli vivi, filetti sottili.
   Vocabolario CHIUSO di token semantici: è la sorgente da cui deriva theme.json, e i nomi dei ruoli
   colore coincidono 1:1 con palette_roles dell'IR. Niente valori fuori da qui.

   Contrasti WCAG AA VERIFICATI su tutte le coppie di testo previste (28 coppie, margine su ognuna):
   ink 17.97 su carta · ink_muted 8.16 · accent_ink 7.40 · bianco su accent 6.06 · bianco su brand 12.09
   · on_dark 15.40 su brand_dark e 10.74 su brand · accent_dark 6.77 su brand_dark e 4.72 su brand.

   ⚠ VINCOLI D'USO, misurati — il gate del verticale li asserisce come DIVIETI, non solo i permessi:
   - su --accent (mattone) va SOLO il bianco: --ink sopra fa 2.96 ✗;
   - su --brand (bordeaux) e --brand-dark va SOLO --paper/--on-dark: --ink fa 1.49 e 1.04 ✗;
   - --accent NON è mai testo su fondo scuro (2.86 su brand-dark, 1.99 su brand ✗): lì si usa
     --accent-dark, che è il rame chiaro nato per quello.
   Sono i token sdoppiati (--x superficie / --x-ink testo) già pagati su thermo_hydraulic_store. */
:root {
  /* --- Colore (bordeaux del marchio + mattone d'accento + neutri CALDI) ---
     Il bordeaux #700818 è campionato dai pixel del marchio di questi clienti (la «B» con il tettuccio);
     il mattone e il rame vengono dalla stessa famiglia calda del ruggine. I neutri sono caldi perché
     freddi litigherebbero con le terracotte e i legni delle ceramiche in fotografia. */
  --brand-dark: #1C1A19;  /* notte calda: bande scure strutturali, footer, page-head */
  --brand:      #700818;  /* BORDEAUX del marchio: bande di marca, piastre, filetti pesanti */
  --brand-mid:  #8A0F1E;  /* bordeaux medio: hover del bordeaux */
  --sage:       #6B625B;  /* grigio caldo: filetti e decori NON-testo su chiaro (5.96:1) */
  --sage-light: #9A908A;  /* grigio caldo chiaro: SOLO filetti e separatori — 3,12 su carta, NON è testo */
  --sage-tint:  #EDE8E2;  /* tint caldo: chip, superfici tenui */
  --accent-ink: #9A3210;  /* ruggine TESTO su chiaro: link, occhielli, numerali (7.40:1) */
  --accent:     #B03A16;  /* mattone SUPERFICIE: CTA, piastre piene (bianco 6.06:1) */
  --accent-deep:#8F2E0E;  /* mattone profondo: hover della CTA (bianco 8.19:1) */
  --accent-dark:#E88A55;  /* rame chiaro: testo/link/occhiello SU fondo scuro (6.77 su notte) */

  --paper:   #FFFFFF;  /* fondo pagina */
  --surface: #F4F1ED;  /* bone: sezioni alternate, card */
  /* Due superfici in più: una pagina che alterna soltanto bianco e bone ha due sole campiture e si
     legge piatta. Sono tinte CALDE e vicine — il ritmo si sente, il salto no. ⚠ Misurate: ink 15,4 e
     14,8, ink-muted 7,0 e 6,7: restano tutte sopra AA. */
  --surface-2: #EFE9E1;  /* sabbia: gallerie e code di pagina */
  --surface-3: #EAE3DA;  /* sabbia profonda: fasce di servizio */
  --surface-caldo: #F7EFE9;  /* velo mattone: una banda per pagina, appena tinta di ruggine */
  --ink:     #1A1614;  /* testo principale (17.97:1 su carta) */
  --ink-muted:#554E49; /* testo secondario su chiaro (8.16:1 su carta, 7.25 sul bone) */
  --line:    #E6E1DB;  /* bordi e divisori (non-testo) */
  --on-dark: #F4F1ED;  /* testo su superfici scure (15.40:1 su notte, 10.74 sul bordeaux) */
  --on-dark-muted:#B8B0A8; /* testo secondario su scuro (8.10 su notte, 5.65 sul bordeaux) */
  --focus:   #2E6BE6;  /* anello di focus (blu ad alta visibilità, 4.81 su carta e 3.60 sulla notte) */

  /* --- Sfumature di marca ---
     Superfici, mai testo. Servono a dare PROFONDITÀ a bande che altrimenti sono campiture piatte: un
     deposito è un luogo di materia, e una pagina tutta a tinte piatte lo racconta male. Restano
     sobrie: due fermate vicine, nessun arcobaleno. ⚠ Una sfumatura può andare SOLO dove il contrasto
     migliora o resta uguale — il gate del verticale misura ogni fermata. */
  --grad-bone: linear-gradient(180deg, #FFFFFF 0%, var(--surface) 55%, #EFEAE3 100%);
  /* La NOTTE e il BORDEAUX portano le stesse braci della testata, più deboli: le bande scure del sito
     sono una famiglia, e se solo una è viva le altre sembrano spente. Alfe scelte MISURATE sui pixel
     dipinti, riga per riga (v. `check-testata.mjs`): il margine più stretto resta sopra AA. */
  --grad-notte:
    radial-gradient(54% 112% at 96% -12%, rgba(176, 58, 22, .26) 0%, rgba(176, 58, 22, 0) 70%),
    radial-gradient(66% 128% at -6% 118%, rgba(112, 8, 24, .45) 0%, rgba(112, 8, 24, 0) 74%),
    linear-gradient(155deg, #24211F 0%, #1C1A19 45%, #150F10 100%);
  --grad-bordeaux:
    radial-gradient(38% 96% at 104% -20%, rgba(232, 138, 85, .17) 0%, rgba(232, 138, 85, 0) 66%),
    radial-gradient(72% 132% at -8% 122%, rgba(52, 2, 10, .60) 0%, rgba(52, 2, 10, 0) 74%),
    linear-gradient(155deg, #7E0A1C 0%, #700818 55%, #56040F 100%);
  /* ⚠⚠ La TESTATA non è una campitura piatta: è una notte calda ATTRAVERSATA da due bracieri — il
     rame (#B03A16) in alto a destra e il bordeaux del marchio (#700818) in basso a sinistra, dove
     stanno titolo e occhiello. Sono gli STESSI colori della palette, portati qui in rgba perché una
     fermata trasparente non si scrive con var(). Le alfe sono scelte MISURATE: sul pixel più chiaro
     della banda il bianco resta a 11,3:1 e il grigio caldo secondario a 5,8:1, cioè AA con margine
     su tutte e tre le righe di testo che ci vivono sopra. */
  --grad-testata:
    radial-gradient(62% 108% at 97% -6%, rgba(176, 58, 22, .40) 0%, rgba(176, 58, 22, .12) 46%, rgba(176, 58, 22, 0) 72%),
    radial-gradient(78% 150% at -6% 122%, rgba(138, 15, 30, .92) 0%, rgba(112, 8, 24, .42) 42%, rgba(112, 8, 24, .08) 66%, rgba(112, 8, 24, 0) 80%),
    radial-gradient(40% 60% at 42% -20%, rgba(244, 241, 237, .06) 0%, rgba(244, 241, 237, 0) 64%),
    linear-gradient(168deg, #221F1D 0%, #1B1918 62%, #140F10 100%);
  /* Il filo luminoso che CHIUDE la testata: non un bordo, una brace che si spegne ai due lati. */
  --filo-brace: linear-gradient(90deg, rgba(176, 58, 22, 0) 0%, rgba(232, 138, 85, .55) 24%, rgba(112, 8, 24, .60) 62%, rgba(176, 58, 22, 0) 100%);
  /* La striscia delle àncore sotto la testata: sabbia con un velo di ruggine che scende dalla banda
     scura, così le due fasce si leggono come una sola cosa invece che come due rettangoli. */
  --grad-ancore:
    radial-gradient(72% 200% at 10% -60%, rgba(176, 58, 22, .10) 0%, rgba(176, 58, 22, 0) 64%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  --grad-velo: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(244,241,237,.85) 100%);
  --grad-sabbia: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 60%, var(--surface-3) 100%);

  /* --- Forme ---
     Il verticale ha angoli vivi sui controlli (bottoni, filetti, tessere): è la sua disciplina. Le
     CURVE entrano dove servono a dare respiro e carattere — il raccordo fra due bande e la testa delle
     fotografie. L'ARCO in particolare non è un vezzo: è la forma dell'edilizia, e su un deposito di
     materiali dice il mestiere meglio di qualunque icona. */
  --curva-banda: clamp(28px, 3.2vw, 56px);
  --arco: 50% 50% 0 0 / 20% 20% 0 0;
  /* ⚠ --arco-morbido è stato TOLTO: era l'arco addolcito per le fotografie, e le fotografie non
     portano più archi (sulla resa il taglio a cupola si legge come «il segno della tondeggiatura»).
     Un token che non taglia più niente è vocabolario morto. L'arco vero resta, per ciò che nasce
     con quella forma: i pannelli di materia. */
  /* ⚠ La trama a quadrettatura è stata TOLTA dopo averla vista a schermo: si leggeva come una griglia
     di quadratini invece che come il fondo appena percepibile di un esecutivo. Una texture che si
     NOTA è rumore, e su bande grandi diventa il primo elemento che l'occhio prende. Le superfici si
     distinguono per TINTA. */

  /* --- Ruoli semantici --- */
  --bg: var(--paper);
  --fg: var(--ink);

  /* --- Tipografia: Instrument Sans (display grottesco contemporaneo) + Inter (testo), OFL
     self-hosted (zero-live). tokensOf() legge --font-display e --font-body e lancia se manca. --- */
  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-xs:  0.8125rem;  /* 13px — didascalie e metadati */
  --text-sm:  0.9375rem;  /* 15px */
  --text-base: 1.0625rem; /* 17px corpo (i template di categoria scendono a 13-14px: qui no) */
  --text-md:  1.1875rem;  /* 19px lead */
  --text-lg:  1.375rem;   /* 22px H3 */
  --text-xl:  clamp(1.5rem, 1.15rem + 1.35vw, 1.95rem);
  --text-2xl: clamp(1.9rem, 1.35rem + 2.4vw, 2.75rem);   /* display di sezione */
  --text-3xl: clamp(2.15rem, 1.4rem + 3.2vw, 3.35rem);   /* display hero (cap proporzionato) */
  --text-num: clamp(2.4rem, 1.6rem + 3.6vw, 3.9rem);     /* i numeri tecnici in colonna */

  --lh-tight: 1.06;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --tracking-label: 0.15em; /* occhiello maiuscolo */
  --tracking-display: -0.02em;

  /* --- Spaziatura --- */
  --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: 4rem;
  --space-9: 6rem; --space-10: 8rem;
  /* ⚠ Il ritmo verticale si è stretto DOPO aver misurato le fasce morte: con 5,75rem × 2 fra una
     banda e l'altra il salto arrivava a 437px sulle pagine con poche foto. */
  --section-y: clamp(2.75rem, 1.8rem + 3.4vw, 4.5rem);

  /* --- Layout ---
     ⚠ --misura-prosa si mette sui CAPOVERSI, mai sul contenitore, sulla riga di una griglia o sulla
     piastra di un titolo: è la regola per cui una sezione senza foto non lascia mai la metà destra
     bianca. E `ch` si risolve sul font del CONTENITORE, non su quello reso. */
  /* Altezza della testata fissa: la usa chi deve appiccicarsi SOTTO (l'indice ad àncore delle pagine
     reparto). ⚠ È un valore DICHIARATO per fascia, non misurato a runtime: `emit.mjs` è congelato e
     non si tocca per un verticale, e l'altezza qui è comunque deterministica (striscia di servizio +
     riga principale). Cambiando i paddings della testata va rivisto anche questo — il gate lo lega.
     ⚠ I valori sono MISURATI sulla resa, non stimati: 119px con la navigazione in linea, 123px quando
     la prende l'hamburger ma resta la striscia di servizio, 65px sul telefono dove la striscia sparisce. */
  --header-h: 119px;
  --container: 1240px;
  /* La TESTATA ha un contenitore più largo del contenuto: marchio, sette voci e la chiamata all'azione
     non stanno in 1240 e il contenuto sbordava dal contenitore (104px misurati) facendo collidere il
     nome con la prima voce. Il contenuto della pagina resta a 1240: è la misura di lettura. */
  --container-header: 1440px;
  --container-narrow: 760px;
  --misura-prosa: 68ch;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.75rem);

  /* --- Forma (architect6: angoli VIVI, filetti sottili, niente pillole) --- */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --hairline: 1px solid var(--line);
  --hairline-dark: 1px solid rgba(244, 241, 237, .22);
  --border: var(--hairline);

  /* --- Ombre: quasi assenti. Il rilievo lo dà il filetto, non l'ombra. --- */
  --shadow-sm: 0 1px 2px rgba(26, 22, 20, .05);
  --shadow-md: 0 12px 32px rgba(26, 22, 20, .10);

  /* --- Fotografia ---
     --scrim-* descrivono lo SCRIM DIREZIONALE dell'hero, misurato sulle foto reali di questo mestiere
     (sale mostre molto illuminate): il bianco del titolo sta in AA nell'angolo basso-sinistro mentre
     l'alto-destra resta la foto vera. Il velo piatto e la tinta di marca sono stati scartati: il primo
     spegne anche la metà buona, la seconda falsa il colore delle ceramiche. */
  --scrim-strong: .93;
  --scrim-mid: .80;
  --scrim-soft: .34;
  --tile-gap: clamp(0.5rem, 0.25rem + 1vw, 1rem);

  /* --- Motion (sobria) --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}