/* ═══════════════════════════════════════════════════════════
   Savoré – Dunkelmodus (dunkles Waldgrün statt Schwarz)
   Standard ist immer das helle Theme; dunkel nur auf Wunsch (Einstellungen).
   Strategie: Farb-Tokens umdefinieren; wenige feste Farben gezielt überschreiben.
   --basil-700 ist im Dunkelmodus die helle Textfarbe, Füllflächen nutzen --btn.
   ═══════════════════════════════════════════════════════════ */
/* Aktiv nur, wenn :root[data-theme="dark"] gesetzt ist (Einstellung durch die Nutzer:innen, siehe js/settings.js). */

:root[data-theme="dark"] {
  color-scheme: dark;
  --btn: #2E7D4F;
  --btn-deep: #236A41;
  --artbase: #0C1B13;
  --surface: #11261A;
  --surface-2: #173223;

  --white: #11261A;
  --basil-50: #17301F;
  --basil-100: #214430;
  --basil-300: #3F7D59;
  --basil-500: #54B382;
  --basil-700: #86D4A6;
  --basil-900: #0C1B13;
  --basil-950: #08140D;
  --lemon: #F2C94C;
  --lemon-soft: #3B3519;
  --ink: #E8F3EB;
  --muted: #9BB5A5;
  --line: #28452F;
  --danger: #F28470;
  --shadow-s: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-m: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-l: 0 24px 60px rgba(0, 0, 0, .6);
  --soft-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

:root[data-theme="dark"] body { background: #0A150E; }

@media (min-width: 520px) {
 :root[data-theme="dark"] body { background: radial-gradient(circle at 20% 10%, #153024, #0A150E 60%); }
 }

:root[data-theme="dark"] .hero { background: linear-gradient(180deg, #153024, var(--white)); }

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #7C9686; }


/* Füllflächen: kräftiges Grün mit weißer Schrift */
:root[data-theme="dark"] .filter-btn,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .chip.on,
:root[data-theme="dark"] .diet.vegan,
:root[data-theme="dark"] .alt-go,
:root[data-theme="dark"] .sub-btn.on,
:root[data-theme="dark"] .day.today .day-label,
:root[data-theme="dark"] .add-item button { background: var(--btn); color: #fff; }

:root[data-theme="dark"] .chip.on { border-color: var(--btn); }

:root[data-theme="dark"] .btn-big,
:root[data-theme="dark"] .btn-cook,
:root[data-theme="dark"] #fab,
:root[data-theme="dark"] .sb.yes { background: linear-gradient(145deg, #3A9A64, var(--btn-deep)); color: #fff; }

:root[data-theme="dark"] .moment-actions .btn-primary { color: #fff; }

:root[data-theme="dark"] .btn-ghost { background: var(--basil-50); border-color: var(--basil-100); }

:root[data-theme="dark"] .btn-ghost.danger { background: #3A1E1A; border-color: #5C2F28; color: #FF9D8A; }

:root[data-theme="dark"] .seg-pill { background: #27442F; }

:root[data-theme="dark"] .seg { background: #14291D; }


/* Karten und Flächen etwas heller als der Hintergrund */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .sea-card,
:root[data-theme="dark"] .rec,
:root[data-theme="dark"] .sw-card,
:root[data-theme="dark"] .deck-card.front,
:root[data-theme="dark"] .sb,
:root[data-theme="dark"] .search,
:root[data-theme="dark"] .shop-item,
:root[data-theme="dark"] .slot.full,
:root[data-theme="dark"] .fb-ico { background: var(--surface-2); }

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .sea-card,
:root[data-theme="dark"] .rec { border-color: #2B4A33; }

:root[data-theme="dark"] .deck-card.back.b1 { background: #1B3A29; }

:root[data-theme="dark"] .deck-card.back.b2 { background: #24523A; }

:root[data-theme="dark"] .shop-item .box { background: var(--surface); }


/* Überlagerungen auf Bildern */
:root[data-theme="dark"] .heart { background: rgba(14, 31, 22, .82); }

:root[data-theme="dark"] .d-bar button { background: rgba(14, 31, 22, .88); }

:root[data-theme="dark"] .diet { background: rgba(14, 31, 22, .85); color: var(--basil-700); }

:root[data-theme="dark"] .diet.vegan { color: #fff; }

:root[data-theme="dark"] .stamp { background: rgba(14, 31, 22, .78); }

:root[data-theme="dark"] .slot { background: rgba(255, 255, 255, .04); }

:root[data-theme="dark"] .slot .slot-k,
:root[data-theme="dark"] .slot .slot-x { background: rgba(14, 31, 22, .85); color: var(--basil-700); }

:root[data-theme="dark"] #tabbar { background: rgba(14, 31, 22, .86); border-color: #28452F; }

:root[data-theme="dark"] .rate-badge { background: #08140D; }


/* Texte mit festen (hellen) Brauntönen */
:root[data-theme="dark"] .tag { background: var(--lemon-soft); color: #F2D88A; }

:root[data-theme="dark"] .tag.g { background: var(--basil-100); color: var(--basil-700); }

:root[data-theme="dark"] .sort-toggle.on { color: #F2D88A; border-color: #6B5C25; }

:root[data-theme="dark"] .season-ico { color: #F2D88A; }

:root[data-theme="dark"] .fridge-banner.on { border-color: #6B5C25; }

:root[data-theme="dark"] .streak-card { border-color: #6B5C25; }

:root[data-theme="dark"] .streak-card p { color: #E8D28A; }

:root[data-theme="dark"] .stars button { color: #35503F; }

:root[data-theme="dark"] .stars button.on { color: var(--lemon); }

:root[data-theme="dark"] .steps li.on::before { background-color: var(--btn); }


/* Illustrationen */
:root[data-theme="dark"] .empty-art svg.dish,
:root[data-theme="dark"] .sw-empty svg.dish { filter: brightness(.6) saturate(.8); }

:root[data-theme="dark"] .d-sheet { box-shadow: 0 -16px 40px rgba(0, 0, 0, .5); }

:root[data-theme="dark"] .sheet-backdrop { background: rgba(0, 0, 0, .6); }

:root[data-theme="dark"] .moment { background: rgba(0, 0, 0, .66); }

:root[data-theme="dark"] #toast { background: #08140D; border: 1px solid #28452F; }

:root[data-theme="dark"] .level-card { background: linear-gradient(145deg, #1D3D2A, #15301F); }

:root[data-theme="dark"] .level-ring::before { background: var(--surface); }

:root[data-theme="dark"] .stamp-badge { background: color-mix(in srgb, var(--c) 18%, #11261A); box-shadow: inset 0 0 0 4px #11261A, inset 0 0 0 5.500px var(--c); }

:root[data-theme="dark"] .stamp-item span { color: color-mix(in srgb, var(--c) 40%, #fff); }

:root[data-theme="dark"] .stamp-item.locked span { color: var(--muted); }


/* Aktive Spezial-Chips (Vom Grill, Fisch, Kein Fisch): Füllfarbe + weiße Schrift */
:root[data-theme="dark"] .chip.special.on { background: var(--btn); border-color: var(--btn); color: #fff; box-shadow: none; }