/* Design tokens – Ingegneria e Sicurezza S.r.l.
   Unica fonte di verità di colori, tipografia, spazi, raggi, ombre e livelli.
   Struttura a tre livelli: 1) primitivi (la palette), 2) semantici (il ruolo), 3) componenti (in style.css).
   Gli stili dei componenti usano SOLO i token semantici; i primitivi servono a definire i semantici.
   La pagina /design-system/ è generata leggendo questo file: le sezioni sono quelle delimitate da "@group". */

:root{
  /* @group Colori – primitivi */
  --white:#fff;
  --navy-900:#0d2347;
  --navy-700:#14305e;
  --navy-500:#1d4d8c;
  --blue-600:#0a6aa1;
  --green-500:#5fb233;
  --green-400:#7ac143;
  --green-700:#447f24;
  --green-800:#3a6e1e;
  --lime-500:#a6cf3a;
  --gray-900:#1b2433;
  --gray-600:#5b6678;
  --gray-200:#e3e8ef;
  --gray-50:#f4f7fb;
  --blue-50:#dbe6f8;
  --blue-200:#b9c8e2;
  --green-50:#eef8e8;
  --green-200:#cfe8bf;
  --green-900:#2d5a14;
  --red-600:#d33;
  --red-50:#fdeeee;
  --red-200:#f1c4c4;
  --red-900:#8a1f1f;

  /* @group Colori – semantici */
  --text:var(--gray-900);
  --text-muted:var(--gray-600);
  --heading:var(--navy-700);
  --link:var(--blue-600);
  --bg:var(--white);
  --bg-alt:var(--gray-50);
  --surface:var(--white);
  --border:var(--gray-200);
  --brand:var(--navy-700);
  --brand-deep:var(--navy-900);
  --accent:var(--green-500);          /* solo decorativo: icone, bordi, riempimenti (2,66:1 su bianco, non usare per testo) */
  --accent-hover:var(--green-400);
  --accent-text:var(--green-700);     /* testo e sfondi con testo bianco (AA: 4,88:1 su bianco) */
  --accent-text-hover:var(--green-800);
  --accent-on-dark:var(--lime-500);
  --on-dark:var(--white);
  --on-dark-1:var(--blue-50);         /* testo corrente su fondo scuro */
  --on-dark-2:var(--blue-200);        /* testo secondario su fondo scuro */
  --success-bg:var(--green-50);
  --success-border:var(--green-200);
  --success-text:var(--green-900);
  --danger:var(--red-600);
  --danger-bg:var(--red-50);
  --danger-border:var(--red-200);
  --danger-text:var(--red-900);
  --focus:var(--blue-600);            /* sulle sezioni scure diventa --accent-on-dark (vedi style.css) */
  --on-dark-line:rgb(255 255 255 / .15);
  --on-dark-wash:rgb(255 255 255 / .12);
  --on-dark-outline:rgb(255 255 255 / .6);
  --focus-ring:0 0 0 4px rgb(10 106 161 / .15);
  --grad-hero:radial-gradient(1200px 500px at 85% -10%,var(--navy-500) 0,transparent 60%),linear-gradient(160deg,var(--navy-900),var(--navy-700));
  --grad-page:linear-gradient(160deg,var(--navy-900),var(--navy-700));
  --grad-cta:linear-gradient(120deg,var(--navy-700),var(--blue-600));
  --grad-mission:linear-gradient(135deg,var(--navy-700),var(--blue-600));

  /* @group Tipografia */
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-head:'Manrope','Inter',system-ui,sans-serif;
  --fs-2xs:.7rem;
  --fs-xs:.8rem;
  --fs-sm:.9rem;
  --fs-md:.95rem;
  --fs-base:1rem;
  --fs-lg:1.1rem;
  --fs-xl:1.2rem;
  --fs-2xl:1.4rem;
  --fs-h1:clamp(2.1rem,4.6vw,3.5rem);
  --fs-h1-page:clamp(1.9rem,4vw,2.9rem);
  --fs-h2:clamp(1.6rem,3vw,2.3rem);
  --fs-stat:2.2rem;
  --lh-tight:1.15;
  --lh-snug:1.4;
  --lh-body:1.65;
  --tracking-tight:-.02em;
  --tracking-caps:.1em;
  --tracking-eyebrow:.14em;

  /* @group Spazi */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;
  --sp-22:88px;

  /* @group Raggi */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:22px;
  --r-pill:999px;

  /* @group Ombre */
  --shadow-card:0 1px 2px rgb(20 48 94 / .06),0 8px 28px rgb(20 48 94 / .08);
  --shadow-pop:0 20px 30px rgb(20 48 94 / .12);
  --shadow-overlay:0 12px 40px rgb(0 0 0 / .3);

  /* @group Layout e livelli */
  --wrap:1180px;
  --gutter:20px;
  --z-header:50;
  --z-cookie:60;
  --z-skip:100;
  /* Breakpoint (le custom property non valgono nelle media query: usare questi valori letterali):
     --bp-lg:1000px (tablet) · --bp-sm:760px (mobile) */
}