/* Zeni — token di colore per RUOLO (light).
 *
 * Fonte di verità: `docs/prodotto/DESIGN_TOKENS.md` §2 nel cervello
 * (visualizer: `docs/prodotto/Palette Zeni - Visualizer.html`).
 * L'app Flutter cabla gli stessi ruoli in `zeni-app/lib/core/theme/app_colors.dart`.
 *
 * REGOLA: nessun hex letterale fuori da questo file. I fogli di stile e le
 * pagine chiedono il RUOLO (`var(--accento)`), mai il valore.
 * Manca un ruolo? Si aggiunge QUI e si documenta — mai hardcodare «per ora».
 */

:root {
  /* ── Neutri · caldi ── */
  --pagina: #E8E6E4;          /* neu-100 · sfondo schermo */
  --superficie: #FFFFFF;      /* bianco puro: unica eccezione fuori-scala, voluta */
  --divisore: #D0CCC8;        /* neu-200 · hairline */
  --bordo: #D0CCC8;           /* neu-200 · contorni */
  --testo: #1C1A18;           /* neu-900 · ink primario */
  --muto: #6E665F;            /* neu-600 · testo secondario */
  --muto-chiaro: #A09992;     /* neu-400 · placeholder, disabilitati (mai testo informativo) */

  /* ── Accento · blu ── */
  --accento: #2C4F6D;         /* blu-700 · azioni, link, progresso */
  --accento-tinta: #DBE6F0;   /* blu-100 · sfondo soft, chip */
  --accento-premuto: #0F1A24; /* blu-900 · hover/pressed */

  /* ── Stati ── */
  --ok: #3B9166;              /* verde-600 */
  --pericolo: #DE4D21;        /* aran-500 */
  --pericolo-testo: #852E14;  /* aran-700 · testo pericolo su tinta */

  /* ── Marchio (identità, NON un colore funzionale) ── */
  --logo: #DE4D21;            /* dal 2026-07-09; prima #EE394A */
  --logo-premuto: #B13E1B;    /* aran-600 · stato premuto del CTA brand (owner 2026-07-24, scelta C) */

  /* ── Invarianti di tema ── */
  --su-pieno: #FFFFFF;        /* ink su fill pieno (accento / logo) */
  --ombra: rgba(0, 0, 0, 0.13);

  /* Superficie che NON si ribalta: serve ai widget di terze parti con colori
     statici (form Klaviyo). Vedi §Form Klaviyo in style.css. */
  --superficie-fissa: #FFFFFF;
}

/* Dark = stessi ruoli, valori diversi (DESIGN_TOKENS §2, colonna DARK).
 * Segue la preferenza di sistema: non c'è un interruttore nel sito.
 *
 * Non compaiono qui, di proposito:
 *   --logo / --su-pieno / --ombra  → invarianti di tema (DESIGN_TOKENS §2: la
 *   riga `logo` ha lo STESSO valore in light e dark).
 * In dark la separazione card↔pagina la fa l'ELEVAZIONE (superficie più chiara
 * della pagina), non l'ombra: sul fondo scuro l'ombra sparisce (§0). */
@media (prefers-color-scheme: dark) {
  :root {
    --pagina: #1C1A18;          /* neu-900 */
    --superficie: #37332F;      /* neu-800 · sale di luminosità con l'elevazione */
    --divisore: #534D47;        /* neu-700 */
    --bordo: #6E665F;           /* neu-600 */
    --testo: #E8E6E4;           /* neu-100 */
    --muto: #A09992;            /* neu-400 */
    --muto-chiaro: #8A8076;     /* neu-500 */
    --accento: #6E9CC4;         /* blu-400 */
    --accento-tinta: #1E3448;   /* blu-800 */
    --accento-premuto: #92B5D3; /* blu-300 · in dark il premuto SCHIARISCE */
    --ok: #6EC499;              /* verde-400 */
    --pericolo: #E4714E;        /* aran-400 */
    --pericolo-testo: #EB947A;  /* aran-300 */

    /* Stesso principio dell'accento: il premuto schiarisce. Scurire a aran-600
       porterebbe il CTA a 2,95:1 sulla pagina scura, sotto la soglia 3:1. */
    --logo-premuto: #E4714E;    /* aran-400 */
  }
}