/* tokens.css — design genome security_institute. Istituto di vigilanza privata: registro istituzionale in
   navy, con un accento in OTTONE che è ciò che distingue un marchio da un modulo prefettizio. Il taglio è
   squadrato ovunque — nella categoria «Aziende» i riferimenti istituzionali (BeCorporation, BeFirm,
   BeCorporation2) hanno tutti raggio 0 sui bottoni, ed è il segno che separa l'ente dal commerciale.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   La palette NON viene da un catalogo: il navy è MISURATO sul marchio e sul sito attuale del primo cliente
   (rgba(14,52,98) dominante, scudo con la Trinacria). Cade nella stessa famiglia dei riferimenti di
   categoria (BeCorporation #153587, BeFirm #001946): template e continuità di marca dicono la stessa cosa.

   Contratto palette (a11y, MISURATO — non stimato):
   ink su paper 9,67 · ink-muted su paper 7,87 · ink-muted su surface 7,27 · brand su paper 12,45 ·
   brand su surface 11,50 · on-dark su brand 12,45 · on-dark su brand-dark 14,43 ·
   on-dark-muted su brand 7,82 · accent-lt su brand 7,43 · accent su brand 5,15 ·
   brand su accent 5,15 · ink su accent 7,36 · accent-ink su paper 5,77 · accent-ink su surface 5,33.
   ⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - --accent (ottone pieno) NON è MAI testo su fondo CHIARO: 2,42 su paper e 2,23 su surface. Su chiaro è
     filetto, superficie, segno — e nulla di leggibile gli si posa sopra. Su fondo NAVY invece porta testo
     (5,15), ed è lì che vive l'occhiello.
   - l'accento che porta TESTO su fondo chiaro è --accent-ink (5,77); su fondo scuro --accent-lt (7,43);
   - --ink-muted vale SOLO su fondo chiaro; su fondo scuro si usa --on-dark-muted;
   - ⚠ il FOCUS non può essere un colore solo: --accent-ink fa 5,77 su bianco ma 2,16 sul navy, e l'ottone
     l'opposto. Il token vale per le superfici chiare (la maggioranza) e viene RIBALTATO in components.css
     su ogni superficie navy. Un anello di focus invisibile è un difetto di accessibilità, non un dettaglio.
   - un testo sopra una FOTO non è coperto da questi rapporti: va misurato dal pixel renderizzato — per
     questo la testata porta il titolo su un PANNELLO pieno accanto alla fotografia, non sopra di essa. */
:root {
  /* --- Colore (navy di marca + ottone + neutri freddi) --- */
  --paper:      #FFFFFF;  /* fondo dominante */
  --surface:    #F4F6F9;  /* nebbia: sezioni alternate */
  --surface-2:  #E7ECF3;  /* superfici di riposo e placeholder */
  --ink:        #14181F;  /* inchiostro: testo (9,67:1 su paper) */
  --ink-muted:  #4A5260;  /* testo secondario SOLO su fondo chiaro (7,87:1) */
  --line:       #DDE3EC;  /* filetto: bordi e righe (non-testo) */
  --accent-ink: #7E620F;  /* ottone portato a TESTO su chiaro: occhielli, link (5,77:1) */
  --accent:     #C9A227;  /* OTTONE: filetti, superfici, segni, e TESTO solo su navy (5,15) */
  --accent-dark:#9A7C1B;  /* ottone profondo: hover di superficie */
  --accent-lt:  #E3C57A;  /* ottone chiaro: testo su fondo scuro (7,43 sul navy) */
  --accent-tint:#F3EAD2;  /* ottone tint: fondo di riquadri d'evidenza su chiaro */
  --brand:      #0E3462;  /* NAVY di marca: barra istituzionale, pannelli pieni, bottone primario */
  --brand-dark: #0B2A4E;  /* navy profondo: footer, hover del bottone */
  --brand-mid:  #1B4A82;  /* navy chiaro: superfici secondarie, filetti su navy */
  --night:      #070F1B;  /* blu-nero: velo della fotografia */
  --on-dark:    #FFFFFF;  /* testo su fondi pieni scuri (12,45 sul navy · 14,43 sul navy profondo) */
  --on-dark-muted: #C3CEDD; /* testo secondario su fondo scuro (7,82 sul navy) */
  /* velo della fotografia: la coppia .34→.60 tiene unita la banda. Non serve ad annegare lo scatto — il
     contrasto del titolo lo dà il pannello pieno — ma a legare foto e campo di colore. */
  --scrim:      rgba(7,15,27,.34);
  --scrim-deep: rgba(7,15,27,.60);

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

  /* --- Tipografia: UNA famiglia su due larghezze — Barlow Condensed per il display, Barlow per il testo,
     entrambi OFL self-hosted. È il registro della segnaletica istituzionale: il condensato dà autorevolezza
     e statura senza rubare larghezza, e la larghezza qui serve — i titoli di un istituto sono lunghi
     («Progettazione, installazione e gestione impianti di allarme»).
     ⚠ Il display vive a PESO 600/700: il condensato regge il peso alto, che su un grottesco normale
     impasterebbe. Il testo sta a 400/500. tokens.css deve definire --font-display e --font-body. --- */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica istituzionale. ⚠ Il condensato occupa ~22% meno larghezza a parità di corpo: i gradi
     alti possono crescere rispetto a un grottesco normale SENZA sforare la riga. Restano comunque dentro
     una scala (rapporto ~1,45 fra i gradi): un titolo è forte per contrasto, non per statura. */
  --text-sm:   0.8125rem; /* occhielli e meta, maiuscoletto tracciato */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.08rem, 1rem + 0.42vw, 1.24rem);   /* lead */
  --text-lg:   clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);    /* H3 */
  --text-xl:   clamp(1.75rem, 1.36rem + 1.65vw, 2.45rem);    /* H2 — titoli di sezione */
  --text-2xl:  clamp(2.1rem, 1.6rem + 2.2vw, 3.2rem);    /* display di sezione */
  --text-3xl:  clamp(2.6rem, 1.9rem + 3.1vw, 4.35rem);   /* display della testata */

  --lh-tight: 1.03;
  --lh-snug: 1.08;
  --lh-body: 1.65;
  --tracking-label: 0.18em;    /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: 0.004em; /* il condensato respira appena alle scale grandi */

  /* --- 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.25rem, 2.1rem + 3.8vw, 6rem);

  /* --- Layout --- */
  --container: 1220px;
  --container-narrow: 66ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem);

  /* --- Forma: SQUADRATA ovunque (raggio 0 in tutti i riferimenti istituzionali della categoria) --- */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --border: 1px solid var(--line);

  /* Distanza fra il bordo della pagina e il contenitore: è ciò che un blocco deve recuperare per arrivare
     a filo pagina. ⚠ CRESCE SENZA LIMITE con la finestra (a 2560px vale 670): chi la usa come padding di
     compenso DEVE aggiungerla anche alla propria larghezza massima, altrimenti su un monitor largo il
     padding si mangia il blocco e il testo si riduce a una colonna di una lettera. */
  --bleed: max(var(--gutter), (100vw - var(--container)) / 2);

  /* --- Ombra (sobria: l'istituzionale non gonfia) --- */
  --shadow-sm: 0 6px 18px rgba(11,42,78,.08);
  --shadow-md: 0 26px 54px -32px rgba(11,42,78,.42);

  --tile-gap: clamp(0.75rem, 0.4rem + 1.1vw, 1.25rem);

  /* Altezza del «cromo» in testa alla pagina (barra istituzionale + intestazione). I tre valori sono le tre
     altezze reali dell'header ai suoi punti di rottura. */
  --chrome: 118px;
  /* altezza della barra di servizio: e' la corsa che la parte agganciata concede prima di fermarsi */
  --topbar-h: 38px;

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 240ms;
}
@media (max-width: 899.98px) { :root { --chrome: 68px; --topbar-h: 0px; } }
@media (max-width: 599.98px) { :root { --chrome: 80px; --topbar-h: 0px; } }
@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }