/* tokens.css — design genome building_supplier. Rivenditore/magazzino edile: registro industriale
   diretto. Il ROSSO è protagonista (pannelli pieni, CTA, accenti); il BLU navy è di supporto (bande
   strutturali, footer); il bianco domina. Il carattere lo danno i BLOCCHI PIENI di colore e gli angoli
   vivi, non la fotografia: il materiale tipico di questi clienti è stock a ~800px e non regge un hero a
   piena larghezza. Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json; i nomi
   dei ruoli colore coincidono 1:1 con palette_roles dell'IR. Contrasti WCAG AA verificati su tutte le
   coppie di testo (margine >=4.6 su ogni fondo): bianco su rosso 5.9, bianco su navy 11.4, ink 16, red-ink
   7.1, accent_dark su navy 5.1+. Vincoli d'uso: pannello rosso -> SOLO testo bianco (ink su rosso 2.7 KO);
   MAI rosso su blu (1.9 KO). Niente valori fuori da qui. */
:root {
  /* --- Colore (rosso protagonista + navy di supporto + neutri freddi) --- */
  --brand-dark: #0E2A4E;  /* navy profondo: footer, page-head, fasce scure */
  --brand:      #123A6B;  /* navy: bande strutturali di supporto */
  --brand-mid:  #1E4C86;  /* navy medio: hover/superfici scure intermedie */
  --sage:       #5A6472;  /* acciaio: filetti/decori non-testo su chiaro (6:1) */
  --sage-light: #8892A0;  /* acciaio chiaro */
  --sage-tint:  #E5EAF1;  /* tint navy per chip/superfici */
  --accent-ink: #B01319;  /* rosso TESTO su chiaro: link/eyebrow/numerali (7.1:1 su carta) */
  --accent:     #C41E24;  /* rosso protagonista: pannelli pieni, CTA, filetti (bianco 5.9:1) */
  --accent-deep:#A81419;  /* rosso profondo: hover del rosso (bianco 7.6:1) */
  --accent-dark:#FF8C84;  /* rosso chiaro: eyebrow/accento su fondo navy (5.1:1 su navy) */

  --paper:   #FFFFFF;  /* fondo pagina */
  --surface: #F3F5F8;  /* sezioni alternate, card */
  --ink:     #1A2230;  /* testo principale (16:1 su carta) */
  --ink-muted:#4A5568; /* testo secondario su chiaro (7.5:1 su carta, 6.6:1 sul tint) */
  --line:    #D7DDE7;  /* bordi/divisori (non-testo) */
  --on-dark: #EAF0F8;  /* testo su superfici navy (12.5:1) */
  --on-dark-muted:#B4C1D6; /* testo secondario su navy (7.9:1) */
  --on-red-muted:#FFDAD7;  /* testo secondario/eyebrow su pannello rosso (4.6:1 su rosso) */
  --focus:   #2E6BE6;  /* anello di focus (blu ad alta visibilità) */

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

  /* --- Tipografia: Archivo (display grottesco industriale) + Inter (testo), OFL self-hosted (zero-live).
     tokensOf() legge --font-display e --font-body (lancia se un token manca). --- */
  --font-display: "Archivo", 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 */
  --text-sm:  0.9375rem;  /* 15px */
  --text-base: 1.0625rem; /* 17px corpo */
  --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(1.95rem, 1.4rem + 2.4vw, 2.8rem);   /* display sezione */
  --text-3xl: clamp(2.2rem, 1.5rem + 3.1vw, 3.3rem);    /* display hero (cap proporzionato) */

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-body: 1.65;
  --tracking-label: 0.14em; /* eyebrow uppercase */

  /* --- Spaziatura (ritmo strutturato-industriale) --- */
  --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;
  --section-y: clamp(3rem, 2rem + 4vw, 5.25rem);

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

  /* --- Forma (repair3: bottoni pill + card morbide) --- */
  --radius: 4px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* --- Ombre (leggere, definite) --- */
  --shadow-sm: 0 1px 2px rgba(14,42,78,.06), 0 2px 10px rgba(14,42,78,.05);
  --shadow-md: 0 10px 28px rgba(14,42,78,.12), 0 2px 8px rgba(14,42,78,.06);

  /* --- 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);
  --dur: 200ms;
}

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