/* tokens.css — design genome car_service. Officina meccatronica di servizio: base chiara (bianco + grigio
   tecnico) con il verde del marchio come SUPERFICIE, e due sole bande near-black come episodi di forza.
   Registro della categoria Officina (riferimento BeTire) ribaltato in chiaro: del template restano il campo
   circolare che ospita la fotografia, la striscia di icone-servizio e il pannello pieno che chiude la pagina.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   Contratto palette (a11y, MISURATO — i due verdi sono superfici, non inchiostri):
   - --brand (#78BD45) e --accent-fill (#A9D707) NON portano MAI testo su fondo chiaro (2.29 e 1.69 su bianco).
     Vivono come campiture: sopra ci va --ink (7.51 e 10.17), MAI il bianco (2.29 e 1.69).
   - il testo-accento su chiaro è --accent-text (#3F6B23): 6.29 su paper, 5.65 su surface.
   - su fondo scuro l'accento è --accent-lt (#C6F24A): 13.28 su --ink.
   - --ink-muted vale su entrambi i fondi chiari (6.15 su paper, 5.52 su surface).
   La striscia di ancore e i pannelli scuri sono i due soli luoghi dove il verde tocca il testo, e sempre
   con l'inchiostro sopra. */
:root {
  /* --- Colore (bianco + grigio tecnico + i due verdi del marchio) --- */
  --paper:    #FFFFFF;  /* fondo dominante */
  --surface:  #F1F3F4;  /* grigio tecnico: sezioni alternate */
  --ink:      #171B25;  /* near-black: testo (17.2:1 su paper) e bande di forza */
  --ink-soft: #2B303B;  /* corpo dei paragrafi lunghi (13.2:1 su paper) */
  --ink-muted:#5A6270;  /* testo secondario su fondo chiaro (6.15:1 su paper, 5.52:1 sul grigio) */
  --line:     #DFE3E5;  /* filetto: bordi e divisori (non-testo) */
  --brand:    #78BD45;  /* verde del marchio: SUPERFICIE (blob, campiture, hover) — mai testo su chiaro */
  --brand-deep:#2F5A1B; /* verde profondo: fondo pieno col testo chiaro sopra (8.08:1) */
  --accent-text:#3F6B23; /* verde testo: eyebrow, parola accentata, link su fondo chiaro */
  --accent-fill:#A9D707; /* verde acido: fondo della CTA e dei picchi (testo --ink, 10.17:1) */
  --accent-lt: #C6F24A; /* verde chiaro: accento SU FONDO SCURO (13.28:1 su --ink) */
  --accent-tint:#EDF7DC; /* verde tenue: campiture leggere e badge */
  --on-dark:  #FFFFFF;  /* testo sulle bande near-black (17.2:1) */
  --on-dark-muted:#C7CCD2; /* testo secondario su fondo scuro (10.65:1) */

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

  /* --- Tipografia: display grottesco stretto (Saira Semi Condensed) + testo umanista (Figtree), OFL --- */
  /* Il set stretto del display serve ai titoli lunghi del mestiere («Diagnosi elettronica e interventi
     meccatronici»): a parità di corpo spezza meno righe di una grottesca normale. */
  --font-display: "Saira Semi Condensed", "Saira", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-sm:  0.8rem;     /* eyebrow/meta, uppercase tracked */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:  clamp(1.06rem, 1rem + 0.3vw, 1.18rem);     /* lead */
  --text-lg:  1.28rem;    /* H3 */
  --text-xl:  clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);     /* titoli minori */
  --text-2xl: clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);    /* H2 — titoli di sezione */
  --text-3xl: clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem);     /* display della testata */

  --lh-tight: 1.08;
  --lh-snug: 1.16;
  --lh-body: 1.65;
  --tracking-label: 0.16em;
  --tracking-display: -0.015em;

  /* --- 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 + 4.4vw, 6.5rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 62ch;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  /* l'altezza dell'intestazione è FISSATA in border-box, non dedotta dalle metriche del font: così
     sopravvive a un cambio di carattere senza spostare di un pixel ciò che le sta sotto */
  --header-h: 76px;

  /* --- Forma --- */
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 12px 28px rgba(23, 27, 37, .09);
  --shadow-panel: 0 20px 50px rgba(23, 27, 37, .20);
  --shadow-disc: 0 24px 60px rgba(23, 27, 37, .22);
}