/* 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;
  /* Il rosso del marchio promozioni.it: azioni principali e voce corrente. Non e' "critico":
     il critico ha il suo token, piu' scuro, e non compare mai su un bottone d'azione. */
  --accento: #d4283f;
  --accento-scuro: #b01f35;
  --accento-tenue: #fde8eb;
  --su-accento: #ffffff;      /* testo SOPRA il fondo d'accento */

  /* La barra laterale del pannello esercente: scura in tutti e tre i temi. */
  --laterale: #141b2d;
  --laterale-forte: #ffffff;
  --laterale-voce: #c3c9d6;
  --laterale-tenue: #8790a3;
  --laterale-attiva: #26203a;
  --laterale-linea: #263049;

  /* 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: #f0566b;
    --accento-scuro: #ff7d8f;
    --accento-tenue: #3a1c23;
    --su-accento: #1f0a0f;
    --laterale: #0d121e;
    --laterale-forte: #ffffff;
  --laterale-voce: #c3c9d6;
    --laterale-tenue: #7c8598;
    --laterale-attiva: #2a1d2c;
    --laterale-linea: #1f2738;
    --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: #f0566b;
  --accento-scuro: #ff7d8f;
  --accento-tenue: #3a1c23;
  --su-accento: #1f0a0f;
  --laterale: #0d121e;
  --laterale-forte: #ffffff;
  --laterale-voce: #c3c9d6;
  --laterale-tenue: #7c8598;
  --laterale-attiva: #2a1d2c;
  --laterale-linea: #1f2738;
  --ok: #57c48f;
  --attenzione: #d3a04a;
  --critico: #e0796d;
  --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
}