:root {
  /* Farben — Brand (Lila = Primary, Grün = Accent) */
  --color-brand-primary: #6d28d9;        /* violet-700 */
  --color-brand-primary-hover: #5b21b6;  /* violet-800 */
  --color-brand-primary-light: #ede9fe;  /* violet-100 */
  --color-brand-primary-soft: #f5f3ff;   /* violet-50 */

  --color-brand-accent: #10b981;         /* emerald-500 */
  --color-brand-accent-hover: #059669;   /* emerald-600 */
  --color-brand-accent-light: #d1fae5;   /* emerald-100 */
  --color-brand-accent-soft: #ecfdf5;    /* emerald-50 */

  /* Legacy alias (falls irgendwo noch referenziert) */
  --color-brand-secondary: var(--color-brand-accent);

  /* Farben — Semantisch */
  --color-success: #10b981;
  --color-success-soft: #ecfdf5;
  --color-warning: #f59e0b;
  --color-warning-soft: #fffbeb;
  --color-danger: #ef4444;
  --color-danger-soft: #fef2f2;
  --color-info: #3b82f6;
  --color-info-soft: #eff6ff;

  /* Farben — Neutral / Grey-Skala */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fb;         /* App Hintergrund */
  --color-bg-tertiary: #f1f3f6;          /* Hover, muted panels */
  --color-bg-sidebar: #ffffff;
  --color-bg-sidebar-hover: #f5f3ff;     /* violet-50 */

  --color-text-primary: #1f2937;         /* gray-800 */
  --color-text-secondary: #4b5563;       /* gray-600 */
  --color-text-muted: #9ca3af;           /* gray-400 */
  --color-text-inverse: #ffffff;

  --color-border: #e5e7eb;               /* gray-200 */
  --color-border-strong: #d1d5db;        /* gray-300 */
  --color-border-subtle: #f3f4f6;        /* gray-100 */

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Menlo', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-xxl: 26px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing (4px Grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Layout */
  --sidebar-width: 244px;
  --header-height: 60px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-radius-full: 9999px;

  /* Schatten */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 4px 8px rgba(17, 24, 39, 0.06), 0 2px 4px rgba(17, 24, 39, 0.04);
  --shadow-lg: 0 10px 20px rgba(17, 24, 39, 0.08), 0 3px 6px rgba(17, 24, 39, 0.04);
  --shadow-focus: 0 0 0 3px rgba(109, 40, 217, 0.18);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}