/* ============================================================================
   Sistema 3×3 — i token del design system (revisione finale, ondata 1, R-086)

   L'UNICO posto dove stanno colori, misure del testo, spaziature, raggi,
   ombre, durate, livelli e anello di focus, per il tema chiaro e lo scuro.
   Lo caricano TUTTE le pagine prima del loro foglio (style.css per l'area e
   le pagine di servizio, landing.css per la pagina pubblica): così l'area e
   la landing sono lo stesso prodotto (R-085).

   Perché un file a parte e non un blocco in style.css: la landing non carica
   style.css (1400 righe che non le servono) e deve avere gli stessi colori;
   con un file solo li prendono entrambe senza copiarli. Si carica con un
   <link> nell'HTML, prima del foglio della pagina (non con @import, che
   farebbe aspettare il secondo file al browser).

   Identità visiva del 21/10/2026 («la consigliata», docs/ux/IDENTITA-2026-10-21.md):
   carta calda, inchiostro, verde del metodo e una sola terracotta per
   l'azione principale. Il tema scuro è disegnato a parte, non invertito.
   I valori sono quelli di prima; cambiano solo quelli sotto le soglie della
   Parte 2 (verificati col calcolo, tests/controlli-token.js):
     --border-field  nuovo: bordo dei campi ≥ 3:1 (prima --line, 1,49:1 / 1,35:1)
     --ok, --warn    nel chiaro più scuri: ≥ 4,5:1 anche su --inset
   Le famiglie di caratteri restano le tre di oggi finché Michael non decide
   (D-43): qui hanno solo un nome.
   ============================================================================ */
:root{
  /* neutri (dal fondo all'inchiostro) */
  --paper:#f4efe4; --surface:#fbf8f1; --surface-2:#ede6d7; --inset:#e7dfcd;
  --line:#d6cdbb; --border-field:#827868; --ink-soft:#5a6461; --ink:#1e2725; --rule:#1e2725;
  /* il verde del metodo (link, avanzamento) e la terracotta dell'azione */
  --primary:#1d5c53; --primary-soft:#dde9e3; --primary-ink:#123f39; --on-primary:#ffffff;
  --action:#9a4a17; --action-soft:#f3e1d0; --on-action:#ffffff;
  /* semantici */
  --ok:#276b43; --warn:#7a5c0c; --stop:#a5402f;
  /* i colori delle aree: gli stessi dei gruppi della biblioteca */
  --a-fond:#1c5f57; --a-cont:#9a5516; --a-pres:#3d5873; --a-lead:#5d4a6b; --a-cli:#5f6a32;
  /* il calore della persona (Michael, 1/11/2026): caldo verde, tiepido arancione,
     freddo rosso; testo sul suo fondo tenue ≥ 4,5:1, sempre con la parola */
  --caldo:#276b43; --caldo-soft:#dfeee3; --tiepido:#9c5100; --tiepido-soft:#f6e3cc; --freddo:#a5402f; --freddo-soft:#f5dcd5;
  /* il bordo del pulsante WhatsApp nel profilo: il verde del marchio, scurito quanto basta per ≥ 3:1 */
  --wa-bordo:#178a41;
  /* ombre (tre livelli) e veli */
  --shadow-sm:none;
  --shadow:none;
  --shadow-lg:0 4px 10px rgba(30,39,37,.08), 0 22px 44px rgba(30,39,37,.14);
  --scrim:rgba(0,0,0,.35); --scrim-forte:rgba(0,0,0,.45); --scrim-festa:rgba(18,32,30,.55);
  --on-cover:#fbf6ee;
  /* i controlli del browser (calendario, orologio, caselle, barre) seguono il
     tema del SITO, non quello del computer (Michael, 25/10/2026) */
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#191714; --surface:#211e1a; --surface-2:#2a2621; --inset:#26221d;
    --line:#3a342c; --border-field:#7f7568; --ink-soft:#b3aa98; --ink:#ece5d6; --rule:#ece5d6;
    --primary:#9fd0c3; --primary-soft:#24302c; --primary-ink:#c4e6dc; --on-primary:#191714;
    --action:#e08a55; --action-soft:#3a2a1f; --on-action:#191714;
    --ok:#7cc496; --warn:#e0b85c; --stop:#ee8a76;
    --a-fond:#8cc9bb; --a-cont:#e3a46b; --a-pres:#9db6d0; --a-lead:#c0a9cf; --a-cli:#bcc77f;
    --caldo:#7cc496; --caldo-soft:#1f2e24; --tiepido:#f0a050; --tiepido-soft:#3a2a1a; --freddo:#ee8a76; --freddo-soft:#3a221d;
    --wa-bordo:#25d366;
    --shadow-sm:none;
    --shadow:0 1px 0 rgba(0,0,0,.25);
    --shadow-lg:0 4px 10px rgba(0,0,0,.35), 0 22px 44px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#191714; --surface:#211e1a; --surface-2:#2a2621; --inset:#26221d;
  --line:#3a342c; --border-field:#7f7568; --ink-soft:#b3aa98; --ink:#ece5d6; --rule:#ece5d6;
  --primary:#9fd0c3; --primary-soft:#24302c; --primary-ink:#c4e6dc; --on-primary:#191714;
  --action:#e08a55; --action-soft:#3a2a1f; --on-action:#191714;
  --ok:#7cc496; --warn:#e0b85c; --stop:#ee8a76;
  --a-fond:#8cc9bb; --a-cont:#e3a46b; --a-pres:#9db6d0; --a-lead:#c0a9cf; --a-cli:#bcc77f;
  --caldo:#7cc496; --caldo-soft:#1f2e24; --tiepido:#f0a050; --tiepido-soft:#3a2a1a; --freddo:#ee8a76; --freddo-soft:#3a221d;
  --wa-bordo:#25d366;
  --shadow-sm:none;
  --shadow:0 1px 0 rgba(0,0,0,.25);
  --shadow-lg:0 4px 10px rgba(0,0,0,.35), 0 22px 44px rgba(0,0,0,.45);
}

/* Tutto ciò che non dipende dal tema */
:root{
  /* nomi di ruolo dei colori (si usano nei componenti nuovi) */
  --accent:var(--action); --on-accent:var(--on-action); --accent-soft:var(--action-soft);
  --brand:var(--primary); --brand-soft:var(--primary-soft); --brand-ink:var(--primary-ink);
  --success:var(--ok); --warning:var(--warn); --danger:var(--stop); --info:var(--a-pres);
  --border-subtle:var(--line);

  /* caratteri (D-43, Michael 27/10/2026): Fraunces per i titoli, IBM Plex Sans
     per tutto il resto. Il Mono non c'è più: --font-code resta come nome per
     sigle, codici e numeri, ma usa lo stesso carattere del testo con le cifre
     a larghezza fissa (font-variant-numeric: tabular-nums, vedi style.css). */
  --font-text:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-title:"Fraunces",Georgia,"Times New Roman",serif;
  --font-code:var(--font-text);

  /* scala del testo (Parte 2: testo base ≥ 16 px sul telefono, mai sotto 12).
     --fs-ui è il testo dei comandi e delle righe brevi: 14 px sul computer,
     16 sul telefono e sul tablet (sotto i 900 px, dove c'è la barra in basso). */
  --fs-micro:12px;    /* sigle, etichette in maiuscoletto, contatori */
  --fs-meta:14px;     /* date, codici, didascalie */
  --fs-ui:14px;
  --fs-0:16px;        /* testo da leggere */
  --fs-input:16px;    /* ogni campo: sotto i 16 px iOS ingrandisce la pagina (R-022) */
  --fs-1:19px; --fs-2:23px; --fs-3:28px; --fs-4:33px;
  --lh-text:1.62; --lh-title:1.2;

  /* spaziature su base 4 */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* raggi */
  --radius-s:6px; --radius-m:10px; --radius-l:16px; --radius-pill:999px;

  /* elevazioni */
  --elev-0:none; --elev-1:var(--shadow); --elev-2:var(--shadow-lg);

  /* movimento (§10.1: 150–250 ms) */
  --dur-fast:150ms; --dur:200ms; --dur-slow:250ms; --ease:cubic-bezier(.2,.7,.2,1);

  /* interazione: area tattile minima e anello di focus unico (R-023, R-137) */
  --tap:44px;
  --focus-ring:3px solid var(--ink);
  --focus-offset:2px;

  /* livelli (gli stessi valori di prima, con un nome) */
  --z-sticky:20; --z-fab:40; --z-fab-2:41; --z-nav:45; --z-panel:50; --z-overlay:55;
  --z-drawer:60; --z-dialog:61; --z-modal:70; --z-festa:1000; --z-gate:9999;

  /* larghezze */
  --maxw:760px; --maxw-larga:1120px;
}
@media (max-width:900px){
  :root{ --fs-ui:16px; }
}
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; }
}