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

   La palette «mercato» (6/10/2026, ispirata al modello Bigshopmart scelto dal committente, senza copiarne codice):
   arancio pomodoro per marchio e azioni, una fascia scura verde-nera per testata e piede, fasce crema e salvia
   chiaro come fondo decorativo. La semantica resta riservata (→FE4): verde = «fatto», ambra = «da fare», cremisi =
   critico; l'arancio del marchio non e' ne' errore ne' avviso.

   Tema a 3 stati (→10 §2): la palette completa vive su :root nudo; i blocchi scuri RIDEFINISCONO
   le stesse variabili, senza introdurne di nuove. */

:root {
  --carta: #ffffff;           /* fondo della pagina */
  --carta-sezione: #f6f4ef;   /* fasce e sezioni (checkout, piede chiaro): un grigio caldo, da mercato */
  --superficie: #ffffff;      /* card */
  --inchiostro: #1f2a24;      /* titoli: quasi nero, una punta di verde */
  --testo: #4a554f;           /* corpo */
  --inchiostro-tenue: #6b7570;
  --linea: #e7e3da;
  --carta-stampa: #ffffff;       /* il foglio dei QR: carta bianca anche col tema scuro */
  --inchiostro-stampa: #000000;
  --accento: #c2410c;         /* arancio pomodoro: marchio e azioni (5,2:1 col bianco) */
  --accento-scuro: #9a3412;
  --accento-tenue: #fff1e6;
  --su-accento: #ffffff;      /* testo SOPRA il fondo d'accento */
  --barra: #16201b;           /* la fascia scura della testata e il piede */
  --su-barra: #ffffff;
  --su-barra-tenue: #c9d2cc;
  --fascia-1: #fff3d6;        /* fasce decorative della home: crema... */
  --fascia-2: #eaf3d9;        /* ...e salvia chiaro. Solo fondo: non dicono niente (→FE4) */
  --velo: rgba(0, 0, 0, .45); /* sopra le foto di copertina, per leggere il testo bianco */
  --su-foto: #ffffff;
  --segnaposto-1: #fff1e6;    /* fondo delle card senza foto: un gradiente, non un grigio morto */
  --segnaposto-2: #ffe2cc;

  /* Semantica RISERVATA (→FE4). Verde = "fatto", ambra = "da fare", rosso cremisi = critico: il cremisi tiene
     l'errore lontano dall'arancio del marchio. */
  --ok: #1f7a52;
  --attenzione: #a16207;
  --critico: #b3123a;
  --ok-tenue: #e3f4ec;
  --attenzione-tenue: #fef6d8;
  --critico-tenue: #fde7ec;

  --raggio: 8px;
  --raggio-grande: 14px;

  /* Caratteri serviti da noi (static/fonts/VENDOR.md, SIL OFL): Signika per tutto, Kaushan Script per i
     richiami calligrafici della home. Il sistema e' il ripiego mentre caricano. */
  --font: "Signika", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Kaushan Script", "Segoe Script", cursive;
  --ombra: 0 15px 35px rgba(50, 50, 93, .10), 0 5px 15px rgba(0, 0, 0, .07);
  --ombra-lieve: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
  --ombra-testata: 0 1px 10px rgba(50, 50, 93, .15);

  /* Scala tipografica fissa: sette valori, e non se ne aggiungono altri a occhio. */
  --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 20px;
  --t-xl: 26px; --t-2xl: 35px; --t-3xl: 44px;

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

  --contenitore: 1140px;
  --testata: 124px;           /* altezza della testata a due piani: le ancore e le pillole ci si agganciano */

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

@media (prefers-color-scheme: dark) {
  /* La guardia :not([data-theme="light"]) e' cio' che fa funzionare il terzo stato. */
  :root:not([data-theme="light"]) {
    --carta: #111513;
    --carta-sezione: #171c19;
    --superficie: #1d2420;
    --inchiostro: #eef2ee;
    --testo: #c3ccc6;
    --inchiostro-tenue: #8e9a93;
    --linea: #2c3530;
    --carta-stampa: #ffffff;       /* il foglio dei QR: carta bianca anche col tema scuro */
    --inchiostro-stampa: #000000;
    --accento: #ff8a4c;
    --accento-scuro: #ffa772;
    --accento-tenue: #3a2216;
    --su-accento: #1a0d05;
    --barra: #0b0f0d;
    --su-barra: #ffffff;
    --su-barra-tenue: #aab5ae;
    --fascia-1: #2a2416;
    --fascia-2: #1e2a18;
    --velo: rgba(0, 0, 0, .55);
    --su-foto: #ffffff;
    --segnaposto-1: #2b1d14;
    --segnaposto-2: #3a2618;
    --ok: #4fc493;
    --attenzione: #e5b13a;
    --critico: #ff6b81;
    --ok-tenue: #16332a;
    --attenzione-tenue: #3a3014;
    --critico-tenue: #3d1a22;
    --ombra: 0 15px 35px rgba(0, 0, 0, .45), 0 5px 15px rgba(0, 0, 0, .3);
    --ombra-lieve: 0 4px 6px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
    --ombra-testata: 0 1px 10px rgba(0, 0, 0, .5);
  }
}

/* La scelta esplicita vince sempre, in entrambe le direzioni. */
:root[data-theme="dark"] {
  --carta: #111513;
  --carta-sezione: #171c19;
  --superficie: #1d2420;
  --inchiostro: #eef2ee;
  --testo: #c3ccc6;
  --inchiostro-tenue: #8e9a93;
  --linea: #2c3530;
  --carta-stampa: #ffffff;       /* il foglio dei QR: carta bianca anche col tema scuro */
  --inchiostro-stampa: #000000;
  --accento: #ff8a4c;
  --accento-scuro: #ffa772;
  --accento-tenue: #3a2216;
  --su-accento: #1a0d05;
  --barra: #0b0f0d;
  --su-barra: #ffffff;
  --su-barra-tenue: #aab5ae;
  --fascia-1: #2a2416;
  --fascia-2: #1e2a18;
  --velo: rgba(0, 0, 0, .55);
  --su-foto: #ffffff;
  --segnaposto-1: #2b1d14;
  --segnaposto-2: #3a2618;
  --ok: #4fc493;
  --attenzione: #e5b13a;
  --critico: #ff6b81;
  --ok-tenue: #16332a;
  --attenzione-tenue: #3a3014;
  --critico-tenue: #3d1a22;
  --ombra: 0 15px 35px rgba(0, 0, 0, .45), 0 5px 15px rgba(0, 0, 0, .3);
  --ombra-lieve: 0 4px 6px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
  --ombra-testata: 0 1px 10px rgba(0, 0, 0, .5);
}

/* I temi dei locali (dominio/tema.py, 8/10/2026): il colore del marchio del sito di un locale, scelto fra questi.
   Solo i quattro colori dell'accento (e i segnaposto delle card), nei tre stati del tema; i colori di stato
   (ok, attenzione, critico) non si toccano (→FE4). Contrasti verificati: accento e accento-scuro >= 4,5:1 sul fondo,
   e il testo sull'accento idem. La classe sta sul <body> delle pagine del locale (viste: tema_locale). */
.tema-mare {
  --accento: #0e7490; --accento-scuro: #155e75; --accento-tenue: #ecfeff; --su-accento: #ffffff;
  --segnaposto-1: #ecfeff; --segnaposto-2: #cffafe;
}
.tema-notte {
  --accento: #1d4ed8; --accento-scuro: #1e40af; --accento-tenue: #eff6ff; --su-accento: #ffffff;
  --segnaposto-1: #eff6ff; --segnaposto-2: #dbeafe;
}
.tema-prugna {
  --accento: #7e22ce; --accento-scuro: #6b21a8; --accento-tenue: #faf5ff; --su-accento: #ffffff;
  --segnaposto-1: #faf5ff; --segnaposto-2: #f3e8ff;
}
.tema-cacao {
  --accento: #8a4b24; --accento-scuro: #6f3a1a; --accento-tenue: #fbf3ec; --su-accento: #ffffff;
  --segnaposto-1: #fbf3ec; --segnaposto-2: #f3dfcc;
}
.tema-ardesia {
  --accento: #334155; --accento-scuro: #1e293b; --accento-tenue: #f1f5f9; --su-accento: #ffffff;
  --segnaposto-1: #f1f5f9; --segnaposto-2: #e2e8f0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema-mare {
    --accento: #22d3ee; --accento-scuro: #67e8f9; --accento-tenue: #0f2f36; --su-accento: #0b0f0d;
    --segnaposto-1: #0c262b; --segnaposto-2: #0f3a42;
  }
  :root:not([data-theme="light"]) .tema-notte {
    --accento: #60a5fa; --accento-scuro: #93c5fd; --accento-tenue: #172554; --su-accento: #0b0f0d;
    --segnaposto-1: #121c3d; --segnaposto-2: #1a2a5c;
  }
  :root:not([data-theme="light"]) .tema-prugna {
    --accento: #c084fc; --accento-scuro: #d8b4fe; --accento-tenue: #2e1a47; --su-accento: #0b0f0d;
    --segnaposto-1: #24143a; --segnaposto-2: #331d50;
  }
  :root:not([data-theme="light"]) .tema-cacao {
    --accento: #e0a372; --accento-scuro: #ecc19c; --accento-tenue: #3a2618; --su-accento: #0b0f0d;
    --segnaposto-1: #2b1d14; --segnaposto-2: #3f2a1b;
  }
  :root:not([data-theme="light"]) .tema-ardesia {
    --accento: #94a3b8; --accento-scuro: #cbd5e1; --accento-tenue: #1e293b; --su-accento: #0b0f0d;
    --segnaposto-1: #18212f; --segnaposto-2: #243042;
  }
}
:root[data-theme="dark"] .tema-mare {
  --accento: #22d3ee; --accento-scuro: #67e8f9; --accento-tenue: #0f2f36; --su-accento: #0b0f0d;
  --segnaposto-1: #0c262b; --segnaposto-2: #0f3a42;
}
:root[data-theme="dark"] .tema-notte {
  --accento: #60a5fa; --accento-scuro: #93c5fd; --accento-tenue: #172554; --su-accento: #0b0f0d;
  --segnaposto-1: #121c3d; --segnaposto-2: #1a2a5c;
}
:root[data-theme="dark"] .tema-prugna {
  --accento: #c084fc; --accento-scuro: #d8b4fe; --accento-tenue: #2e1a47; --su-accento: #0b0f0d;
  --segnaposto-1: #24143a; --segnaposto-2: #331d50;
}
:root[data-theme="dark"] .tema-cacao {
  --accento: #e0a372; --accento-scuro: #ecc19c; --accento-tenue: #3a2618; --su-accento: #0b0f0d;
  --segnaposto-1: #2b1d14; --segnaposto-2: #3f2a1b;
}
:root[data-theme="dark"] .tema-ardesia {
  --accento: #94a3b8; --accento-scuro: #cbd5e1; --accento-tenue: #1e293b; --su-accento: #0b0f0d;
  --segnaposto-1: #18212f; --segnaposto-2: #243042;
}