/* ============================================================================
   temi.css - I TRE TEMI E LE DUE DENSITÀ DI COSTOCHEF (SPECIFICHE §13.6)
   Unica fonte dei colori: la usano sia le pagine del server (costochef.css) sia
   l'app React (blocco CSS di CostoChef.jsx). Un tema è solo un insieme di valori:
   nei componenti si scrive sempre var(--…), mai un colore.
   Attributi sull'elemento <html>: data-tema = marchio | neutro | cucina,
   data-densita = comoda | compatta.
   Riferimento grafico: tavole "CostoChef - direzioni grafiche" (claude.ai).
   ============================================================================ */

:root, [data-tema="marchio"] {
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #F2F4F7; --sf: #FFFFFF; --sf2: #F6F8FA; --bd: #DCE2E9; --riga: #EDF1F5;
  --tx: #13233A; --tx2: #44546A; --tx3: #56667B;
  --lato: #14315E; --lato-tx: rgba(255,255,255,.86); --lato-attivo: #24508F; --lato-attivo-tx: #FFFFFF;
  --lato-tit: rgba(255,255,255,.64); --lato-hover: rgba(255,255,255,.08); --lato-bordo: transparent;
  --pri: #1B4A8C; --pri-tx: #FFFFFF; --pri-hover: #163D74; --pri-tenue: #E6EEF9;
  --ok: #18743A; --okbg: #E2F3E7; --ko: #B42318; --kobg: #FDE8E6; --att: #8F5400; --attbg: #FFF1D6;
  --verde: #2E9E47; --verde-chiaro: #7ED492;
  --aiuto-bg: #13233A; --aiuto-tx: #F2F5FA; --aiuto-link: #8FD19E;
  --testata: #D6E4F7; --testata-bordo: #BCD0EC;   /* quadratino pastello dell'icona nel titolo delle card */
  --r: 16px; --rs: 12px; --ombra: 0 1px 2px rgba(19,35,58,.06), 0 8px 24px rgba(19,35,58,.06);
  color-scheme: light;
}
[data-tema="neutro"] {
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #F4F4F2; --sf: #FFFFFF; --sf2: #F8F8F6; --bd: #DEDED9; --riga: #ECECE8;
  --tx: #1B1B19; --tx2: #4B4B45; --tx3: #5E5E57;
  --lato: #FFFFFF; --lato-tx: #4B4B45; --lato-attivo: #E6EDF8; --lato-attivo-tx: #1B3F7A;
  --lato-tit: #5E5E57; --lato-hover: #F1F1EE; --lato-bordo: #DEDED9;
  --pri: #1B3F7A; --pri-tx: #FFFFFF; --pri-hover: #163363; --pri-tenue: #E6EDF8;
  --ok: #1F7536; --okbg: #E3F1E6; --ko: #A8261B; --kobg: #FBE9E7; --att: #8A4F00; --attbg: #FBF0DC;
  --verde: #1F7536; --verde-chiaro: #1F7536;
  --aiuto-bg: #1B1B19; --aiuto-tx: #F4F4F2; --aiuto-link: #A9C4F5;
  --testata: #DDE5F1; --testata-bordo: #C7D3E5;
  --r: 8px; --rs: 6px; --ombra: 0 1px 2px rgba(0,0,0,.05);
  color-scheme: light;
}
[data-tema="cucina"] {
  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #0D1624; --sf: #152235; --sf2: #1C2C44; --bd: #283B5B; --riga: #22324D;
  --tx: #EEF3FA; --tx2: #BCC8D9; --tx3: #97A8C0;
  --lato: #0A111C; --lato-tx: #BCC8D9; --lato-attivo: #1C2C44; --lato-attivo-tx: #EEF3FA;
  --lato-tit: #97A8C0; --lato-hover: #152235; --lato-bordo: #283B5B;
  --pri: #4CD273; --pri-tx: #0B1A12; --pri-hover: #62DC86; --pri-tenue: #163A26;
  --ok: #4CD273; --okbg: #163A26; --ko: #FF8A7C; --kobg: #3B1F26; --att: #F4B740; --attbg: #3A2E14;
  --verde: #4CD273; --verde-chiaro: #4CD273;
  --aiuto-bg: #EEF3FA; --aiuto-tx: #0D1624; --aiuto-link: #17692F;
  --testata: #23395A; --testata-bordo: #34507A;
  --r: 20px; --rs: 14px; --ombra: none;
  color-scheme: dark;
}

/* Densità: comoda (tablet, righe e caratteri grandi) o compatta (più righe visibili).
   Anche in compatta: testi >= 13 px, pulsanti >= 36 px (44 px sui dispositivi touch). */
:root, [data-densita="comoda"] {
  --d-card: 1.35rem 1.45rem; --d-card-gap: .45rem; --d-griglia: 1.25rem;
  --d-riga: 3rem; --d-cella: .5rem 1.1rem; --d-th: .8rem 1.1rem;
  --d-voce: .7rem .8rem; --d-pulsante: 2.75rem; --d-kpi: 2.05rem;
}
[data-densita="compatta"] {
  --d-card: .95rem 1.15rem; --d-card-gap: .25rem; --d-griglia: .85rem;
  --d-riga: 2.4rem; --d-cella: .35rem .9rem; --d-th: .55rem .9rem;
  --d-voce: .45rem .7rem; --d-pulsante: 2.25rem; --d-kpi: 1.7rem;
}
@media (pointer: coarse) { [data-densita="compatta"] { --d-pulsante: 2.75rem; } }