:root { /* ─── Primary Color Scale ─────────────────────── */ --primary-50: #eff6ff; --primary-100: #dbeafe; --primary-200: #bfdbfe; --primary-300: #93c5fd; --primary-400: #60a5fa; --primary-500: #3b82f6; --primary-600: #2563eb; --primary-700: #1d4ed8; --primary-800: #1e40af; --primary-900: #1e3a8a; /* Semantic alias */ --primary: var(--primary-600); --primary-hover: var(--primary-700); --primary-light: var(--primary-50); /* ─── Status ───────────────────────────────────── */ --success-50: #ecfdf5; --success-100: #d1fae5; --success-500: #10b981; --success-600: #059669; --success-700: #047857; --success: var(--success-600); --success-bg: var(--success-50); --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-500: #f59e0b; --warning-600: #d97706; --warning-700: #b45309; --warning: var(--warning-600); --warning-bg: var(--warning-50); --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-500: #ef4444; --danger-600: #dc2626; --danger-700: #b91c1c; --danger: var(--danger-600); --danger-bg: var(--danger-50); --info-50: #eff6ff; --info-500: #3b82f6; --info-600: #2563eb; --info: var(--info-600); --info-bg: var(--info-50); /* ─── Neutral Scale ────────────────────────────── */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --gray-950: #030712; /* Semantic neutrals */ --bg: var(--gray-50); --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-subtle: var(--gray-100); --text: var(--gray-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-400); --border: var(--gray-200); --border-strong: var(--gray-300); --border-focus: var(--primary-300); /* ─── Shape & Sizing ───────────────────────────── */ --header-height: 56px; --sidebar-width: 280px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* ─── Shadows: layered + softer ────────────────── */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04); --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06); --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.20); /* ─── Motion ────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; --duration: 180ms; --duration-slow: 280ms; /* ─── Font ──────────────────────────────────────── */ /* System-Stack: SF Pro auf Mac/iOS, Segoe UI auf Windows, Roboto auf Android. Schon modern, kein extra Font-Download (CSP erlaubt eh kein Google Fonts) */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', Roboto, system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* ─── Dark Mode ────────────────────────────────────── Aktivierbar via [data-theme="dark"] auf . prefers-color-scheme greift NICHT automatisch, weil wir den Toggle manuell steuern wollen (Settings). */ [data-theme="dark"] { --bg: var(--gray-950); --bg-card: var(--gray-900); --bg-elevated: var(--gray-800); --bg-subtle: var(--gray-800); --text: var(--gray-50); --text-secondary: var(--gray-300); --text-muted: var(--gray-500); --border: var(--gray-800); --border-strong: var(--gray-700); --primary-light: rgba(59, 130, 246, 0.15); --success-bg: rgba(16, 185, 129, 0.12); --warning-bg: rgba(245, 158, 11, 0.12); --danger-bg: rgba(239, 68, 68, 0.12); --info-bg: rgba(59, 130, 246, 0.12); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3); --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.35); }