/* Token del verticale refrigeration_service (refrigerazione industriale e commerciale).
   I valori sono la sola fonte: theme.json li LEGGE da qui (fontSizes, spacingSizes, famiglie font).

   Palette «Ghiaccio e petrolio»: near-monocromo FREDDO, senza accento caldo. Il freddo è il mestiere —
   celle, gruppi condensanti, catena del freddo — e non ha bisogno di essere scaldato per diventare un
   marchio: il carattere lo danno i CAMPI PIENI del mosaico, come nel riferimento di categoria.
   ⚠ La famiglia NAVY era la scelta ovvia ed è satura: technical_distributor è navy+rosso,
   security_institute navy+oro, thermo_hydraulic_store blu+arancio. Il petrolio (blu-verde) non è di
   nessuno e dice «freddo» meglio del navy istituzionale.

   Contrasto MISURATO su 20 coppie prima di scrivere una riga di CSS, soglia operativa 4.6 (al 4.5
   esatto axe boccia per arrotondamento). 19 su 20 la superano; l'unica sotto è --on-dark-muted
   sull'accento (3.70), che NON si usa: sull'accento si scrive con --on-dark (6.20) o --paper (6.76).
   Riferimenti: ink/paper 17.89 · ink-muted/paper 7.67 · brand/paper 12.26 · accent-ink/paper 9.29 ·
   on-dark/brand 11.26 · on-dark/brand-dark 14.21 · on-dark-muted/brand 6.71 · paper/brand 12.26. */
:root {
  /* famiglia fredda di marca: testata, bande piene, tessere del mosaico */
  --brand-dark: #082830;
  --brand:      #0E3A46;
  --brand-mid:  #3A5F6B;

  /* famiglia chiara: acciaio, ghiaccio, filetti */
  --sage:       #AFC3CB;
  --sage-light: #CBD9DE;
  --sage-tint:  #E4EDF0;

  /* Accento SDOPPIATO: --accent è SUPERFICIE (bottoni secondari, tessere piene), --accent-ink è la
     stessa famiglia usata come TESTO su chiaro. Un colore a media luminanza non può fare entrambe. */
  --accent-ink:  #0D4E5C;
  --accent:      #116476;
  --accent-dark: #0D4E5C;

  --paper:   #FFFFFF;
  --surface: #E4EDF0;
  --ink:       #101820;
  --ink-muted: #48555E;
  --line:      #CBD9DE;
  --on-dark:       #F1F6F8;
  --on-dark-muted: #AFC3CB;
  --focus: #0D4E5C;

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

  --scrim: rgba(8, 40, 48, 0.56);

  /* Chivo per i display (grottesca solida, tagli netti) e Red Hat Text per il corpo. Il riferimento di
     categoria misura Poppins, ma Poppins è già di cinque verticali e la tipografia sta nel quarto in cui
     il template va MIGLIORATO. OFL self-hosted: nessun font remoto. */
  --font-display: "Chivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Red Hat Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ⚠ Il corpo del riferimento è 15px su grigio rgb(116,120,128) = 3.9:1, SOTTO AA. Qui il corpo parte
     da 1.0625rem (17px) e il grigio è --ink-muted (7.67): è uno dei difetti che il nostro 25-30%
     corregge, non un dettaglio di gusto. */
  --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`). Non è un doppione di
     `--lh-heading`: questo è il display del verticale, quello è l'interlinea stretta di chi compone. */
  --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, e l'allineamento è una proprietà della griglia, non un caso fortunato.
     ⚠ 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: 10px;

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

  /* ⚠ Raggio ZERO in tutta la categoria «Aziende»: corporation, corporation2 e firm hanno bottoni a
     spigolo vivo (misurato). Il pill appartiene ai template commerciali, e questo mestiere non lo è.
     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);
  /* ⚠ Il respiro fra due bande era 88px per lato, cioè fino a 176px di campo morto a ogni salto: su otto
     sezioni faceva il 13% della pagina. Ridotto a 72px, che è ancora aria vera e non compressione. */
  --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(8, 40, 48, 0.08);
  --shadow-md: 0 18px 50px rgba(8, 40, 48, 0.22);

  /* Rapporti delle tessere. ⚠ Il RITRATTO è il formato principale, non l'eccezione: in questo mestiere
     si fotografa col telefono, in verticale, e una tessera accetta un ritratto mentre una fascia a
     piena larghezza no. È il vincolo che ha scelto il mosaico, non il contrario. */
  --tile-ratio: 3 / 4;
  --tile-wide: 16 / 9;
  --tile-square: 1;

  /* 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%, #14505F 0%, var(--brand) 55%, var(--brand-dark) 100%);
  --grad-deep: radial-gradient(110% 100% at 90% 0%, #17606F 0%, var(--brand-mid) 55%, var(--brand-dark) 100%);
  --grad-ghiaccio: linear-gradient(170deg, var(--sage-tint) 0%, #F3F8FA 100%);
  --grad-velo: linear-gradient(180deg, rgba(8,40,48,0) 45%, rgba(8,40,48,.46) 100%);

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