/* ========================================================= MyGarage – Design Tokens / Theme Dark Mode ist Basis. Light Mode wird unterstützt. Umschaltung über . ========================================================= */ :root { /* Akzent (Apple-Blau) */ --accent: #0A84FF; --accent-pressed: #0060DF; --accent-contrast: #FFFFFF; /* Status */ --danger: #FF453A; --success: #30D158; --warning: #FFD60A; /* Radien */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* Abstände */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* Typografie */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Sichere Bereiche (Notch / Home-Indikator) */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* Höhen */ --tabbar-height: 56px; /* Transitions */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur: 220ms; } /* ---------- Dark (Basis) ---------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #000000; --bg-elevated: #1C1C1E; --bg-elevated-2: #2C2C2E; --surface: #1C1C1E; --surface-pressed: #2C2C2E; --separator: rgba(255, 255, 255, 0.10); --separator-strong: rgba(255, 255, 255, 0.18); --text: #FFFFFF; --text-secondary: rgba(235, 235, 245, 0.62); --text-tertiary: rgba(235, 235, 245, 0.35); --tabbar-bg: rgba(20, 20, 22, 0.80); --topbar-bg: rgba(0, 0, 0, 0.72); --shadow: 0 8px 30px rgba(0, 0, 0, 0.45); } /* ---------- Light ---------- */ :root[data-theme="light"] { color-scheme: light; --bg: #F2F2F7; --bg-elevated: #FFFFFF; --bg-elevated-2: #FFFFFF; --surface: #FFFFFF; --surface-pressed: #E9E9EE; --separator: rgba(60, 60, 67, 0.12); --separator-strong: rgba(60, 60, 67, 0.22); --text: #000000; --text-secondary: rgba(60, 60, 67, 0.60); --text-tertiary: rgba(60, 60, 67, 0.30); --accent: #007AFF; --accent-pressed: #0060DF; --tabbar-bg: rgba(249, 249, 251, 0.80); --topbar-bg: rgba(242, 242, 247, 0.72); --shadow: 0 8px 30px rgba(0, 0, 0, 0.10); } /* ---------- System (folgt der Geräteeinstellung) ---------- */ @media (prefers-color-scheme: light) { :root[data-theme="system"] { color-scheme: light; --bg: #F2F2F7; --bg-elevated: #FFFFFF; --bg-elevated-2: #FFFFFF; --surface: #FFFFFF; --surface-pressed: #E9E9EE; --separator: rgba(60, 60, 67, 0.12); --separator-strong: rgba(60, 60, 67, 0.22); --text: #000000; --text-secondary: rgba(60, 60, 67, 0.60); --text-tertiary: rgba(60, 60, 67, 0.30); --accent: #007AFF; --accent-pressed: #0060DF; --tabbar-bg: rgba(249, 249, 251, 0.80); --topbar-bg: rgba(242, 242, 247, 0.72); --shadow: 0 8px 30px rgba(0, 0, 0, 0.10); } }