/* Token del design system (→10 §1). L'UNICO file in cui puo' comparire un colore letterale.
   Una fitness function (FF07) fallisce se un #rrggbb spunta in un template o in app.css:
   e' quello che impedisce alla palette di sfilacciarsi feature dopo feature. */

/* --- Tema a 3 stati (→10 §2) ---------------------------------------------
   Gli stati sono TRE, non due: chiaro esplicito, scuro esplicito, e "come il sistema"
   (nessun attributo). L'errore classico e' definire un colore SOLO dentro un @media o un
   [data-theme]: in uno dei tre stati quel colore non esiste e l'elemento sparisce.
   Percio': la palette completa vive su :root nudo, e i blocchi sotto RIDEFINISCONO le
   stesse variabili, senza mai introdurne di nuove. */

:root {
  --carta: #f6f6f4;
  --superficie: #ffffff;
  --inchiostro: #14171a;
  --inchiostro-tenue: #5c646c;
  --linea: #e2e4e0;
  --accento: #0f5c4a;
  --accento-scuro: #0b4438;
  --accento-tenue: #e2efea;
  --su-accento: #ffffff;      /* testo SOPRA il fondo d'accento */

  /* Semantica RISERVATA (→FE4). Verde = "vinto", ambra = "da fare", rosso = critico.
     Un numero neutro non e' verde solo perche' e' positivo: il budget residuo mostrato
     in verde sembrava un risparmio, e non lo era. */
  --ok: #1c7a52;
  --attenzione: #9a6212;
  --critico: #a83a30;

  --raggio: 10px;
  --ombra: 0 1px 2px rgba(20, 23, 26, .05), 0 4px 12px rgba(20, 23, 26, .05);

  /* Scala tipografica fissa. Il punto non e' quali sette valori: e' che siano sette e
     che non se ne aggiungano altri a occhio, feature dopo feature. */
  --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 20px;
  --t-xl: 26px; --t-2xl: 34px; --t-3xl: 44px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

  /* →09 §E: il hover suggerisce, non sorprende. 120-150 ms. */
  --transizione: 130ms ease;
}

@media (prefers-color-scheme: dark) {
  /* La guardia :not([data-theme="light"]) e' cio' che fa funzionare il terzo stato:
     senza, chi ha scelto il chiaro su un sistema scuro resta al buio. */
  :root:not([data-theme="light"]) {
    --carta: #14171a;
    --superficie: #1c2024;
    --inchiostro: #e8eaec;
    --inchiostro-tenue: #9aa3ab;
    --linea: #2b3137;
    --accento: #4fbf9e;
    --accento-scuro: #6fd3b4;
    --accento-tenue: #17322b;
    --su-accento: #08201a;
    --ok: #57c48f;
    --attenzione: #d3a04a;
    --critico: #e0796d;
    --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
  }
}

/* La scelta esplicita vince sempre, in entrambe le direzioni. */
:root[data-theme="dark"] {
  --carta: #14171a;
  --superficie: #1c2024;
  --inchiostro: #e8eaec;
  --inchiostro-tenue: #9aa3ab;
  --linea: #2b3137;
  --accento: #4fbf9e;
  --accento-scuro: #6fd3b4;
  --accento-tenue: #17322b;
  --su-accento: #08201a;
  --ok: #57c48f;
  --attenzione: #d3a04a;
  --critico: #e0796d;
  --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
}