/* Design-Tokens: alle Farben, Abstände, Radien und Schriftgrößen der Oberfläche.
   Hell ist Standard; Dunkel über prefers-color-scheme oder data-theme="dark". */
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 17px;
  --text-xl: 22px;
  --weight-normal: 400;
  --weight-strong: 600;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --row-height: 76px;
  --sidebar-width: 248px;
  --list-width: 380px;

  /* Farben – hell */
  --accent: #2f6fde;
  --accent-strong: #2559b8;
  --accent-soft: #e8effc;
  --on-accent: #ffffff;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --surface-hover: #f3f5f8;
  --border: #e3e6eb;
  --text: #1d2229;
  --text-muted: #687280;
  --text-faint: #9aa3ae;
  --danger: #c4372f;
  --danger-soft: #fbeceb;
  --warn: #9a6400;
  --warn-soft: #fdf4e3;
  --ok: #1f7a4a;
  --ok-soft: #e7f5ed;
  --flag: #d9822b;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 16px rgba(16, 24, 40, 0.08);
  --focus: 0 0 0 3px rgba(47, 111, 222, 0.35);
  --shadow-strong: 0 2px 6px rgba(16, 24, 40, 0.10), 0 12px 40px rgba(16, 24, 40, 0.18);
  --backdrop: rgba(16, 24, 40, 0.32);
  --toast-accent: #8db2f4;
  /* Papier für HTML-Mails (bleibt hell, weil Mails für Weiß gestaltet sind). */
  --mail-paper: #ffffff;
  --mail-ink: #1f2328;
  --mail-ink-muted: #57606a;
  --mail-quote: #d0d7de;
  --mail-link: #0b6bcb;
  /* Kategorien: Hintergrund/Schrift je Farbe */
  --cat-red-bg: #fde7e6; --cat-red-fg: #b3261e;
  --cat-orange-bg: #fdeedc; --cat-orange-fg: #9a4d00;
  --cat-yellow-bg: #fbf3c8; --cat-yellow-fg: #6d5800;
  --cat-green-bg: #e3f4e8; --cat-green-fg: #1f6b3b;
  --cat-teal-bg: #dff3f2; --cat-teal-fg: #0f6460;
  --cat-blue-bg: #e3edfc; --cat-blue-fg: #2559b8;
  --cat-purple-bg: #efe7fb; --cat-purple-fg: #6a3fb0;
  --cat-gray-bg: #eceef1; --cat-gray-fg: #4b5563;
  --mark: #fff1a8;
  --mark-text: #1d2229;
  --group-head-height: 30px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --accent: #6b9cf0;
  --accent-strong: #8db2f4;
  --accent-soft: #1d2a40;
  --on-accent: #0d1420;
  --bg: #121418;
  --surface: #181b20;
  --surface-2: #1f232a;
  --surface-hover: #22262e;
  --border: #2b3038;
  --text: #e6e8eb;
  --text-muted: #9aa3ae;
  --text-faint: #6b7380;
  --danger: #f0776f;
  --danger-soft: #3a1f1d;
  --warn: #e3b25c;
  --warn-soft: #33281a;
  --ok: #6fcf97;
  --ok-soft: #1a3326;
  --flag: #f0a35c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
  --focus: 0 0 0 3px rgba(107, 156, 240, 0.4);
  --shadow-strong: 0 2px 8px rgba(0, 0, 0, 0.5), 0 14px 44px rgba(0, 0, 0, 0.5);
  --backdrop: rgba(0, 0, 0, 0.5);
  --toast-accent: #2f6fde;
  --cat-red-bg: #3d2120; --cat-red-fg: #f4a29c;
  --cat-orange-bg: #3b2a18; --cat-orange-fg: #f2b878;
  --cat-yellow-bg: #39331a; --cat-yellow-fg: #e8d27a;
  --cat-green-bg: #1c3326; --cat-green-fg: #8fd6a8;
  --cat-teal-bg: #183331; --cat-teal-fg: #84d4cf;
  --cat-blue-bg: #1d2a40; --cat-blue-fg: #9cbcf5;
  --cat-purple-bg: #2c2340; --cat-purple-fg: #c3a8f2;
  --cat-gray-bg: #2a2f37; --cat-gray-fg: #b4bcc7;
  --mark: #5c4d12;
  --mark-text: #fff6cc;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #6b9cf0;
    --accent-strong: #8db2f4;
    --accent-soft: #1d2a40;
    --on-accent: #0d1420;
    --bg: #121418;
    --surface: #181b20;
    --surface-2: #1f232a;
    --surface-hover: #22262e;
    --border: #2b3038;
    --text: #e6e8eb;
    --text-muted: #9aa3ae;
    --text-faint: #6b7380;
    --danger: #f0776f;
    --danger-soft: #3a1f1d;
    --warn: #e3b25c;
    --warn-soft: #33281a;
    --ok: #6fcf97;
    --ok-soft: #1a3326;
    --flag: #f0a35c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
    --focus: 0 0 0 3px rgba(107, 156, 240, 0.4);
    --shadow-strong: 0 2px 8px rgba(0, 0, 0, 0.5), 0 14px 44px rgba(0, 0, 0, 0.5);
    --backdrop: rgba(0, 0, 0, 0.5);
    --toast-accent: #2f6fde;
    --cat-red-bg: #3d2120; --cat-red-fg: #f4a29c;
    --cat-orange-bg: #3b2a18; --cat-orange-fg: #f2b878;
    --cat-yellow-bg: #39331a; --cat-yellow-fg: #e8d27a;
    --cat-green-bg: #1c3326; --cat-green-fg: #8fd6a8;
    --cat-teal-bg: #183331; --cat-teal-fg: #84d4cf;
    --cat-blue-bg: #1d2a40; --cat-blue-fg: #9cbcf5;
    --cat-purple-bg: #2c2340; --cat-purple-fg: #c3a8f2;
    --cat-gray-bg: #2a2f37; --cat-gray-fg: #b4bcc7;
    --mark: #5c4d12;
    --mark-text: #fff6cc;
    color-scheme: dark;
  }
}