/**
 * Modul: Design Tokens
 * Zweck: CSS Custom Properties fuer das gesamte Design-System
 * Abhängigkeiten: keine
 *
 * Aufbau:
 *   1. Neutral-Farbskala (50–950)
 *   2. Akzentfarben + Semantische Farben
 *   3. Modul-Akzentfarben
 *   4. Mahlzeit-Typ-Farben
 *   5. Prioritäten
 *   6. Overlay / Backdrop
 *   7. Schatten
 *   8. Border-Radien
 *   9. Typografie
 *  10. Abstände (4px-Raster)
 *  11. Layout
 *  12. Sidebar
 *  13. Übergänge
 *  14. Z-Indizes
 *  15. Dark Mode
 *
 * Dark-Mode-Architektur (§8.2):
 *   Private Tokens (--_name) halten den aktuellen Wert.
 *   Öffentliche Tokens (--name) zeigen immer auf var(--_name).
 *   Dark-Mode-Blöcke überschreiben nur die privaten Tokens —
 *   die öffentliche API bleibt stabil und muss nie doppelt geändert werden.
 */

:root {
  /* --------------------------------------------------------
   * 1. Farben - Neutral-Skala
   *    Leicht warmgetönt (kein reines Grau) für einladende Atmosphäre.
   *    Private --_neutral-* für Dark-Mode-Überschreibungen;
   *    öffentliche --neutral-* sind die stabile API.
   * -------------------------------------------------------- */
  --_neutral-50:  #FAFAF8;
  --neutral-50:   var(--_neutral-50);
  --_neutral-100: #F5F4F1;
  --neutral-100:  var(--_neutral-100);
  --_neutral-150: #EFEEE9;
  --neutral-150:  var(--_neutral-150);
  --_neutral-200: #E8E7E2;
  --neutral-200:  var(--_neutral-200);
  --_neutral-250: #DDDCD7;
  --neutral-250:  var(--_neutral-250);
  --_neutral-300: #D1D0CB;
  --neutral-300:  var(--_neutral-300);
  --_neutral-400: #B5B4AF;
  --neutral-400:  var(--_neutral-400);
  --_neutral-500: #8E8D89;
  --neutral-500:  var(--_neutral-500);
  --_neutral-600: #6C6B67;
  --neutral-600:  var(--_neutral-600);
  --_neutral-700: #4A4A46;
  --neutral-700:  var(--_neutral-700);
  --_neutral-800: #2E2E2B;
  --neutral-800:  var(--_neutral-800);
  --_neutral-900: #1C1C1A;
  --neutral-900:  var(--_neutral-900);
  --_neutral-950: #121211;
  --neutral-950:  var(--_neutral-950);

  /* Semantische Aliase (abwärtskompatibel) */
  --color-bg:             var(--neutral-100);
  --_color-surface:       #FFFFFF;
  --color-surface:        var(--_color-surface);
  /* surface-2: recessed/vertieft (dunkler als bg in dark mode — kein Elevations-Token) */
  --color-surface-2:      var(--neutral-50);
  --_color-surface-3:     var(--_neutral-150);
  --color-surface-3:      var(--_color-surface-3);
  --color-border:         var(--neutral-200);
  --color-border-subtle:  var(--neutral-150);
  --color-text-primary:   var(--neutral-900);
  --color-text-secondary: var(--neutral-600);  /* WCAG AA: ~5.0:1 auf weiß */
  --_color-text-tertiary: #6A6964;
  --color-text-tertiary:  var(--_color-text-tertiary);  /* WCAG AA: 4.61:1 auf --color-bg */
  --color-text-disabled:  var(--neutral-300);
  --color-text-on-accent: #ffffff;  /* Weißer Text auf farbigen Hintergründen */

  /* Elevation-Stufen für interaktive Listen-Elemente (More-Sheet, Search) */
  --_color-surface-elevated: var(--_neutral-50);
  --color-surface-elevated:  var(--_color-surface-elevated);
  --_color-surface-hover:    var(--_neutral-150);
  --color-surface-hover:     var(--_color-surface-hover);

  /* --------------------------------------------------------
   * 2. Farben - Akzent (konfigurierbar)
   *    Indigo mit leichtem Violett-Drall — charaktervoller als Default-Blau,
   *    harmoniert mit --color-accent-secondary und --module-calendar.
   * -------------------------------------------------------- */
  --_color-accent:            #4F46E5;
  --color-accent:             var(--_color-accent);   /* Indigo-600 — 4.93:1 auf weiß */
  --_color-accent-hover:      #4338CA;
  --color-accent-hover:       var(--_color-accent-hover);   /* Indigo-700 */
  --_color-accent-active:     #3730A3;
  --color-accent-active:      var(--_color-accent-active);  /* Indigo-800 */
  --color-accent-deep:        #2E2D82;       /* Tiefer Akzent für Gradienten, Wetter-Widget */

  /* Greeting-Gradienten: Tageszeit-Varianten */
  --greeting-morning-from: #C2410C;  /* Orange-700 — Morgensonne */
  --greeting-morning-to:   #D97706;  /* Amber-600 */
  --greeting-evening-from: #6D28D9;  /* Violet-700 */
  --greeting-evening-to:   #8250DF;  /* = --module-calendar */
  --_color-accent-secondary:  #7C5CFC;
  --color-accent-secondary:   var(--_color-accent-secondary);  /* Sekundärer Akzent für Logo-Gradient */
  --_color-accent-light:      #EEF2FF;
  --color-accent-light:       var(--_color-accent-light);   /* Indigo-50 */
  --_color-accent-subtle:     #E0E7FF;
  --color-accent-subtle:      var(--_color-accent-subtle);  /* Indigo-100 */
  --_color-btn-primary:       #4338CA;
  --color-btn-primary:        var(--_color-btn-primary);    /* Indigo-700 — WCAG AAA: 7.04:1 auf weiß */
  --_color-btn-primary-hover: #3730A3;
  --color-btn-primary-hover:  var(--_color-btn-primary-hover);  /* Indigo-800 */

  /* --------------------------------------------------------
   * 3. Farben - Semantisch
   * -------------------------------------------------------- */
  --_color-success:       #15803D;
  --color-success:        var(--_color-success);
  --color-success-hover:  #166534;
  --_color-success-light: #DAFBE1;
  --color-success-light:  var(--_color-success-light);
  --_color-warning:       #A15C0A;
  --color-warning:        var(--_color-warning);   /* Hue-Trennung von --module-meals, 5.23:1 auf weiß */
  --color-warning-hover:  #824908;
  --_color-warning-light: #FFF4D4;
  --color-warning-light:  var(--_color-warning-light);
  --_color-danger:        #B91C1C;
  --color-danger:         var(--_color-danger);    /* Red-700 — 6.90:1 auf weiß */
  --color-danger-hover:   #991B1B;                 /* Red-800 */
  --_color-danger-light:  #FFE2E0;
  --color-danger-light:   var(--_color-danger-light);
  --color-info:           #0969DA;  /* WCAG AA: ~4.6:1 auf weiß */
  --color-info-hover:     #0550AE;
  --_color-info-light:    #DDF4FF;
  --color-info-light:     var(--_color-info-light);

  /* Toast-Textfarben: weiß auf dunklen semantischen Bg (light mode).
   * Dark mode überschreibt auf dunkel, weil --color-success/warning/danger
   * dort vivid/hell sind und weißen Text unleserlich machen würden. */
  --_toast-success-text: var(--color-text-on-accent);
  --toast-success-text:  var(--_toast-success-text);
  --_toast-warning-text: var(--color-text-on-accent);
  --toast-warning-text:  var(--_toast-warning-text);
  --_toast-danger-text:  var(--color-text-on-accent);
  --toast-danger-text:   var(--_toast-danger-text);

  /* --------------------------------------------------------
   * 4. Farben - Modul-Akzente
   *    Jedes Modul hat eine eigene dezente Akzentfarbe.
   *    Einsatz in Modul-Headern, Icons, aktiven States.
   *    Domain-Farben von Severity entkoppelt — siehe §2.5 des Redesign-Vorschlags.
   * -------------------------------------------------------- */
  --_module-dashboard: #4F46E5;
  --module-dashboard:  var(--_module-dashboard);  /* Indigo - Übersicht (= --color-accent, bewusster Share) */
  --_module-tasks:     #15803D;
  --module-tasks:      var(--_module-tasks);       /* Grün - Erledigung (= --color-success, bewusster Share) */
  --_module-calendar:  #8250DF;
  --module-calendar:   var(--_module-calendar);    /* Violett - Termine, Zeit */
  --_module-meals:     #C2410C;
  --module-meals:      var(--_module-meals);       /* Orange-700 - Essen, Wärme */
  --_module-recipes:   #0D9488;
  --module-recipes:    var(--_module-recipes);     /* Teal-600 - Rezepte */
  --_module-shopping:  #DB2777;
  --module-shopping:   var(--_module-shopping);    /* Pink-600 - Einkaufen (trennt von Meals) */
  --_module-notes:     #A16207;
  --module-notes:      var(--_module-notes);       /* Amber-700 - Notizen (6.3:1 auf weiß — WCAG AA) */
  --_module-contacts:  #0969DA;
  --module-contacts:   var(--_module-contacts);    /* Kräftiges Blau - Kontakte */
  --_module-birthdays: #E11D48;
  --module-birthdays:  var(--_module-birthdays);   /* Rose - Geburtstage */
  --_module-budget:    #0F766E;
  --module-budget:     var(--_module-budget);      /* Teal-700 - Finanzen, Stabilität */
  --_module-settings:   #6E7781;
  --module-settings:    var(--_module-settings);   /* Grau - Konfiguration */
  --_module-reminders:  #0E7490;
  --module-reminders:   var(--_module-reminders);  /* Cyan-700 - Erinnerungen, 6.3:1 auf weiß — WCAG AA */

  /* --------------------------------------------------------
   * 5. Farben - Mahlzeit-Typen
   *    Zentrale Tokens statt Hardcoding in meals.css
   * -------------------------------------------------------- */
  --_meal-breakfast:       #A15C0A;
  --meal-breakfast:        var(--_meal-breakfast);       /* Morgensonne-Amber (= --color-warning, bewusster Share) */
  --_meal-breakfast-light: #FFF4D4;
  --meal-breakfast-light:  var(--_meal-breakfast-light);
  --meal-lunch:            #2DA44E;
  --_meal-lunch-light:     #DAFBE1;
  --meal-lunch-light:      var(--_meal-lunch-light);
  --_meal-dinner:          #4F46E5;
  --meal-dinner:           var(--_meal-dinner);          /* Indigo - ruhiger Tag-Ausklang (= --color-accent) */
  --_meal-dinner-light:    #EEF2FF;
  --meal-dinner-light:     var(--_meal-dinner-light);
  --meal-snack:            #C2410C;                      /* = --module-meals — Snack ist Sub-Domain */
  --_meal-snack-light:     #FFECE3;
  --meal-snack-light:      var(--_meal-snack-light);

  /* --------------------------------------------------------
   * 6. Farben - Prioritäten
   * -------------------------------------------------------- */
  --color-priority-none:   var(--neutral-400);
  --color-priority-low:    var(--neutral-500);
  --color-priority-medium: #A16207;   /* Amber-700 — trennt von --color-warning + --module-meals */
  --color-priority-high:   #C2410C;   /* = --module-meals (bewusster Share: „heiß") */
  --color-priority-urgent: #B91C1C;   /* = --color-danger (bewusster Share: „gefährlich") */

  /* Hintergrundfarben für Priority-Badges */
  --_color-priority-none-bg:   rgba(142, 141, 137, 0.08);
  --color-priority-none-bg:    var(--_color-priority-none-bg);
  --_color-priority-low-bg:    rgba(142, 141, 137, 0.12);
  --color-priority-low-bg:     var(--_color-priority-low-bg);
  --_color-priority-medium-bg: rgba(161, 98, 7, 0.12);
  --color-priority-medium-bg:  var(--_color-priority-medium-bg);
  --_color-priority-high-bg:   rgba(194, 65, 12, 0.12);
  --color-priority-high-bg:    var(--_color-priority-high-bg);
  --_color-priority-urgent-bg: rgba(185, 28, 28, 0.12);
  --color-priority-urgent-bg:  var(--_color-priority-urgent-bg);

  /* --------------------------------------------------------
   * 7. Overlay / Backdrop
   * -------------------------------------------------------- */
  --_color-overlay:       rgba(0, 0, 0, 0.45);
  --color-overlay:        var(--_color-overlay);
  --_color-overlay-light: rgba(0, 0, 0, 0.2);
  --color-overlay-light:  var(--_color-overlay-light);
  --color-overlay-glass:  rgba(0, 0, 0, 0.30);  /* Glass-Modal-Overlay (zwischen overlay-light und overlay) */
  --color-backdrop-fab:   rgba(0, 0, 0, 0.25);
  --color-backdrop-glass: rgba(0, 0, 0, 0.18);  /* Subtiler FAB-Backdrop hinter Glass */

  /* Glass-Overlays (fuer Elemente auf farbigen Hintergruenden) */
  --color-glass:       rgba(255, 255, 255, 0.18);
  --color-glass-hover: rgba(255, 255, 255, 0.3);
  --color-glass-border: rgba(255, 255, 255, 0.15);
  --color-danger-translucent:  rgba(255, 59, 48, 0.35);
  --color-warning-translucent: rgba(245, 158, 11, 0.28);
  --color-soon: var(--color-warning);

  /* --------------------------------------------------------
   * 8. Schatten
   *    3 Stufen: subtle (Karten), medium (Dropdowns, Hover),
   *    elevated (Modals, FAB).
   * -------------------------------------------------------- */
  --shadow-drop-icon: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  --_shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
  --shadow-sm:  var(--_shadow-sm);
  --_shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  var(--_shadow-md);
  --_shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-lg:  var(--_shadow-lg);
  --_shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-xl:  var(--_shadow-xl);
  --_shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-xs:  var(--_shadow-xs);

  /* --------------------------------------------------------
   * 9. Border-Radien
   * -------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* --------------------------------------------------------
   * 10. Typografie
   *     System-Font-Stack laut Redesign-Spec.
   *     Skala von xs (12px) bis 4xl (36px).
   * -------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  /* Size-Skala */
  --text-2xs:  0.625rem;   /* 10px - Sehr kleine Badges (z.B. Erinnerungs-Zähler) */
  --text-xs:   0.75rem;    /* 12px - Minimum, Captions, Badges, Nav-Labels */
  --text-sm:   0.8125rem;  /* 13px - Small/Secondary */
  --text-base: 0.9375rem;  /* 15px - Body (Desktop) */
  --text-md:   1rem;       /* 16px - Body (Mobile), Inputs */
  --text-lg:   1.125rem;   /* 18px - Section-Title */
  --text-xl:   1.25rem;    /* 20px - Subtitle */
  --text-2xl:  1.5rem;     /* 24px - Page-Title */
  --text-3xl:  1.875rem;   /* 30px - Page-Title Desktop */
  --text-4xl:  2.25rem;    /* 36px - Hero/Greeting */

  /* Line-Heights */
  --line-height-tight:   1.25;
  --line-height-snug:    1.375;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.625;

  /* Font-Weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* --------------------------------------------------------
   * 11. Abstände - 4px-Raster
   * -------------------------------------------------------- */
  --space-0:  0px;
  --space-px: 1px;
  --space-0h: 2px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --------------------------------------------------------
   * 11b. Touch-Target Sizes
   * -------------------------------------------------------- */
  --target-sm: 32px;    /* Visuelle Größe (z.B. Logos) — kein Touch-Target */
  --target-md: 40px;    /* Desktop Touch-Target (Maus) */
  --target-lg: 48px;    /* Mobile Touch-Target (Finger) */
  --target-base: 44px;  /* iOS-Minimum Touch-Target (44pt) */

  /* --------------------------------------------------------
   * 12. Layout
   * -------------------------------------------------------- */
  --nav-height-mobile: 56px;
  --nav-bottom-height: calc(var(--nav-height-mobile) + 12px); /* scroll (56px) + dots-indicator (12px) */
  --sidebar-width: 56px;             /* collapsed icon-only (1024–1279px) */
  --sidebar-width-expanded: 220px;   /* full sidebar (1440px+), max 240px laut Spec */
  --content-max-width: 1280px;
  --content-max-width-narrow: 720px;
  --cal-hour-height: 56px;

  /* --------------------------------------------------------
   * 13. Sidebar
   *     Reduzierter Neumorphismus - subtilere Schatten.
   * -------------------------------------------------------- */
  --_sidebar-bg:           var(--_neutral-100);
  --sidebar-bg:            var(--_sidebar-bg);
  --_sidebar-shadow-light: rgba(255, 255, 255, 0.6);
  --sidebar-shadow-light:  var(--_sidebar-shadow-light);
  --_sidebar-shadow-dark:  rgba(0, 0, 0, 0.08);
  --sidebar-shadow-dark:   var(--_sidebar-shadow-dark);
  --safe-area-inset-top:    env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);

  /* --------------------------------------------------------
   * 14. Übergänge
   *     fast=150ms, base=250ms, slow=400ms (laut Redesign-Spec)
   * -------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* --------------------------------------------------------
   * 15. Z-Indizes
   * -------------------------------------------------------- */
  --z-base:    0;
  --z-card:    1;
  --z-sticky:  10;
  --z-dropdown: 50;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;

  /* --------------------------------------------------------
   * 16. Glass-Design-System (Liquid Glass Layer)
   *     Additive Tokens – bestehende Tokens werden nicht verändert.
   *     Aktivierung per @supports (backdrop-filter) in Komponenten.
   *
   *     Aufbau:
   *       a) Glass-Hintergründe
   *       b) Blur-Stufen
   *       c) Opazitäten
   *       d) Highlights / Specular
   *       e) Glass-Schatten
   *       f) Glass-Radien
   *       g) Glass-Übergänge
   * -------------------------------------------------------- */

  /* a) Glass-Hintergründe */
  --_glass-bg:          rgba(255, 255, 255, 0.72);
  --glass-bg:           var(--_glass-bg);
  --_glass-bg-hover:    rgba(255, 255, 255, 0.82);
  --glass-bg-hover:     var(--_glass-bg-hover);
  --_glass-bg-elevated: rgba(255, 255, 255, 0.88);
  --glass-bg-elevated:  var(--_glass-bg-elevated);
  --_glass-border:      rgba(255, 255, 255, 0.60);
  --glass-border:       var(--_glass-border);
  --_glass-border-subtle: rgba(255, 255, 255, 0.35);
  --glass-border-subtle:  var(--_glass-border-subtle);
  --glass-border-overlay: rgba(255, 255, 255, 0.10);  /* immer-dunkle Surfaces (Toasts, Overlays) */

  /* a2) Glass-Hintergründe: Vibrancy-Stufe (transparenter, mehr Durchschein) */
  --_glass-bg-card:       rgba(255, 255, 255, 0.52);
  --glass-bg-card:        var(--_glass-bg-card);
  --_glass-bg-card-hover: rgba(255, 255, 255, 0.65);
  --glass-bg-card-hover:  var(--_glass-bg-card-hover);
  --_glass-bg-input:      rgba(255, 255, 255, 0.48);
  --glass-bg-input:       var(--_glass-bg-input);
  --_glass-bg-toolbar:    rgba(255, 255, 255, 0.58);
  --glass-bg-toolbar:     var(--_glass-bg-toolbar);

  /* a3) Tint: Modul-Akzentfarbe als subtile Glass-Tonung */
  --_glass-tint-strength: 6%;
  --glass-tint-strength:  var(--_glass-tint-strength);

  /* b) Blur-Stufen */
  --blur-2xs: blur(2px);
  --blur-xs:  blur(4px);
  --blur-sm:  blur(8px);
  --blur-md:  blur(16px);
  --blur-lg:  blur(28px);
  --blur-xl:  blur(48px);

  /* c) Opazitäten */
  --opacity-glass-subtle:   0.65;
  --opacity-glass-base:     0.80;
  --opacity-glass-elevated: 0.92;

  /* d) Highlights / Specular */
  --_glass-highlight:        rgba(255, 255, 255, 0.70);
  --glass-highlight:         var(--_glass-highlight);
  --_glass-highlight-subtle: rgba(255, 255, 255, 0.35);
  --glass-highlight-subtle:  var(--_glass-highlight-subtle);
  --glass-highlight-mid:     rgba(255, 255, 255, 0.50);  /* Mittlere Stärke für Outlines auf dunklen Surfaces */

  /* d2) Inset-Specular: Oberrand-Sheen für Glass-Elemente (volle inset-Kurzform) */
  --glass-inset-soft:     inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --glass-inset-base:     inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --glass-inset-medium:   inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --glass-inset-elevated: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --glass-inset-strong:   inset 0 1px 0 rgba(255, 255, 255, 0.32);

  /* d3) Dark-Inset-Specular: Unterrand-Schatten (komplementär zu den White-Insets oben) */
  --glass-inset-bottom-base:  inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  --glass-inset-bottom-hover: inset 0 -1px 0 rgba(0, 0, 0, 0.16);
  --glass-inset-thumb:        inset 0  1px 0 rgba(255, 255, 255, 0.90),
                              inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  --glass-inset-input:        inset 0  1px 2px rgba(0, 0, 0, 0.04);

  /* e) Glass-Schatten */
  --_glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.55);
  --glass-shadow-sm:  var(--_glass-shadow-sm);
  --_glass-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.50);
  --glass-shadow-md:  var(--_glass-shadow-md);
  --_glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.45);
  --glass-shadow-lg:  var(--_glass-shadow-lg);

  /* f) Glass-Radien */
  --radius-glass-card:   20px;
  --radius-glass-inner:  14px;
  --radius-glass-chip:   var(--radius-full);
  --radius-glass-button: var(--radius-full);

  /* g) Glass-Übergänge */
  --ease-glass:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-glass: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ================================================================
 * Dark Mode — private Tokens überschreiben, öffentliche API bleibt stabil.
 *
 * Zwei Selektoren aktivieren Dark Mode:
 *   1. @media (prefers-color-scheme: dark) — System-Präferenz (CSS-native,
 *      kein JS erforderlich, funktioniert auch wenn matchMedia blockiert ist)
 *   2. [data-theme="dark"] — expliziter Override durch den Nutzer
 *
 * Explizites Light ([data-theme="light"]) blockiert den @media-Block via :not().
 * Explizites Dark ([data-theme="dark"]) überschreibt den @media-Block, falls OS
 * auf Light steht.
 * ================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Neutral-Skala — tiefer warm (Option A) */
    --_neutral-50:  #141413;
    --_neutral-100: #1A1A18;
    --_neutral-150: #222220;
    --_neutral-200: #2A2A28;
    --_neutral-250: #333331;
    --_neutral-300: #3D3D3A;
    --_neutral-400: #636360;
    --_neutral-500: #8E8D89;
    --_neutral-600: #AEADB0;
    --_neutral-700: #C8C7C3;
    --_neutral-800: #E2E1DC;
    --_neutral-900: #F5F4F1;
    --_neutral-950: #FAFAF8;

    --_color-surface:          #222220;
    --_color-surface-3:        #2A2A28;
    --_color-surface-elevated: #2A2A28;
    --_color-surface-hover:    #333331;

    --_sidebar-bg:           #141413;
    --_sidebar-shadow-light: rgba(255, 255, 255, 0.04);
    --_sidebar-shadow-dark:  rgba(0, 0, 0, 0.4);

    --_color-accent:            #818CF8;
    --_color-accent-hover:      #6366F1;
    --_color-accent-active:     #4F46E5;
    --_color-accent-light:      #2E2D5B;
    --_color-accent-subtle:     #252255;
    --_color-btn-primary:       #6366F1;
    --_color-btn-primary-hover: #4F46E5;
    --_color-accent-secondary:  #A78BFA;

    --_color-success:       #4ADE80;
    --_color-warning:       #F59E0B;
    --_color-danger:        #FCA5A5;
    --_color-text-tertiary: #A3A3A0;
    --_color-success-light: #1A3325;
    --_color-warning-light: #332400;
    --_color-danger-light:  #3D1C1A;
    --_color-info-light:    #1A2D40;

    /* Toast: dunkler Text auf vividen Farben (#4ADE80, #F59E0B, #FCA5A5) */
    --_toast-success-text: #062010;   /* 13.6:1 auf #4ADE80 */
    --_toast-warning-text: #291400;   /* 13.1:1 auf #F59E0B */
    --_toast-danger-text:  #330808;   /* 15.1:1 auf #FCA5A5 */

    --_module-dashboard: #818CF8;
    --_module-tasks:     #4ADE80;
    --_module-calendar:  #A78BFA;
    --_module-meals:     #FB923C;
    --_module-shopping:  #F472B6;
    --_module-notes:     #FCD34D;
    --_module-contacts:  #60A5FA;
    --_module-birthdays: #FB7185;
    --_module-budget:      #2DD4BF;
    --_module-settings:    #94A3B8;
    --_module-reminders:   #22D3EE;   /* Cyan-400 */

    --_meal-breakfast:       #F59E0B;
    --_meal-breakfast-light: #332400;
    --_meal-lunch-light:     #1A3325;
    --_meal-dinner:          #818CF8;
    --_meal-dinner-light:    #2E2D5B;
    --_meal-snack-light:     #3D2010;

    --_color-priority-none-bg:   rgba(142, 141, 137, 0.12);
    --_color-priority-low-bg:    rgba(142, 141, 137, 0.18);
    --_color-priority-medium-bg: rgba(230, 147, 10, 0.18);
    --_color-priority-high-bg:   rgba(212, 81, 30, 0.18);
    --_color-priority-urgent-bg: rgba(229, 83, 75, 0.18);

    --_color-overlay:       rgba(0, 0, 0, 0.6);
    --_color-overlay-light: rgba(0, 0, 0, 0.35);

    --_shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --_shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --_shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
    --_shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.60), 0 4px 12px rgba(0, 0, 0, 0.25);
    --_shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);

    --_glass-bg:               rgba(28, 28, 26, 0.75);
    --_glass-bg-hover:         rgba(38, 38, 36, 0.82);
    --_glass-bg-elevated:      rgba(46, 46, 44, 0.90);
    --_glass-border:           rgba(255, 255, 255, 0.10);
    --_glass-border-subtle:    rgba(255, 255, 255, 0.06);
    --_glass-highlight:        rgba(255, 255, 255, 0.09);
    --_glass-highlight-subtle: rgba(255, 255, 255, 0.05);
    --_glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.07);
    --_glass-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --_glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --_glass-bg-card:          rgba(26, 26, 24, 0.50);
    --_glass-bg-card-hover:    rgba(36, 36, 34, 0.62);
    --_glass-bg-input:         rgba(22, 22, 20, 0.45);
    --_glass-bg-toolbar:       rgba(28, 28, 26, 0.55);
    --_glass-tint-strength:    8%;
  }
}

[data-theme="dark"] {
    /* Neutral-Skala — tiefer warm (Option A) */
    --_neutral-50:  #141413;
    --_neutral-100: #1A1A18;
    --_neutral-150: #222220;
    --_neutral-200: #2A2A28;
    --_neutral-250: #333331;
    --_neutral-300: #3D3D3A;
    --_neutral-400: #636360;
    --_neutral-500: #8E8D89;
    --_neutral-600: #AEADB0;   /* WCAG AA: ~5.6:1 auf #222220 */
    --_neutral-700: #C8C7C3;
    --_neutral-800: #E2E1DC;
    --_neutral-900: #F5F4F1;
    --_neutral-950: #FAFAF8;

    /* Semantische Aliase folgen automatisch via var(--neutral-*) */
    --_color-surface:          #222220;
    --_color-surface-3:        #2A2A28;
    --_color-surface-elevated: #2A2A28;
    --_color-surface-hover:    #333331;

    /* Sidebar */
    --_sidebar-bg:           #141413;
    --_sidebar-shadow-light: rgba(255, 255, 255, 0.04);
    --_sidebar-shadow-dark:  rgba(0, 0, 0, 0.4);

    /* Akzent - Dark Mode (Indigo bleibt, nur Lightness/Saturation rücken) */
    --_color-accent:            #818CF8;   /* Indigo-400 — 6.8:1 auf #2A2A28 */
    --_color-accent-hover:      #6366F1;   /* Indigo-500 */
    --_color-accent-active:     #4F46E5;   /* Indigo-600 (= Light-Primary, Mirroring) */
    --_color-accent-light:      #2E2D5B;
    --_color-accent-subtle:     #252255;
    --_color-btn-primary:       #6366F1;   /* Indigo-500 — 5.5:1 auf Dark-Surface */
    --_color-btn-primary-hover: #4F46E5;
    --_color-accent-secondary:  #A78BFA;

    /* Semantische Farben */
    --_color-success:       #4ADE80;
    --_color-warning:       #F59E0B;
    --_color-danger:        #FCA5A5;
    --_color-text-tertiary: #A3A3A0;
    --_color-success-light: #1A3325;
    --_color-warning-light: #332400;
    --_color-danger-light:  #3D1C1A;
    --_color-info-light:    #1A2D40;

    /* Toast: dunkler Text auf vividen Farben (#4ADE80, #F59E0B, #FCA5A5) */
    --_toast-success-text: #062010;   /* 13.6:1 auf #4ADE80 */
    --_toast-warning-text: #291400;   /* 13.1:1 auf #F59E0B */
    --_toast-danger-text:  #330808;   /* 15.1:1 auf #FCA5A5 */

    /* Modul-Akzente (Entflechtung Meals/Shopping spiegelt Light-Mode) */
    --_module-dashboard: #818CF8;   /* Indigo-400 */
    --_module-tasks:     #4ADE80;
    --_module-calendar:  #A78BFA;
    --_module-meals:     #FB923C;   /* Orange-400 */
    --_module-shopping:  #F472B6;   /* Pink-400 */
    --_module-notes:     #FCD34D;
    --_module-contacts:  #60A5FA;
    --_module-birthdays: #FB7185;
    --_module-budget:      #2DD4BF;   /* Teal-400 */
    --_module-settings:    #94A3B8;
    --_module-reminders:   #22D3EE;   /* Cyan-400 */

    /* Mahlzeit-Typ */
    --_meal-breakfast:       #F59E0B;
    --_meal-breakfast-light: #332400;
    --_meal-lunch-light:     #1A3325;
    --_meal-dinner:          #818CF8;   /* Indigo-400 */
    --_meal-dinner-light:    #2E2D5B;
    --_meal-snack-light:     #3D2010;

    /* Priority-Badge Hintergründe */
    --_color-priority-none-bg:   rgba(142, 141, 137, 0.12);
    --_color-priority-low-bg:    rgba(142, 141, 137, 0.18);
    --_color-priority-medium-bg: rgba(230, 147, 10, 0.18);
    --_color-priority-high-bg:   rgba(212, 81, 30, 0.18);
    --_color-priority-urgent-bg: rgba(229, 83, 75, 0.18);

    /* Overlay */
    --_color-overlay:       rgba(0, 0, 0, 0.6);
    --_color-overlay-light: rgba(0, 0, 0, 0.35);

    /* Schatten stärker im Dark Mode */
    --_shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --_shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --_shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
    --_shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.60), 0 4px 12px rgba(0, 0, 0, 0.25);
    --_shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);

    /* Glass */
    --_glass-bg:              rgba(28, 28, 26, 0.75);
    --_glass-bg-hover:        rgba(38, 38, 36, 0.82);
    --_glass-bg-elevated:     rgba(46, 46, 44, 0.90);
    --_glass-border:          rgba(255, 255, 255, 0.10);
    --_glass-border-subtle:   rgba(255, 255, 255, 0.06);
    --_glass-highlight:       rgba(255, 255, 255, 0.09);
    --_glass-highlight-subtle: rgba(255, 255, 255, 0.05);
    --_glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.07);
    --_glass-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --_glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --_glass-bg-card:         rgba(26, 26, 24, 0.50);
    --_glass-bg-card-hover:   rgba(36, 36, 34, 0.62);
    --_glass-bg-input:        rgba(22, 22, 20, 0.45);
    --_glass-bg-toolbar:      rgba(28, 28, 26, 0.55);
    --_glass-tint-strength:   8%;
}

/* ================================================================
 * Accessibility: prefers-reduced-transparency
 * Glass-Effekte abschalten - opake Fallbacks.
 * ================================================================ */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg:          var(--color-surface);
    --glass-bg-hover:    var(--color-surface-2);
    --glass-bg-elevated: var(--color-surface);
    --glass-bg-card:     var(--color-surface);
    --glass-bg-card-hover: var(--color-surface-2);
    --glass-bg-input:    var(--color-surface);
    --glass-bg-toolbar:  var(--color-surface);
    --glass-border:      var(--color-border);
    --glass-border-subtle: var(--color-border-subtle);
    --glass-highlight:        transparent;
    --glass-highlight-subtle: transparent;
    --glass-tint-strength: 0%;
    --blur-2xs: blur(0px);
    --blur-xs:  blur(0px);
    --blur-sm:  blur(0px);
    --blur-md:  blur(0px);
    --blur-lg:  blur(0px);
    --blur-xl:  blur(0px);
    --opacity-glass-subtle:   1;
    --opacity-glass-base:     1;
    --opacity-glass-elevated: 1;
  }
}

/* ================================================================
 * Accessibility: prefers-contrast: more
 * Kontrast erhöhen, Blur reduzieren.
 * ================================================================ */
@media (prefers-contrast: more) {
  :root {
    --glass-bg:          rgba(255, 255, 255, 0.97);
    --glass-bg-hover:    #ffffff;
    --glass-bg-elevated: #ffffff;
    --glass-border:      var(--color-text-primary);
    --glass-border-subtle: var(--color-text-secondary);
    --glass-highlight:        transparent;
    --glass-highlight-subtle: transparent;
    --blur-2xs: blur(0px);
    --blur-xs:  blur(0px);
    --blur-sm:  blur(0px);
    --blur-md:  blur(0px);
    --blur-lg:  blur(0px);
    --blur-xl:  blur(0px);

    /* Notes-Token im Hochkontrast auf voll AA-taugliches Yellow-700 (6.3:1) heben */
    --module-notes: #A16207;
  }
}
