/* tokens.css — design genome local_installer. Installatore/posatore locale di servizio (box doccia, arredo
   bagno): registro corporate-pulito, base neutra calda + UN accento saturo = il ROSSO del marchio (cerchio
   del logo). Il carattere lo danno i BLOCCHI PIENI (rosso/carbone) e il segno CERCHIO ricorrente; le foto sono
   di qualità media (≤1080px), niente hero fotografico a piena larghezza. Vocabolario CHIUSO di token semantici:
   la sorgente da cui deriva theme.json. Niente valori fuori da qui.
   Contratto palette (a11y, verificato dal calcolo WCAG): bianco su --brand (rosso) = 5,9:1; --accent-text
   (rosso scuro) su chiaro = 6,5:1; --ink-muted MAI su fondo scuro (lì --muted-on-dark). */
:root {
  /* --- Colore (neutro caldo + rosso di marca) --- */
  --paper:    #FBFAF8;  /* off-white caldo: fondo */
  --surface:  #F2EEE9;  /* sabbia chiara: sezioni alternate — TINT DI MARCA */
  --surface-2:#ECE7E0;  /* sabbia più profonda: banda realizzazioni/placeholder */
  --ink:      #1C1C1E;  /* carbone: testo (16:1 su paper) e tessera "aziende" */
  --ink-muted:#57575B;  /* grigio testo secondario SOLO su fondo chiaro (6.6:1 su paper) */
  --line:     #E4DED5;  /* filetto: righe e bordi (non-testo) */
  --accent-text:#9E2723; /* rosso scuro: eyebrow, link, accenti-testo su chiaro (6.5:1 su paper) */
  --accent-deco:#B9312D; /* rosso di marca: cerchi, pallini, filetti, ::before (dettagli) */
  --accent-lt:#F6E4E2;  /* rosa pallido caldo: eyebrow su fondo rosso (4.85:1 su --brand, AA) */
  --on-dark:  #FBFAF8;  /* testo su fondi pieni scuri/rossi (bianco caldo) */
  --muted-on-dark:#B9B6B2; /* testo secondario su fondo scuro (footer legal; 8:1 su night) */
  --brand:    #B9312D;  /* rosso di marca: bottone primario, tessera "privati", CTA band, hero accent */
  --brand-dark:#9E2723; /* rosso profondo: hover del bottone */
  --night:    #19191B;  /* carbone profondo: footer */

  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--accent-deco);
  --focus: var(--accent-text);

  /* --- Tipografia: display grottesca geometrica (Manrope, richiama il sans leggero del logo) + testo (Inter),
     OFL self-hosted. tokens.css deve definire --font-head e --font-body (tokensOf lancia se un token manca). --- */
  --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica corporate-moderna */
  --text-sm:  0.76rem;    /* eyebrow/meta, uppercase tracked */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:  clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);    /* lead */
  --text-lg:  1.22rem;    /* H3 */
  --text-xl:  clamp(1.7rem, 1.25rem + 1.9vw, 2.5rem);     /* H2 — titoli di sezione */
  --text-2xl: clamp(2rem, 1.45rem + 2.4vw, 2.9rem);       /* display sezione */
  --text-3xl: clamp(2.3rem, 1.5rem + 3.5vw, 3.6rem);      /* display hero */

  --lh-tight: 1.08;
  --lh-snug: 1.1;
  --lh-body: 1.62;
  --tracking-label: 0.16em;
  --tracking-display: -0.02em;

  /* --- Spaziatura --- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4.5rem; --space-9:7rem; --space-10:10rem;
  --section-y: clamp(3.5rem, 2.4rem + 3.4vw, 6rem);

  /* --- Layout --- */
  --container: 1180px;
  --container-narrow: 62ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem);

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

  /* --- Ombra (sobria) --- */
  --shadow-sm: 0 6px 18px rgba(28,28,30,.07);
  --shadow-md: 0 24px 50px -30px rgba(28,28,30,.35);
  --shadow-tile: 0 30px 60px -28px rgba(28,28,30,.4);

  --tile-gap: clamp(0.8rem, 0.4rem + 1.2vw, 1.4rem);

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 240ms;
}
@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }