/* Design-Tokens — EINE Quelle für Landing Pages, Web-App und Mobil-App.
   Spec: docs/superpowers/specs/2026-09-27-ui-modernisierung-design.md (Abschnitt 3).
   Namen: --ds-* („Design-System"). NICHT --rb-*: dieses Präfix nutzen die
   Legacy-Dateien unified-tokens.css und dark-mode.css bereits mit anderer
   Bedeutung (--rb-brand-500, --rb-accent …) — beide auf einer Seite würden
   sich überschreiben. public/css/v2/tokens.css ist ebenfalls unabhängig. */

:root {
  --ds-ink: #1c2333;
  --ds-ink-soft: #4a5468;
  --ds-ink-faint: #5f6878;
  --ds-line: #e4e2dc;
  --ds-line-strong: #d3d0c8;
  --ds-color-bg: #faf9f6;
  --ds-color-surface: #ffffff;
  --ds-color-surface-sunken: #f4f3ef;
  --ds-color-accent: #4f46e5;
  --ds-color-accent-strong: #4338ca;
  --ds-color-brand-navy: #14213d;
  --ds-color-success: #0b7350;
  --ds-color-success-bg: #e7f6f0;
  --ds-color-warning: #b45309;
  --ds-color-warning-bg: #fdf3e3;
  --ds-color-danger: #c22318;
  --ds-color-danger-bg: #fdeceb;
  --ds-color-info-bg: #eef0fe;
  --ds-color-info-fg: #4338ca;
  --ds-color-alt: #7e22ce;
  --ds-color-alt-bg: #f6ecfd;
  --ds-radius-card: 12px;
  --ds-radius-button: 8px;
  --ds-shadow-xs: 0 1px 2px rgba(20, 33, 61, 0.05);
  --ds-shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.06);
  --ds-shadow-md: 0 2px 8px -2px rgba(20, 33, 61, 0.12);
  --ds-shadow-lg: 0 12px 32px -12px rgba(20, 33, 61, 0.28), 0 2px 6px rgba(20, 33, 61, 0.08);
  --ds-glass-bg: rgba(255, 255, 255, 0.76);
  --ds-glass-border: rgba(20, 33, 61, 0.10);
  /* Markenskala als RGB-Kanäle — Tailwind braucht sie für bg-brand-500/10 */
  --ds-brand-50: 238 242 255;
  --ds-brand-100: 224 231 255;
  --ds-brand-200: 199 210 254;
  --ds-brand-300: 165 180 252;
  --ds-brand-400: 129 140 248;
  --ds-brand-500: 99 102 241;
  --ds-brand-600: 79 70 229;
  --ds-brand-700: 67 56 202;
  --ds-brand-800: 55 48 163;
  --ds-brand-900: 49 46 129;
  --ds-brand-950: 20 33 61;
  --ds-navy-rgb: 20 33 61;
  --ds-navy-deep-rgb: 31 46 82;

  /* ---- Rollen der neuen Gestaltung (Spec 3) ---- */
  --ds-navy: #14213d;
  --ds-on-navy: #ffffff;
  --ds-heading: #14213d;
  --ds-accent: #4f46e5;
  --ds-accent-strong: #4338ca;
  --ds-on-accent: #ffffff;
  --ds-focus: #4f46e5;
  --ds-paper: #faf9f6;
  --ds-surface: #ffffff;
  --ds-surface-sunken: #f4f3ef;
  --ds-signal: #0b7350;
  --ds-radius-control: 8px;
  --ds-shadow-float: 0 12px 32px -12px rgba(20, 33, 61, 0.28), 0 2px 6px rgba(20, 33, 61, 0.08);
  --ds-dauer: 180ms;
}

[data-theme="dark"] {
  --ds-ink: #e8ecf4;
  --ds-ink-soft: #aab3c5;
  --ds-ink-faint: #8a94a8;
  --ds-line: #243049;
  --ds-line-strong: #31405f;
  --ds-color-bg: #0b1020;
  --ds-color-surface: #121a2e;
  --ds-color-surface-sunken: #0e1526;
  --ds-color-accent: #a5b4fc;
  --ds-color-accent-strong: #5d60ee;
  --ds-color-success: #34d399;
  --ds-color-success-bg: #10261f;
  --ds-color-warning: #fbbf24;
  --ds-color-warning-bg: #2a2113;
  --ds-color-danger: #f87171;
  --ds-color-danger-bg: #2c1618;
  --ds-color-info-bg: #1b1e3a;
  --ds-color-info-fg: #a5b4fc;
  --ds-color-alt: #d8b4fe;
  --ds-color-alt-bg: #24173a;
  --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 12px -6px rgba(0, 0, 0, 0.5);
  --ds-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 32px -14px rgba(0, 0, 0, 0.65);
  --ds-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.55), 0 28px 64px -24px rgba(0, 0, 0, 0.75);
  --ds-glass-bg: rgba(19, 22, 36, 0.76);
  --ds-glass-border: rgba(129, 140, 248, 0.16);

  /* ---- Rollen der neuen Gestaltung (Spec 3) ---- */
  --ds-navy: #0e1730;
  --ds-on-navy: #e8ecf4;
  --ds-heading: #e8ecf4;
  --ds-accent: #a5b4fc;
  --ds-accent-strong: #5d60ee;
  --ds-on-accent: #ffffff;
  --ds-focus: #a5b4fc;
  --ds-paper: #0b1020;
  --ds-surface: #121a2e;
  --ds-surface-sunken: #0e1526;
  --ds-signal: #34d399;
  --ds-shadow-float: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}