/* 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) */
  --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; }
}