/* ===================================================================
   StrategiaCapitale - vars.css
   UNICA fonte di verita' per colori, famiglie e scala tipografica.
   Consumato da:
     - src/index.html          (app React, via Parcel -> sempre presente)
     - deploy/landing-index.html  (<link rel="stylesheet" href="/vars.css">)
     - src/report.js           (iframe di stampa)
   Nessun url(): puo' attraversare il bundler senza rompersi.
   Se cambi un colore si cambia QUI. I valori COL_* in main.jsx sono
   fallback per il canvas e vanno tenuti allineati: li verifica
   `npm run check:tokens`.
   =================================================================== */

:root{
  /* ---------- Famiglie ---------- */
  --font-sans:"Source Sans 3",system-ui,-apple-system,Segoe UI,sans-serif;
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---------- Superfici ---------- */
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --border:#CBD5E1;
  --border-soft:#EAEEF5;

  /* ---------- Testo ----------
     Rapporti di contrasto verificati su --bg (#F5F7FA):
       --ink   14,7:1   --grey  5,4:1   --grey2  4,5:1
     --grey2 era #8C97A6 = 2,8:1 -> sotto la soglia AA, corretto. */
  --ink:#1E2A38;
  --grey:#5B6776;
  --grey2:#667382;
  --grey3:#AEB9C9;   /* SOLO decorativo: bordi, separatori, mai testo */

  /* ---------- Accenti ----------
     Ogni accento ha due varianti:
       --x        superfici, bordi, tracciati SVG, riempimenti  (>=3:1)
       --x-ink    TESTO su fondo chiaro                          (>=4,5:1)
     Usare la variante -ink ogni volta che il colore finisce
     in una proprieta' `color`. */
  --navy:#213E84;        --navy-ink:#213E84;    /*  8,3:1  ok anche come testo */
  --azure:#55A5E2;       --azure-ink:#2E86C8;   /*  2,7:1 -> 3,9:1            */
  --green:#1D9E75;       --green-ink:#157A5A;   /*  3,2:1 -> 4,9:1            */
  --amber:#C9851A;       --amber-ink:#8F6209;   /*  2,9:1 -> 5,0:1            */
  --red:#D14545;         --red-ink:#C03A3A;     /*  4,2:1 -> 5,0:1            */
  --violet:#7B5BA6;      --violet-ink:#6B4C96;
  --teal:#0F766E;        --teal-ink:#0F766E;

  /* ---------- Intro (apertura dell'app) ----------
     Palette che vive SOLO nei ~2 s della transizione landing -> prima
     scheda. Non sono colori d'interfaccia: nessun testo di contenuto
     viene mai posato su questi fondi, quindi non hanno soglia AA e non
     entrano nei controlli di contrasto di check-tokens.mjs.
     --intro-void/-deep/-abyss sono la stessa famiglia del piatto
     dell'icona (#0A101C): l'apertura e' l'icona ingrandita a schermo. */
  --intro-void:#070B14;
  --intro-deep:#0F1A2E;
  --intro-abyss:#04070E;
  /* Aloni: servono con alpha, quindi rgba() e non hex. Il valore di
     partenza e' --azure (85,165,226) schiarito verso il bianco. */
  --intro-halo:rgba(191,214,242,.34);
  --intro-halo-soft:rgba(191,214,242,.10);
  --intro-halo-azure:rgba(85,165,226,.22);
  /* Metallo: tre quote di una spazzolatura. Usate sia dal gradiente SVG
     del marchio (duplicate in main.jsx, come i COL_*) sia dal wordmark. */
  --intro-metal-hi:#F2F7FF;
  --intro-metal-mid:#94A7C4;
  --intro-metal-lo:#38455C;

  /* ---------- Scala tipografica ----------
     Era: 11/12/13/13,5/14/15/16px = sette gradini indistinguibili.
     Ora sei gradini con rapporti percepibili. */
  --fs-micro:12px;   /* etichette mono, note, disclaimer */
  --fs-small:14px;   /* testo secondario nelle card      */
  --fs-body:16px;    /* corpo                            */
  --fs-lead:20px;    /* sottotitoli                      */
  --fs-h3:20px;
  --fs-h2:clamp(24px,3.4vw,32px);
  --fs-h1:clamp(30px,4.6vw,46px);

  /* ---------- Crenatura ----------
     Relativa, non assoluta: -1,4px fissi si incollavano a 30px. */
  --tracking-h1:-0.03em;
  --tracking-h2:-0.02em;
  --tracking-mono:0.14em;

  /* ---------- Raggi e ombre ---------- */
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:12px;
  --shadow-card:0 10px 34px rgba(30,42,56,.10);
  --shadow-btn:0 2px 10px rgba(33,62,132,.28);
}