/* freight_carrier — token del verticale.
   Palette PRESA DAI PIXEL del marchio del primo cliente: due soli colori oltre l'antialiasing,
   `#346768` (80,3% dei pixel opachi) e `#666666` (16,8%). Ogni coppia testo/fondo è misurata sulla
   superficie reale su cui viene usata, non sul token piatto.

   ⚠⚠ L'ACCENTO È SDOPPIATO PERCHÉ NESSUN SINGOLO COLORE REGGE I DUE FONDI.
   Misurato: `--accent-ink` #C22E42 fa 5,58 su bianco (✓) ma 2,51 su `--brand` (✗); `--accent-on-dark`
   #F2725C fa 4,90 su `--brand` (✓) ma 2,86 su bianco (✗). Le due soglie sono mutuamente esclusive —
   un rosso abbastanza scuro da portare testo su bianco è troppo scuro per staccare sul verde-petrolio
   profondo. È la stessa disciplina dell'ambra di heavy_vehicle_workshop e dell'ottone di
   security_institute, per una ragione diversa: lì l'accento era CHIARO, qui è caldo su fondo freddo.
   ⚠ Il rosso del template di categoria (BeLogistics2, #D84659) NON porta testo: 4,25 su bianco, sotto AA.
   Vive in `--accent` come CAMPO PIENO, mai come inchiostro.

   ⚠ Differenziazione da refrigeration_service: il suo accento è hue 191° sat 75%, il nostro marchio è
   hue 181° sat 33% — un petrolio SMORZATO. La distanza vera però è di SISTEMA: lì near-monocromo
   freddo su superficie ghiaccio, qui fondo neutro near-bianco con un accento caldo. */

:root {
  /* --- ruoli semantici del genoma (nomi CHIUSI, condivisi da tutti i verticali) --- */
  --brand-dark: #0d1f1f;   /* il più profondo: piè e banda di chiusura — 17,03 col bianco */
  --brand: #16302f;        /* fondo scuro principale delle bande — 14,02 col bianco */
  --brand-mid: #346768;    /* IL PETROLIO DEL MARCHIO: campi pieni, tessere, bottone primario */
  --sage: #e7ecec;         /* tessera neutra del mosaico */
  --sage-light: #f4f6f6;   /* superficie chiara: bande alterne */
  --sage-tint: #fafbfb;    /* tinta più leggera */
  --accent-ink: #c22e42;   /* accento come INCHIOSTRO su chiaro — 5,58 su bianco · 5,14 su superficie */
  --accent: #d84659;       /* accento come CAMPO PIENO — mai testo (4,25 su bianco, sotto AA) */
  --accent-dark: #a82436;  /* stati su chiaro — 7,07 su bianco */
  --paper: #ffffff;
  --surface: #f4f6f6;
  --ink: #141a1a;          /* 17,61 su bianco · 16,24 su superficie */
  --ink-muted: #57625f;    /* 6,33 su bianco · 5,83 su superficie */
  --line: #dde4e3;
  --on-dark: #ffffff;      /* 14,02 su --brand · 17,03 su --brand-dark */
  --on-dark-muted: #bcc9c7;/* 8,22 su --brand · 9,99 su --brand-dark */
  --focus: #c22e42;

  /* ⚠⚠ Il BIANCO sul petrolio del marchio. Deve stare fuori dalla rimappatura delle superfici scure:
     dentro una banda scura `--ink` diventa bianco, ma un campo `--brand-mid` resta petrolio — e lì
     serve sapere che sopra ci va il bianco (6,39), non l'inchiostro (2,76). Un token rimappato dal
     contesto non può vestire una superficie che dal contesto NON dipende. */
  --on-brand-mid: #ffffff;

  /* ⚠⚠ L'accento come INCHIOSTRO sulle bande scure — vedi la nota in testa al file. Il default È IL
     VALORE MISURATO su `--brand`: un secondo cliente con un accento diverso lo ridichiara col preset,
     ma deve rimisurarlo sul fondo PEGGIORE della sua palette, non sul più gentile. */
  --accent-on-dark: #f2725c;

  /* ⚠⚠ MISURE DI LETTURA. Sono token e non `max-width` sparsi nel foglio, così un secondo cliente può
     dichiarare che il testo copre tutta l'area invece di fermarsi a metà colonna, senza toccare il
     sito del primo. ⚠ Si applicano ai PARAGRAFI, mai al contenitore, alla riga di una griglia o alla
     piastra di un titolo — e `ch` si risolve sul font del CONTENITORE, non su quello reso. */
  --misura-titolo: 22ch;      /* il display della testata: la misura corta È il device */
  --misura-hero-lead: 56ch;
  --misura-testa: 62ch;
  --misura-lead: 62ch;
  --misura-prosa: 68ch;
  --misura-tessera: 46ch;     /* tessere e schede: già strette, qui il limite non morde */
  --misura-colonna: 64ch;
  --misura-quesito: 60ch;
  --misura-nota: 56ch;

  /* --- alias di lettura: nel mestiere i nomi contano più delle sigle --- */
  --petrolio: var(--brand-mid);
  --petrolio-scuro: var(--brand);
  --rosso-ink: var(--accent-ink);
  --rosso-su-scuro: var(--accent-on-dark);

  /* --- tipografia: due famiglie OFL self-hosted (zero-live: mai un font remoto) ---
     Familjen Grotesk porta i display: ha carattere senza essere bizzarra e regge il nero 700 grande
     del riferimento di design. Instrument Sans è il testo: neutra e leggibile ai corpi piccoli, dove
     il riferimento sta su 15/27. ⚠ Nessuna delle due è usata dagli altri 37 verticali; Poppins, che è
     il font di ENTRAMBI i template di categoria, è già di cinque e non si adotta. */
  --font-display: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* La scala tipografica: i nomi `--text-*` sono quelli che l'emitter legge per derivare i fontSizes
     di theme.json (tokensOf lancia se ne manca uno). Gli alias `--t-*` sono la forma breve usata dal
     CSS del verticale: una sorgente sola, due nomi. ⚠ Dentro clamp() il `+` ESIGE gli spazi — senza,
     la dichiarazione è invalida e sparisce senza lasciare traccia nel sorgente. */
  --text-sm: .9375rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.3125rem;
  --text-xl: clamp(1.8rem, 1.15rem + 2.1vw, 2.6rem);
  --text-2xl: clamp(2.1rem, 1.2rem + 3.3vw, 3.5rem);
  --text-3xl: clamp(2.6rem, 1.35rem + 4.9vw, 4.6rem);

  --t-xs: .8125rem;
  --t-sm: var(--text-sm);
  --t-base: var(--text-base);
  --t-lg: var(--text-md);
  /* Il capoverso d'apertura di una banda: token a sé perché il salto rispetto al corpo che lo segue è
     una scelta di REGISTRO, non una misura del verticale. Il default è il valore di sempre. */
  --t-lead: var(--text-lg);
  --t-scheda: var(--text-sm);
  --t-xl: var(--text-xl);
  --t-2xl: var(--text-2xl);
  --t-3xl: var(--text-3xl);

  --lh-body: 1.7;
  --lh-heading: 1.08;
  /* ⚠⚠ Questi cinque token non li consuma il CSS del verticale: li pretendono le TOPOLOGIE condivise,
     che possono usare solo i token comuni a TUTTI i verticali. Un verticale nuovo che non li dichiara
     restringe l'insieme comune e fa cadere il gate `topology` per l'intera flotta. */
  --lh-snug: 1.2;
  --lh-tight: 1.04;
  --tracking-label: 0.18em;
  --bg: var(--paper);

  /* --- misure --- */
  --container: 78rem;
  --gutter: clamp(1rem, 3vw, 3.5rem);
  /* ⚠⚠ UN SOLO GAP PER TUTTA LA PAGINA. Ogni griglia aveva il suo — 0, 17,6, 25,6, 38,4 px — e la
     SECONDA colonna cadeva a 512, 518, 521 e 530: quattro bordi diversi per una colonna sola, misurati.
     Con un gap unico i bordi coincidono e l'allineamento diventa una proprietà della griglia, non un
     caso. L'aria fra due campate si dà col PADDING INTERNO: il padding non muove il riquadro, il gap
     sposta la traccia. */
  --gap-griglia: 1.25rem;
  --section-y: clamp(3.5rem, 6.5vw, 6rem);
  --space-1: .35rem;
  --space-2: .7rem;
  --space-3: 1.1rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.4rem;
  --space-7: 4.4rem;
  --space-8: 5.6rem;
  --space-9: 7rem;
  --space-10: 8.8rem;

  /* Raggio ZERO: la categoria non arrotonda (BeCorporation2 e BeFirm stanno a 0; il pill arrotondato
     è dei template più commerciali). Su un vettore lo spigolo vivo legge come cassa, pedana, pallet. */
  --radius: 0px;
  --radius-lg: 0px;   /* preteso dalle topologie condivise */
  --ease: cubic-bezier(.2, .7, .3, 1);
}