@font-face { font-family: "Fraunces"; src: url("/static/font/fraunces-latin-wght-normal.woff2") format("woff2");
             font-weight: 300 900; font-style: normal; font-display: optional; }
@font-face { font-family: "Fraunces"; src: url("/static/font/fraunces-latin-wght-italic.woff2") format("woff2");
             font-weight: 300 900; font-style: italic; font-display: optional; }
@font-face { font-family: "Figtree"; src: url("/static/font/figtree-latin-wght-normal.woff2") format("woff2");
             font-weight: 300 900; font-style: normal; font-display: optional; }

/* font-display: optional, non swap: con swap il testo nasce nel font di ripiego e poi cambia
   larghezza quando arriva quello vero, e titoli e menu cambiano numero di righe spingendo giu'
   la pagina (CLS 0,33 misurato con Lighthouse). Con optional il font si usa solo se arriva subito
   (e' precaricato in base.html), altrimenti dalla pagina successiva, gia' in cache. */

/* 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: #f6efe2;           /* crema di carta da pacchi: il fondo di tutto */
  --carta-scura: #ece2cf;     /* le fasce alternate */
  --superficie: #fffaf2;
  --inchiostro: #2a2118;      /* marrone quasi nero, non grigio: e' terra, non schermo */
  --inchiostro-tenue: #6e6152;
  --linea: #e2d5bd;
  --accento: #4b5e24;         /* oliva */
  --accento-scuro: #384818;
  --accento-tenue: #e7ecd6;
  --su-accento: #fffaf2;      /* testo SOPRA il fondo d'accento */
  --terra: #9e4a26;           /* terracotta: marchio e occhielli, mai semantico (4,7:1 sulla carta scura) */
  --grano: #c99a3c;           /* decorativo: numeri dei passi, filetti */
  --enfasi-su-accento: #e3bd6a;   /* le parole in corsivo sopra il fondo d'accento (4:1) */
  --velo: rgba(246, 239, 226, .92);   /* la crema sopra l'illustrazione dell'eroe */

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

  /* Due famiglie (10 §3): Fraunces, serif morbido e caldo, per i titoli; Figtree per il testo.
     Self-hosted in static/font: la CSP ammette solo font-src 'self'. */
  --serif: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --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: #1b1712;
    --carta-scura: #221d16;
    --superficie: #262019;
    --inchiostro: #f0e8d8;
    --inchiostro-tenue: #b3a68f;
    --linea: #3a3226;
    --accento: #a9c46c;
    --accento-scuro: #c0d98a;
    --accento-tenue: #2a3219;
    --su-accento: #161b0b;
    --terra: #e0956a;
    --grano: #e0b65f;
    --enfasi-su-accento: #5c420c;   /* sul verde chiaro del tema scuro (4,8:1) */
    --velo: rgba(27, 23, 18, .9);
    --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: #1b1712;
  --carta-scura: #221d16;
  --superficie: #262019;
  --inchiostro: #f0e8d8;
  --inchiostro-tenue: #b3a68f;
  --linea: #3a3226;
  --accento: #a9c46c;
  --accento-scuro: #c0d98a;
  --accento-tenue: #2a3219;
  --su-accento: #161b0b;
  --terra: #e0956a;
  --grano: #e0b65f;
  --enfasi-su-accento: #5c420c;
  --velo: rgba(27, 23, 18, .9);
  --ok: #57c48f;
  --attenzione: #d3a04a;
  --critico: #e0796d;
  --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
}