/* Token del verticale pipeline_rehab (risanamento condotte e servizi idrici).
   I valori sono la sola fonte: theme.json li LEGGE da qui (fontSizes, spacingSizes, famiglie font).

   Palette: il blu e il rosso sono MISURATI sui pixel del marchio del cliente (blu #284895 dominante
   con 1529 px, rosso #e42927 con 914 px), non dedotti a occhio. Le 29 coppie realmente usate stanno
   tutte sopra soglia.
   ⛔ Il fondo NON e' scuro: la categoria «Aziende» costruisce l'autorevolezza sul navy pieno, ma il
   cliente ha chiesto per iscritto «sfondo BIANCO e non nero». Il bianco e' il registro della PAGINA;
   il blu vive nella testata delle bande e nei titoli.
   ⚠⚠ `--accent` su bianco misura 4.52: passa AA per due centesimi, margine ESAURITO. Come testo non
   si usa mai: c'e' `--accent-ink` (6.50). Sul bottone pieno il testo e' `--on-dark`.
   ⚠⚠ L'anello di focus NON puo' essere il rosso di marca: contro il blu della testata misura 1.90,
   sotto il 3.0 di SC 1.4.11. `--focus` e' un token che le bande scure RIDICHIARANO su di se'. */
:root {
  /* famiglia blu di marca: bande piene, testata delle fasce, titoli */
  --brand-dark: #16294F;
  --brand:      #284895;
  --brand-mid:  #3A5DA8;

  /* famiglia fredda intermedia: filetti, occhielli su fondo blu, fondi tenui */
  --sage:       #56688F;
  --sage-light: #B9C9E6;
  --sage-tint:  #EAF0FA;

  /* Accento SDOPPIATO: --accent e' SUPERFICIE, --accent-ink e' la stessa famiglia usata come TESTO
     su chiaro. Un rosso a media luminanza non puo' fare entrambe le cose. */
  --accent-ink:  #B81D1B;
  --accent:      #E42927;
  --accent-dark: #9A1715;

  --paper:   #FFFFFF;
  --surface: #F3F6FB;
  --ink:       #111C33;
  --ink-muted: #4A5670;
  --line:      #BFCBE2;
  /* ⚠ Filetto DECORATIVO e bordo di CONTROLLO sono due cose diverse: il secondo deve stare sopra 3.0
     su bianco (SC 1.4.11), il primo no. Tenerli separati evita input invisibili o filetti pesanti. */
  --line-strong: #7F8AA3;
  --on-dark:       #FFFFFF;
  --on-dark-muted: #D8E2F5;
  --focus: #1C3570;

  /* alias di pagina: il body li consuma, le bande scure li RIDICHIARANO su di se' */
  --bg: var(--paper);
  --fg: var(--ink);

  --scrim: rgba(11, 20, 40, 0.62);

  /* Display semi-condensato: i titoli del materiale sono tutto-maiuscolo e lunghi
     («RISANAMENTO FOGNATURE E ACQUEDOTTI»), e in una grottesca larga andrebbero a capo tre volte. */
  --font-body:   "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-accent: "Encode Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-sm:   0.86rem;
  --text-base: 1.0625rem;
  --text-md:   1.18rem;
  --text-lg:   1.45rem;
  /* ⚠ Dentro clamp() il «+» ESIGE gli spazi: senza, il browser scarta l'INTERA dichiarazione e il
     valore sparisce senza lasciare traccia nel sorgente (difetto pagato su local_installer). */
  --text-xl:   clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
  --text-2xl:  clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  --text-3xl:  clamp(2.1rem, 1.4rem + 2.8vw, 3.9rem);

  --lh-body: 1.65;
  --lh-snug: 1.2;
  --lh-tight: 1.08;
  --tracking-display: -0.01em;
  --tracking-label: 0.12em;

  /* Altezza della testata FISSA: la usano lo scroll-padding delle ancore e le colonne appiccicate. */
  --header-h: 104px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  --container: 1220px;
  --container-narrow: 760px;
  --gutter: 24px;
  /* La categoria «Aziende» NON arrotonda: spigolo quasi vivo, il pill e' dei template commerciali. */
  --radius: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --field-radius: 4px;
  --border: 1px solid var(--line);
  --section-y: clamp(3.5rem, 2.5rem + 3vw, 6rem);

  /* ⚠ Il compenso full-bleed e' un TOKEN, non un calcolo al volo: `calc(50% - 50vw)` risolve il 50%
     sulla cella di griglia e non sul contenitore. */
  --bleed: max(var(--gutter), calc((100vw - var(--container)) / 2));

  --shadow-sm: 0 2px 10px rgba(17, 28, 51, 0.07);
  --shadow-md: 0 18px 50px rgba(17, 28, 51, 0.22);

  --tile-ratio: 4 / 3;
  --band-ratio: 3 / 2;

  /* Velature larghe e a basso contrasto: tolgono alle campiture piene l'aria di fondale.
     ⚠ Nessuna porta testo da sola: il contrasto resta quello del colore di base. */
  --grad-brand: radial-gradient(120% 90% at 10% 0%, #31569F 0%, var(--brand) 55%, #1E3A7B 100%);
  --grad-deep:  radial-gradient(110% 100% at 88% 0%, #26406F 0%, var(--brand-dark) 60%, #0F1D3A 100%);
  --grad-carta: linear-gradient(180deg, var(--paper) 0%, var(--surface) 100%);
  --grad-tint:  linear-gradient(160deg, var(--sage-tint) 0%, #F5F8FD 100%);
  --grad-scrim: linear-gradient(105deg, rgba(11,20,40,.90) 0%, rgba(11,20,40,.74) 44%, rgba(11,20,40,.34) 100%);

  --dur: 520ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}