/* 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. */

/* Nunito solo per titoli e numeri: il testo corrente resta sul font di sistema (fonts/FONTS.md). */
@font-face {
  font-family: "Nunito";
  src: url("/static/fonts/Nunito-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  src: url("/static/fonts/Nunito-latin-ext.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tema a 3 stati (→10 §2) ---------------------------------------------
   La palette completa vive su :root nudo; i blocchi scuri RIDEFINISCONO le stesse variabili,
   senza mai introdurne di nuove: nel terzo stato («come il sistema») non manca niente. */

:root {
  /* I colori dei social nelle icone di condivisione: sono i LORO marchi, uguali in chiaro e in scuro.
     Con testo bianco sopra il contrasto supera 3:1 (icone, non testo). */
  --social-whatsapp: #1f8f4e;
  --social-telegram: #1f7ab8;
  --social-facebook: #1a62d6;
  --social-x: #111111;
  --social-testo: #ffffff;
  --carta: #f5f4fa;
  --superficie: #ffffff;
  --inchiostro: #17152b;
  --inchiostro-tenue: #5d5a73;
  --linea: #e3e1ee;
  /* Un solo accento, per le azioni (→10 §4). */
  --accento: #4b38d9;
  --accento-scuro: #3a29b8;
  --accento-tenue: #ecebfd;
  --su-accento: #ffffff;

  /* I due lati di una sfida. Non sono semantica di esito: dicono solo «di qua» e «di la'».
     Scelti lontani dal verde, dall'ambra e dal rosso, che hanno un significato riservato. */
  --lato-a: #2f6fe4;
  --lato-a-tenue: #e5eefd;
  --lato-b: #c2309b;
  --lato-b-tenue: #fbe7f5;

  /* Semantica RISERVATA (→FE4). Verde = «vinto»: qui e' letteralmente l'opzione vincitrice.
     Ambra = «da fare», rosso = critico. Un numero neutro non e' verde solo perche' e' alto. */
  --ok: #18794e;
  --ok-tenue: #e3f4ea;
  --attenzione: #9a6212;
  --critico: #b3261e;

  --raggio: 12px;
  --raggio-pillola: 999px;
  --ombra: 0 1px 2px rgba(23, 21, 43, .05), 0 6px 18px rgba(23, 21, 43, .06);

  --font-testo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titoli: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scala tipografica fissa: sette valori, non se ne aggiungono altri a occhio. */
  --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; --sp-12: 48px;

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --carta: #121120;
    --superficie: #1b1a2d;
    --inchiostro: #ecebf5;
    --inchiostro-tenue: #a19eb8;
    --linea: #2c2a42;
    --accento: #8f80ff;
    --accento-scuro: #a99dff;
    --accento-tenue: #26224a;
    --su-accento: #0f0c29;
    --lato-a: #6ea1ff;
    --lato-a-tenue: #1a2643;
    --lato-b: #ec6fca;
    --lato-b-tenue: #3a1832;
    --ok: #4cc58b;
    --ok-tenue: #143223;
    --attenzione: #d9a14e;
    --critico: #f0857c;
    --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
  }
}

/* La scelta esplicita vince sempre, in entrambe le direzioni. */
:root[data-theme="dark"] {
  --carta: #121120;
  --superficie: #1b1a2d;
  --inchiostro: #ecebf5;
  --inchiostro-tenue: #a19eb8;
  --linea: #2c2a42;
  --accento: #8f80ff;
  --accento-scuro: #a99dff;
  --accento-tenue: #26224a;
  --su-accento: #0f0c29;
  --lato-a: #6ea1ff;
  --lato-a-tenue: #1a2643;
  --lato-b: #ec6fca;
  --lato-b-tenue: #3a1832;
  --ok: #4cc58b;
  --ok-tenue: #143223;
  --attenzione: #d9a14e;
  --critico: #f0857c;
  --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
}