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

:root {
  /* --------------------------------------------------------
   * 1. Farben - Neutral-Skala
   *    Leicht warmgetönt (kein reines Grau) für einladende Atmosphäre.
   *    Benannt als --neutral-{stufe} für direkte Nutzung,
   *    plus semantische Aliase (--color-bg, --color-surface etc.)
   *    die bestehender Code bereits referenziert.
   * -------------------------------------------------------- */
  --neutral-50:  #FAFAF8;
  --neutral-100: #F5F4F1;
  --neutral-150: #EFEEE9;
  --neutral-200: #E8E7E2;
  --neutral-250: #DDDCD7;
  --neutral-300: #D1D0CB;
  --neutral-400: #B5B4AF;
  --neutral-500: #8E8D89;
  --neutral-600: #6C6B67;
  --neutral-700: #4A4A46;
  --neutral-800: #2E2E2B;
  --neutral-900: #1C1C1A;
  --neutral-950: #121211;

  /* Semantische Aliase (abwärtskompatibel) */
  --color-bg:             var(--neutral-100);
  --color-surface:        #FFFFFF;
  --color-surface-2:      var(--neutral-50);
  --color-surface-3:      var(--neutral-150);
  --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;  /* WCAG AA: 4.61:1 auf --color-bg (wärmer, mehr Puffer) */
  --color-text-disabled:  var(--neutral-300);
  --color-text-on-accent: #ffffff;  /* Weißer Text auf farbigen Hintergründen (Buttons, Badges, FAB) */

  /* --------------------------------------------------------
   * 2. Farben - Akzent (konfigurierbar)
   *    Indigo mit leichtem Violett-Drall — charaktervoller als Default-Blau,
   *    harmoniert mit --color-accent-secondary und --module-calendar.
   * -------------------------------------------------------- */
  --color-accent:           #4F46E5;       /* Indigo-600 — 4.93:1 auf weiß */
  --color-accent-hover:     #4338CA;       /* Indigo-700 */
  --color-accent-active:    #3730A3;       /* Indigo-800 */
  --color-accent-deep:      #2E2D82;       /* Tiefer Akzent für Gradienten, Wetter-Widget */
  --color-accent-secondary: #7C5CFC;       /* Sekundärer Akzent für Logo-Gradient */
  --color-accent-light:     #EEF2FF;       /* Indigo-50 */
  --color-accent-subtle:    #E0E7FF;       /* Indigo-100 */
  --color-btn-primary:      #4338CA;       /* Indigo-700 — WCAG AAA: 7.04:1 auf weiß */
  --color-btn-primary-hover: #3730A3;      /* Indigo-800 */

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

  /* --------------------------------------------------------
   * 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;  /* Indigo - Übersicht, neutral (= --color-accent, bewusster Share) */
  --module-tasks:      #15803D;  /* Grün - Erledigung, Fortschritt (= --color-success, bewusster Share) */
  --module-calendar:   #8250DF;  /* Violett - Termine, Zeit */
  --module-meals:      #C2410C;  /* Orange-700 - Essen, Wärme */
  --module-shopping:   #DB2777;  /* Pink-600 - Einkaufen, Aktion (trennt von Meals) */
  --module-notes:      #CA8A04;  /* Gold - Notizen, Pinnwand (nur Icons/Large-Text: 4.08:1) */
  --module-contacts:   #0969DA;  /* Kräftiges Blau - Kontakte */
  --module-budget:     #0F766E;  /* Teal-700 - Finanzen, Stabilität */
  --module-settings:   #6E7781;  /* Grau - Konfiguration */

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

  /* --------------------------------------------------------
   * 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 — RGB-Tripel folgen den Base-Tokens */
  --color-priority-none-bg:   rgba(142, 141, 137, 0.08);
  --color-priority-low-bg:    rgba(142, 141, 137, 0.12);
  --color-priority-medium-bg: rgba(161, 98, 7, 0.12);
  --color-priority-high-bg:   rgba(194, 65, 12, 0.12);
  --color-priority-urgent-bg: rgba(185, 28, 28, 0.12);

  /* --------------------------------------------------------
   * 7. Overlay / Backdrop
   * -------------------------------------------------------- */
  --color-overlay: rgba(0, 0, 0, 0.45);
  --color-overlay-light: rgba(0, 0, 0, 0.2);

  /* 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);

  /* --------------------------------------------------------
   * 8. Schatten
   *    3 Stufen: subtle (Karten), medium (Dropdowns, Hover),
   *    elevated (Modals, FAB).
   * -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);

  /* --------------------------------------------------------
   * 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-xs:   0.75rem;    /* 12px - Minimum, Captions, Badges, Nav-Labels */
  --text-sm:   0.8125rem;  /* 13px - Small/Secondary */
  --text-base: 0.875rem;   /* 14px - Body (Desktop), kompakter */
  --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;
  --target-md: 40px;
  --target-lg: 48px;

  /* --------------------------------------------------------
   * 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 (1280px+), 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-shadow-light: rgba(255, 255, 255, 0.6);
  --sidebar-shadow-dark: rgba(0, 0, 0, 0.08);
  --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-hover:    rgba(255, 255, 255, 0.82);
  --glass-bg-elevated: rgba(255, 255, 255, 0.88);
  --glass-border:      rgba(255, 255, 255, 0.60);
  --glass-border-subtle: rgba(255, 255, 255, 0.35);

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

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

  /* b) Blur-Stufen */
  --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-subtle: rgba(255, 255, 255, 0.35);

  /* 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-md: 0 4px 20px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.50);
  --glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.45);

  /* 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
 * Zwei Selektoren: (1) System-Preference, (2) manueller Override
 * via data-theme="dark" auf <html>.
 * data-theme="light" erzwingt Light Mode (kein Dark-Override).
 * Ohne data-theme folgt die App der System-Einstellung.
 * ================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Neutral-Skala invertiert (warm-dunkel) */
    --neutral-50:  #1A1A18;
    --neutral-100: #222220;
    --neutral-150: #2A2A28;
    --neutral-200: #333331;
    --neutral-250: #3D3D3A;
    --neutral-300: #48484A;
    --neutral-400: #636360;
    --neutral-500: #8E8D89;
    --neutral-600: #AEADB0;   /* WCAG AA: ~4.8:1 auf #2A2A28 */
    --neutral-700: #C8C7C3;
    --neutral-800: #E2E1DC;
    --neutral-900: #F5F4F1;
    --neutral-950: #FAFAF8;

    /* Semantische Aliase folgen automatisch via var(--neutral-*) */
    --color-surface:   #2A2A28;
    --color-surface-2: #1A1A18;
    --color-surface-3: #333331;

    /* Sidebar */
    --sidebar-bg: #1A1A18;
    --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 - Dark Mode */
    --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;

    /* Modul-Akzente - Dark Mode (Entflechtung Meals/Shopping spiegelt Light-Mode) */
    --module-dashboard: #818CF8;   /* Indigo-400 - folgt neuem Dark-Accent */
    --module-tasks:     #4ADE80;
    --module-calendar:  #A78BFA;
    --module-meals:     #FB923C;   /* Orange-400 */
    --module-shopping:  #F472B6;   /* Pink-400 - trennt wie in Light */
    --module-notes:     #FCD34D;
    --module-contacts:  #60A5FA;
    --module-budget:    #2DD4BF;   /* Teal-400 - folgt Light-Mode-Teal */
    --module-settings:  #94A3B8;

    /* Mahlzeit-Typ - Dark Mode */
    --meal-breakfast: #F59E0B;
    --meal-dinner:    #818CF8;   /* Indigo-400 - folgt Dark-Accent */

    /* Mahlzeit-Typ Light-Varianten */
    --meal-breakfast-light: #332400;
    --meal-lunch-light:     #1A3325;
    --meal-dinner-light:    #2E2D5B;   /* Indigo-Dark-Tint (folgt --meal-dinner) */
    --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);

    /* Glass - Dark Mode */
    --glass-bg:          rgba(40, 40, 38, 0.75);
    --glass-bg-hover:    rgba(50, 50, 48, 0.82);
    --glass-bg-elevated: rgba(58, 58, 55, 0.90);
    --glass-border:      rgba(255, 255, 255, 0.12);
    --glass-border-subtle: rgba(255, 255, 255, 0.07);
    --glass-highlight:        rgba(255, 255, 255, 0.10);
    --glass-highlight-subtle: rgba(255, 255, 255, 0.06);
    --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --glass-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.07);
    --glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);

    /* Vibrancy - Dark Mode */
    --glass-bg-card:       rgba(38, 38, 36, 0.50);
    --glass-bg-card-hover: rgba(48, 48, 46, 0.62);
    --glass-bg-input:      rgba(34, 34, 32, 0.45);
    --glass-bg-toolbar:    rgba(40, 40, 38, 0.55);
    --glass-tint-strength: 8%;
  }
}

/* Manueller Dark-Mode-Override: data-theme="dark" auf <html> */
:root[data-theme="dark"] {
  --neutral-50:  #1A1A18;
  --neutral-100: #222220;
  --neutral-150: #2A2A28;
  --neutral-200: #333331;
  --neutral-250: #3D3D3A;
  --neutral-300: #48484A;
  --neutral-400: #636360;
  --neutral-500: #8E8D89;
  --neutral-600: #AEADB0;
  --neutral-700: #C8C7C3;
  --neutral-800: #E2E1DC;
  --neutral-900: #F5F4F1;
  --neutral-950: #FAFAF8;

  --color-surface:   #2A2A28;
  --color-surface-2: #1A1A18;
  --color-surface-3: #333331;

  --sidebar-bg: #1A1A18;
  --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 - Dark Mode */
  --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;

  /* Modul-Akzente - Dark Mode (Entflechtung Meals/Shopping spiegelt Light-Mode) */
  --module-dashboard: #818CF8;   /* Indigo-400 - folgt neuem Dark-Accent */
  --module-tasks:     #4ADE80;
  --module-calendar:  #A78BFA;
  --module-meals:     #FB923C;   /* Orange-400 */
  --module-shopping:  #F472B6;   /* Pink-400 - trennt wie in Light */
  --module-notes:     #FCD34D;
  --module-contacts:  #60A5FA;
  --module-budget:    #2DD4BF;   /* Teal-400 - folgt Light-Mode-Teal */
  --module-settings:  #94A3B8;

  /* Mahlzeit-Typ - Dark Mode */
  --meal-breakfast: #F59E0B;
  --meal-dinner:    #818CF8;   /* Indigo-400 - folgt Dark-Accent */

  --meal-breakfast-light: #332400;
  --meal-lunch-light:     #1A3325;
  --meal-dinner-light:    #2E2D5B;   /* Indigo-Dark-Tint (folgt --meal-dinner) */
  --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);

  /* Glass - Dark Mode */
  --glass-bg:          rgba(40, 40, 38, 0.75);
  --glass-bg-hover:    rgba(50, 50, 48, 0.82);
  --glass-bg-elevated: rgba(58, 58, 55, 0.90);
  --glass-border:      rgba(255, 255, 255, 0.12);
  --glass-border-subtle: rgba(255, 255, 255, 0.07);
  --glass-highlight:        rgba(255, 255, 255, 0.10);
  --glass-highlight-subtle: rgba(255, 255, 255, 0.06);
  --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --glass-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* Vibrancy - Dark Mode */
  --glass-bg-card:       rgba(38, 38, 36, 0.50);
  --glass-bg-card-hover: rgba(48, 48, 46, 0.62);
  --glass-bg-input:      rgba(34, 34, 32, 0.45);
  --glass-bg-toolbar:    rgba(40, 40, 38, 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-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-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;
  }
}