/* ============================================================================
   I TOKEN — l'unico posto dove è scritto un colore.

   Stavano dentro il `<style>` di index.html, cioè dentro una pagina. Da qui li
   può usare anche il resto: la guida di stile (`/stile`) mostra i componenti
   VERI con i colori VERI, e una guida che ridichiara i propri colori è una
   guida che il giorno dopo mostra qualcos'altro rispetto al prodotto.

   Regola: **un colore scritto a mano in una vista è un difetto**, non una
   scorciatoia. Non perché sia brutto, ma perché il tema scuro esiste — e un
   `#fff` cablato lì dentro in tema scuro diventa bianco su bianco. Se serve una
   tinta che qui non c'è, si aggiunge qui con un nome che dice a cosa serve
   (`--warn`, non `--arancione`), non nella vista.

   Il tema scuro è scritto DUE volte, e non è una svista: una per chi non ha
   scelto e segue il sistema (`@media`), una per chi ha scelto (`data-theme`).
   Servono tutte e due perché la scelta esplicita deve vincere in entrambe le
   direzioni — anche «chiaro» mentre il sistema è scuro.
   ============================================================================ */

/* ============================================================================
   Design system del Marketing Hub — allineato al mockup della visione.
   Un solo set di token, due temi (chiaro/scuro). Le classi storiche
   (.card/.panel/.pill/.mtab/.inp…) restano invariate: qui cambia la pelle,
   non il markup delle venti viste già scritte.
   ========================================================================= */
:root{
  color-scheme:light;
  --accent:#2e7d32; --accent-d:#1b5e20; --accent-soft:#eef6ef; --on-accent:#fff;
  --bg:#eef1f4; --card:#fff; --field:#fff; --line:#e3e7ec; --line-2:#eef1f4;
  --text:#20303f; --muted:#7a8699; --muted-2:#9aa6b5;
  --chrome:#11251a; --chrome-txt:#cfe3d5; --chrome-mut:#7fae8c; --chrome-line:#254433;
  --good:#2e7d32; --good-bg:#e8f5e9; --warn:#c77700; --warn-bg:#fff5e0;
  --crit:#c62828; --crit-bg:#fdecea; --info:#5b7183; --info-bg:#eceff1;
  --shadow:0 1px 2px rgba(20,40,25,.04),0 8px 24px rgba(20,40,25,.05);
  /* Un riquadro che galleggia sopra la pagina (la chat dello specialista, 14/10/2026). */
  --shadow-alto:0 4px 10px rgba(20,40,25,.08),0 24px 60px rgba(20,40,25,.20);
  --radius:12px;
  /* alias storici: il codice già scritto continua a chiedere --green */
  --green:var(--accent); --green-d:var(--accent-d);
  /* Due token che le viste usavano SENZA che nessuno li avesse mai definiti: un
     `var(--err)` che non esiste non è un errore, è un colore che non c'è — e la riga
     «non salvata» perdeva il rosso proprio quando serviva leggerlo. Stanno qui come
     alias di ciò che avrebbero dovuto chiamare, così smettono di essere invisibili
     oggi; i loro otto usi vanno poi riscritti sui nomi veri. */
  --err:var(--crit); --bd:var(--line); --ok:var(--good); --ok:var(--good);
  /* Testo leggibile SOPRA i fondi pieni non-accento (pulsanti grigio/rosso, bandiere,
     riquadri selezionati): erano otto `#fff` cablati, cioè bianco su bianco il giorno
     in cui quel fondo cambia. */
  --on-crit:#fff; --on-info:#fff; --on-warn:#3a2a00;
  --focus:var(--accent);
  /* I colori dei progetti (modulo Progetti, 01/10/2026): otto tinte medie su cui le iniziali
     bianche degli avatar si leggono. Nel database un progetto salva il NOME del token
     (`pj-c3`), mai il colore, così il tema scuro le può ridefinire. */
  --pj-c1:#2e7d32; --pj-c2:#1f6f8b; --pj-c3:#8e4fa8; --pj-c4:#b4532a;
  --pj-c5:#8a6d00; --pj-c6:#51606f; --pj-c7:#b0275f; --pj-c8:#3f51b5;
  /* Priorità dei task (02/10/2026): 1 verde, non urgente → 5 rosso, urgente. */
  --pj-p1:#2e7d32; --pj-p2:#689f38; --pj-p3:#b58900; --pj-p4:#e06c00; --pj-p5:#c62828;
  /* I dodici colori dei tag (02/10/2026): si sceglie il nome (`t3`), il tema decide il colore. */
  --pj-t1:#c62828; --pj-t2:#e65100; --pj-t3:#a67c00; --pj-t4:#558b2f; --pj-t5:#2e7d32; --pj-t6:#00897b;
  --pj-t7:#0277bd; --pj-t8:#3949ab; --pj-t9:#6a1b9a; --pj-t10:#ad1457; --pj-t11:#6d4c41; --pj-t12:#546e7a;
}
/* Il tema segue il sistema finché l'utente non sceglie: la scelta esplicita
   (data-theme) deve vincere in entrambe le direzioni, non solo verso scuro. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --accent:#5bbf60; --accent-d:#8fdd93; --accent-soft:#16281c; --on-accent:#0b140e;
    --bg:#0d140f; --card:#151f18; --field:#101a13; --line:#26332a; --line-2:#1c271f;
    --text:#e7efe9; --muted:#8ba593; --muted-2:#6f8877;
    --chrome:#0a1610; --chrome-txt:#bcd4c2; --chrome-mut:#6f9a7c; --chrome-line:#1c3325;
    --good:#5bbf60; --good-bg:#14271a; --warn:#e0a13a; --warn-bg:#2a2113;
    --crit:#ef6c62; --crit-bg:#2a1614; --info:#9fb3bd; --info-bg:#1b2529;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
    --shadow-alto:0 4px 12px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.55);
    --err:var(--crit); --bd:var(--line); --ok:var(--good);
    --on-crit:#1a0d0c; --on-info:#101a1d; --on-warn:#2a2113; --focus:var(--accent);
    --pj-c1:#3d9443; --pj-c2:#2a83a3; --pj-c3:#9e62b8; --pj-c4:#c4663a;
    --pj-c5:#a07f0c; --pj-c6:#64768a; --pj-c7:#c43d72; --pj-c8:#5367cc;
    --pj-p1:#5bbf60; --pj-p2:#9ccc65; --pj-p3:#f2c94c; --pj-p4:#ff9a3d; --pj-p5:#ef6c62;
    --pj-t1:#ef6c62; --pj-t2:#ff9a3d; --pj-t3:#e8c547; --pj-t4:#9ccc65; --pj-t5:#5bbf60; --pj-t6:#4dd0c1;
    --pj-t7:#4fb3f0; --pj-t8:#8c9eff; --pj-t9:#c18ae0; --pj-t10:#f06fa4; --pj-t11:#bc9a8c; --pj-t12:#9fb3bd;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --accent:#5bbf60; --accent-d:#8fdd93; --accent-soft:#16281c; --on-accent:#0b140e;
  --bg:#0d140f; --card:#151f18; --field:#101a13; --line:#26332a; --line-2:#1c271f;
  --text:#e7efe9; --muted:#8ba593; --muted-2:#6f8877;
  --chrome:#0a1610; --chrome-txt:#bcd4c2; --chrome-mut:#6f9a7c; --chrome-line:#1c3325;
  --good:#5bbf60; --good-bg:#14271a; --warn:#e0a13a; --warn-bg:#2a2113;
  --crit:#ef6c62; --crit-bg:#2a1614; --info:#9fb3bd; --info-bg:#1b2529;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
  --shadow-alto:0 4px 12px rgba(0,0,0,.4),0 24px 60px rgba(0,0,0,.55);
  --err:var(--crit); --bd:var(--line);
  --on-crit:#1a0d0c; --on-info:#101a1d; --on-warn:#2a2113; --focus:var(--accent);
  --pj-c1:#3d9443; --pj-c2:#2a83a3; --pj-c3:#9e62b8; --pj-c4:#c4663a;
  --pj-c5:#a07f0c; --pj-c6:#64768a; --pj-c7:#c43d72; --pj-c8:#5367cc;
  --pj-p1:#5bbf60; --pj-p2:#9ccc65; --pj-p3:#f2c94c; --pj-p4:#ff9a3d; --pj-p5:#ef6c62;
  --pj-t1:#ef6c62; --pj-t2:#ff9a3d; --pj-t3:#e8c547; --pj-t4:#9ccc65; --pj-t5:#5bbf60; --pj-t6:#4dd0c1;
  --pj-t7:#4fb3f0; --pj-t8:#8c9eff; --pj-t9:#c18ae0; --pj-t10:#f06fa4; --pj-t11:#bc9a8c; --pj-t12:#9fb3bd;
}