/* tokens.css — design genome workshop_supplier. Fornitore di attrezzature per officina e industria:
   registro "officina industriale". L'INDACO è il campo di marca (pannelli pieni che tagliano in
   diagonale), l'ARANCIONE è l'accento operativo; il fondo è SCURO e le bande chiare sono gli episodi
   densi (usato, marchi, gallery). Il carattere lo danno i blocchi pieni e i BLOCCHI-DATI, non la
   fotografia: le testate del cliente tipico sono banner 1920x700 sotto la soglia hero.

   ⚠ PRIMO verticale a FONDO SCURO: il vocabolario dei ruoli è chiuso e obbligatorio (schema IR), quindi
   i nomi vanno letti PER FUNZIONE, non alla lettera — `paper` è il fondo pagina (qui near-black) e `ink`
   è il testo principale (qui chiaro). Sulle bande chiare il testo è `ink_on_light` (ruolo aggiuntivo).

   Contrasti WCAG AA VERIFICATI su tutte le coppie di testo, margine >=5.1 su ogni fondo:
   ink/paper 17.3 · ink_muted/paper 7.1 · on_dark/brand 10.9 · on_dark_muted/brand 6.3 ·
   ink_on_light/sage_tint 16.2 · sage/sage_tint 5.6 · accent_ink/sage_tint 5.1 · accent_dark/brand 5.6.
   VINCOLI D'USO (nati dai numeri, non dal gusto):
     - MAI bianco su `accent` (3.08) → il bottone arancione porta testo `paper`;
     - MAI `accent` su `brand` (3.52) → dentro il pannello indaco l'accento è `accent_dark` (ambra);
     - MAI `accent` su fondo chiaro (3.00) → lì il testo-accento è `accent_ink`.
   Niente valori fuori da qui. */
:root {
  /* --- Colore (indaco campo di marca + arancione accento + neutri freddi) --- */
  --brand-dark: #23235C;  /* indaco profondo: pannelli, footer */
  --brand:      #2E2E7A;  /* indaco di marca: campi pieni, header (dal logo del cliente) */
  --brand-mid:  #3A3A96;  /* indaco medio: hover/superfici intermedie */
  --sage:       #5A616B;  /* acciaio: testo secondario sulle bande CHIARE (5.6:1) */
  --sage-light: #8A929C;  /* acciaio chiaro: filetti su scuro, testo terziario (5.9:1 su paper) */
  --sage-tint:  #F2F3F5;  /* la BANDA CHIARA: usato, marchi, gallery */
  --accent-ink: #A84C08;  /* arancione TESTO su fondo chiaro (5.1:1) */
  --accent:     #e26a0d;  /* arancione di marca: superfici, bottoni, filetti (testo ink 5.6:1) */
  --accent-deep:#B8540A;  /* arancione profondo: hover del bottone */
  --accent-dark:#F5A03F;  /* AMBRA: l'unico della famiglia che regge come TESTO sull'indaco (5.6:1) */

  --paper:   #121212;  /* fondo pagina (SCURO — vedi nota sui ruoli) */
  --surface: #1B1D22;  /* card e superfici su scuro */
  --ink:     #F6F6F6;  /* testo principale su fondo scuro (17.3:1) */
  --ink-muted:#9AA0A8; /* testo secondario su scuro (7.1:1 su paper, 6.4:1 su surface) */
  --ink-on-light:#15171C; /* testo principale sulle bande chiare (16.2:1) */
  --line:    #2A2D34;  /* bordi/divisori su scuro (non-testo) */
  --line-light:#DCE0E6;/* bordi/divisori sulle bande chiare (non-testo) */
  --on-dark: #F6F6F6;  /* testo sui pannelli indaco (10.9:1) */
  --on-dark-muted:#B9BDD6; /* testo secondario sui pannelli indaco (6.3:1) */
  /* ⚠ Indirezione dei primi piani: il CSS usava --paper come "colore sopra l'accento" e --ink come
     "colore sui pannelli scuri". Sono usi POSIZIONALI: un preset che ribalta il fondo (avorio invece di
     near-black) li rompeva entrambi. Il default e' il valore di prima, quindi nulla cambia per chi non
     li ridichiara; un preset puo' ora tararli da solo. */
  /* ⚠ La riga da 3px sotto testata e apertura, e la FASCIA dei contatti, erano entrambe `--accent`:
     un progetto che vuole l'accento solo nei dettagli non poteva spegnerle senza spegnere anche la CTA.
     Default = valore di prima. */
  /* ⚠ `--on-dark` serve SIA i pannelli `--brand` SIA quelli `--brand-dark`. Finche' sono entrambi
     scuri (o entrambi chiari) va bene; se un preset ne scurisce UNO SOLO, quel ruolo non puo' servirli
     tutti e due. Qui si separano, col default di prima. */
  --on-brand-dark: var(--on-dark);
  --on-brand-dark-muted: var(--on-dark-muted);
  /* ⚠⚠ Veli e lavaggi erano COLORI LETTERALI tarati sul tema scuro del primo cliente: il nero sulle
     foto (che li' teneva leggibile il testo SOPRA l'immagine) e l'indaco della vetrina. Con il testo in
     un pannello a lato il velo non serve piu' e spegne soltanto; l'indaco su un fondo chiaro diventa una
     foschia grigio-viola. Default = i valori di prima. */
  /* Segno del MARCHIO: i pochi punti non testuali dove puo' comparire il colore del logo (bollo della
     freccia, filetto sotto i titoli, filetto della tessera). Default = l'accento, quindi nulla cambia. */
  --menu-bg: var(--brand-dark);   /* pannello del menu mobile */
  --menu-ink: var(--on-brand-dark);
  --hero-h1: clamp(2.35rem, 1.45rem + 4.3vw, 4.5rem);  /* corpo del titolo dell'apertura */
  --hero-panel-w: 34rem;      /* larghezza del pannello di testo dell'apertura */
  --hero-min-h: clamp(30rem, 24rem + 14vw, 42rem);
  --hub-go-display: inline-flex;  /* bollo della freccia sulle tessere */
  --hub-pointer: auto;            /* `none` quando le tessere non portano da nessuna parte */
  --weight-display: 600;      /* peso dei titoli: un serif regge piu' leggero di un grottesco */
  --svc-bg: var(--surface);
  --svc-pad: var(--space-6) var(--space-5);  /* ⚠ senza fondo, il passo interno diventa VUOTO invisibile */
  --svc-rule: transparent;                   /* filetto in testa alla scheda */
  --svcs-gap-top: var(--space-6);   /* fondo delle schede del metodo */
  --mark: var(--accent);
  --on-mark: var(--on-accent);
  --hub-ratio: 4 / 3;         /* rapporto delle tessere-categoria */
  --hero-veil: linear-gradient(90deg, rgba(18,18,18,.15) 0%, rgba(18,18,18,.05) 55%, rgba(18,18,18,.35) 100%);
  --pagehead-veil: linear-gradient(90deg, rgba(18,18,18,.34) 0%, rgba(18,18,18,.08) 58%, rgba(18,18,18,.36) 100%);
  --showcase-wash: linear-gradient(180deg, rgba(46,46,122,.14) 0%, transparent 46%);
  --panel-foot: rgba(46,46,122,.94);   /* coda del pannello su mobile */
  --on-brand-dark-accent: var(--accent-dark); /* l'accento sul pannello `--brand-dark` */
  --header-scrolled: var(--brand-dark);   /* testata quando la pagina scorre */
  --rule: var(--accent);      /* filetto di separazione di testata e apertura */
  --band-bg: var(--accent);   /* fondo della fascia contatti */
  --on-band: var(--on-accent);
  --on-accent: var(--paper);  /* testo sopra --accent (CTA, bande, pill) */
  --on-brand:  var(--ink);    /* testo dei bottoni ghost sui pannelli scuri */
  --focus:   #F5A03F;  /* anello di focus: ambra, visibile sia su scuro sia su indaco */

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

  /* --- Tipografia: Poppins (display geometrico) + Inter (testo e BLOCCHI-DATI), OFL self-hosted.
     Poppins è insieme il font del template di riferimento (misurato 55px/600) e quello del sito
     attuale del cliente. Inter regge i numeri piccoli delle schede tecniche.
     tokensOf() legge --font-display e --font-body (lancia se un token manca). --- */
  --font-display: "Poppins", 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 — etichette dei blocchi-dati */
  --text-sm:  0.9375rem;  /* 15px */
  --text-base: 1.0625rem; /* 17px corpo (base del template) */
  --text-md:  1.1875rem;  /* 19px lead */
  --text-lg:  1.375rem;   /* 22px H3 */
  --text-xl:  clamp(1.55rem, 1.2rem + 1.3vw, 2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.7vw, 3.05rem);  /* display sezione */
  --text-3xl: clamp(2.3rem, 1.5rem + 3.6vw, 3.85rem);  /* display hero (cap proporzionato) */
  --text-data: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem);  /* il NUMERO dei blocchi-dati */

  --lh-tight: 1.06;
  --lh-snug: 1.2;
  --lh-body: 1.62;
  --tracking-label: 0.18em; /* eyebrow uppercase (registro tecnico: tracciatura ampia) */

  /* --- 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 è una SCALA a tre gradi, non un valore unico: una pagina in cui ogni sezione ha
     lo stesso passo è un metronomo e si legge come "vecchia". Il grado si sceglie per PESO della sezione
     (respiro attorno agli episodi importanti, passo stretto sugli elenchi densi). */
  --section-y: clamp(3.75rem, 2.3rem + 5.8vw, 8rem);
  --section-y-lg: clamp(5.25rem, 2.9rem + 8.6vw, 11rem);
  --section-y-sm: clamp(2.5rem, 1.7rem + 3vw, 4rem);

  /* --- Layout --- */
  --container: 1220px;
  --container-narrow: 740px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* --- Forma (bottoni pill + card a spigolo tecnico) --- */
  --radius: 5px;          /* misurato sul template */
  --radius-lg: 10px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* --- Ombre (su fondo scuro contano poco: si usa il contrasto di superficie) --- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
  --shadow-md: 0 12px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);

  /* --- Il TAGLIO DIAGONALE: dispositivo firma della categoria (BeMechanic6) --- */
  --slant: 6.5deg;
  --slant-w: clamp(2.5rem, 6vw, 6rem); /* quanto il campo di colore invade la foto */

  /* --- Griglia foto: il gutter è OBBLIGATORIO (le tessere non si toccano mai) --- */
  --tile-gap: clamp(0.5rem, 0.25rem + 1vw, 1rem);

  /* --- Motion (sobria) --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(.16,.84,.28,1); /* uscita lunga: le entrate al scroll si posano, non frenano */
  --dur: 200ms;
  --dur-slow: 320ms;   /* transizioni di stato percepibili (header che si contrae, superfici) */
}

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