/* Token del verticale aspiration_systems (progettazione, produzione e vendita di impianti di
   aspirazione centralizzata). I valori sono la sola fonte: theme.json li LEGGE da qui (fontSizes,
   spacingSizes, famiglie font).

   Palette «Acciaio e aria»: campo GRAFITE + un solo teal. Il riferimento del cliente
   (websitedemos.net/real-estate-agency-04) è nero + teal #1a9395 su bianco, NON un monocromo teal:
   il grafite è la lettura fedele, e per giunta è il colore vero del prodotto (i cilindri d'acciaio
   delle centrali aspiranti sono l'unica cosa che le fotografie mostrano davvero).
   ⚠ La famiglia TEAL-monocromo era la scelta ovvia ed è satura: misurata ruolo per ruolo, dista 8
   dall'accento di health_professional, 12 da quello di refrigeration_service e 18 dal brand di
   dental_practice. Il grafite esce dalla banda occupata; i suoi soli vicini in flotta sono ruoli
   `ink`, cioè il nero di tutti, che non è un'identità.

   Contrasto MISURATO su 19 coppie di TESTO prima di scrivere una riga di CSS, soglia operativa 4.6
   (al 4.5 esatto axe boccia per arrotondamento): 19 su 19 la superano.
   ⚠⚠ REGOLA D'USO VINCOLANTE — è il difetto che il template originale ha e che noi correggiamo:
   `--accent` #1A9395 NON è MAI colore di testo su chiaro (3.72 sul bianco, sotto AA) e NON porta
   MAI testo bianco (3.72). Sull'accento si scrive `--ink` (4.81); il testo-accento su chiaro è
   `--accent-ink` (6.03 su carta, 5.54 su tinta). */
:root {
  /* campo istituzionale: barra alta dei recapiti, testata, piè, tessere piene del mosaico */
  --brand-dark: #1B2124;
  --brand:      #2A3338;
  --brand-mid:  #48555C;

  /* famiglia chiara: acciaio, filetti, tinte di sezione */
  --sage:       #9FB3B8;
  --sage-light: #D9E3E6;
  --sage-tint:  #F2F6F7;

  /* Accento SDOPPIATO: --accent è SUPERFICIE (campi, bottoni, filetti), --accent-ink è la stessa
     famiglia usata come TESTO su chiaro. Un colore a media luminanza non può fare entrambe. */
  --accent-ink:  #0E6E70;
  --accent:      #1A9395;
  --accent-dark: #0E6E70;
  /* ⚠⚠ TERZO stato dell'accento, misurato dopo averlo sbagliato: `--accent` come TESTO sul campo
     grafite fa 4,38 su #1B2124 e 3,47 su #2A3338 — sotto AA in entrambi i casi. L'accento sdoppiato
     non basta: servono TRE valori, perché un colore a media luminanza non può essere superficie,
     testo su chiaro E testo su scuro. Questo è il solo ammesso come testo sulle bande scure. */
  --accent-on-dark: #3FB3B5;
  /* Inchiostro NON rimappabile: le bande scure ridichiarano `--ink` su di sé, e un bottone che
     leggesse `--ink` dentro una banda scura si ritroverebbe il testo CHIARO sul proprio fondo
     accento (misurato: 3,44). Il testo del bottone accento non dipende dalla banda che lo ospita. */
  --ink-fixed: #14181A;

  --paper:   #FFFFFF;
  --surface: #F2F6F7;
  --ink:       #14181A;
  --ink-muted: #5A646A;
  --line:      #DDE5E8;
  --on-dark:       #F3F7F8;
  --on-dark-muted: #A9B8BD;
  --focus: #0E6E70;

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

  --scrim: rgba(27, 33, 36, 0.58);

  /* DM Sans in FAMIGLIA UNICA, 400/500/700: è esattamente ciò che carica il riferimento del cliente,
     ed è il vendoring più leggero. In flotta DM Sans non è display di nessun verticale (compare solo
     come corpo in delicatessen_shop) ⇒ fedeltà al riferimento e distinzione coincidono.
     OFL self-hosted: nessun font remoto (zero-live). */
  --font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ⚠ Il corpo del riferimento è tarato su copy demo CORTA. Qui i blocchi di prosa reali arrivano a
     971 caratteri: il corpo parte da 1.0625rem (17px) e il grigio è --ink-muted (6.06 su carta). */
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-md:   1.1875rem;
  --text-lg:   1.4375rem;
  --text-xl:   clamp(1.7rem, 1.25rem + 1.5vw, 2.3rem);
  --text-2xl:  clamp(2rem, 1.4rem + 2.1vw, 3rem);
  --text-3xl:  clamp(2.2rem, 1.45rem + 2.6vw, 3.6rem);

  --lh-body: 1.62;
  --lh-snug: 1.25;
  --lh-heading: 1.08;
  /* ⚠ `--lh-tight` è nel vocabolario COMUNE a tutti i verticali: le topologie condivise lo usano, e un
     verticale che non lo dichiara le fa cadere tutte (gate `topology`). */
  --lh-tight: 1.05;
  --tracking-display: -0.02em;
  --tracking-label: 0.14em;

  --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;

  /* ⭐ UNA griglia per tutta la pagina: 12 colonne e un solo gap. Ogni sezione dichiara quante colonne
     occupa, mai colonne proprie — così i bordi di tessere, testate, fotografie e paragrafi cadono
     sulle STESSE dodici tracce. L'aria fra due campate si dà col PADDING interno, non allargando il
     gap: il padding non muove il riquadro dell'elemento, il gap sposta la traccia. */
  --grid-cols: 12;
  --grid-gap: 12px;

  --container: 1240px;
  --container-narrow: 760px;
  --gutter: 24px;

  /* ⚠ Raggio ZERO: il riferimento del cliente ha bottoni a spigolo vivo, e tutta la categoria
     «Aziende» (corporation, corporation2, firm) li misura a 0. Il campo del modulo tiene un filo di
     raggio per non sembrare un input di sistema. */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --field-radius: 2px;
  --border: 1px solid var(--line);
  --section-y: clamp(3rem, 1.9rem + 3vw, 4.5rem);

  /* ⚠ Il compenso full-bleed è un TOKEN, non un calcolo al volo: `calc(50% - 50vw)` risolve il 50%
     sulla cella di griglia e non sul contenitore. Ogni grandezza che dipende da 100vw va provata ai
     DUE estremi, e le max-width la SOMMANO invece di subirla. */
  --bleed: max(var(--gutter), calc((100vw - var(--container)) / 2));

  --shadow-sm: 0 2px 10px rgba(27, 33, 36, 0.08);
  --shadow-md: 0 18px 50px rgba(27, 33, 36, 0.20);

  /* Rapporti delle tessere. ⚠ Il RITRATTO non è l'eccezione: le due sole fotografie che mostrano il
     prodotto sono 1920×2880 (2:3). Una colonna alta accetta un ritratto, una fascia a piena larghezza
     lo sventra — è il vincolo che ha scelto l'hero split e il mosaico, non il contrario. */
  --tile-portrait: 2 / 3;
  --tile-ratio: 3 / 4;
  --tile-wide: 16 / 9;
  --tile-square: 1;

  /* Velature larghe e a basso contrasto. ⚠ Nessuna porta testo da sola: il contrasto resta quello
     del colore di base. */
  --grad-brand: radial-gradient(120% 90% at 10% 0%, #2F3A40 0%, var(--brand) 55%, var(--brand-dark) 100%);
  --grad-aria:  linear-gradient(170deg, var(--sage-tint) 0%, #FAFCFC 100%);
  --grad-velo:  linear-gradient(180deg, rgba(27,33,36,0) 45%, rgba(27,33,36,.50) 100%);

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