/** * Modul: Design Tokens * Zweck: CSS Custom Properties fuer das gesamte Design-System * Abhängigkeiten: keine * * Aufbau: * 1. Neutral-Farbskala (50–950) * 2. Akzentfarben + Semantische Farben * 3. Modul-Akzentfarben * 4. Mahlzeit-Typ-Farben * 5. Prioritäten * 6. Overlay / Backdrop * 7. Schatten * 8. Border-Radien * 9. Typografie * 10. Abstände (4px-Raster) * 11. Layout * 12. Sidebar * 13. Übergänge * 14. Z-Indizes * 15. Dark Mode * * Dark-Mode-Architektur (§8.2): * Private Tokens (--_name) halten den aktuellen Wert. * Öffentliche Tokens (--name) zeigen immer auf var(--_name). * Dark-Mode-Blöcke überschreiben nur die privaten Tokens — * die öffentliche API bleibt stabil und muss nie doppelt geändert werden. */ /* -------------------------------------------------------- * Plus Jakarta Sans — selbst gehostet, Variable Font * -------------------------------------------------------- */ @font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans-variable.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/plus-jakarta-sans-variable-italic.woff2') format('woff2-variations'); font-weight: 200 800; font-style: italic; font-display: swap; } :root { /* -------------------------------------------------------- * 1. Farben - Neutral-Skala * Leicht warmgetönt (kein reines Grau) für einladende Atmosphäre. * Private --_neutral-* für Dark-Mode-Überschreibungen; * öffentliche --neutral-* sind die stabile API. * -------------------------------------------------------- */ --_neutral-50: #FAFAF8; --neutral-50: var(--_neutral-50); --_neutral-100: #F5F4F1; --neutral-100: var(--_neutral-100); --_neutral-150: #EFEEE9; --neutral-150: var(--_neutral-150); --_neutral-200: #E8E7E2; --neutral-200: var(--_neutral-200); --_neutral-250: #DDDCD7; --neutral-250: var(--_neutral-250); --_neutral-300: #D1D0CB; --neutral-300: var(--_neutral-300); --_neutral-400: #B5B4AF; --neutral-400: var(--_neutral-400); --_neutral-500: #8E8D89; --neutral-500: var(--_neutral-500); --_neutral-600: #6C6B67; --neutral-600: var(--_neutral-600); --_neutral-700: #4A4A46; --neutral-700: var(--_neutral-700); --_neutral-800: #2E2E2B; --neutral-800: var(--_neutral-800); --_neutral-900: #1C1C1A; --neutral-900: var(--_neutral-900); --_neutral-950: #121211; --neutral-950: var(--_neutral-950); /* Semantische Aliase (abwärtskompatibel) */ --color-bg: var(--neutral-100); --_color-surface: #FFFFFF; --color-surface: var(--_color-surface); /* surface-2: recessed/vertieft (dunkler als bg in dark mode — kein Elevations-Token) */ --color-surface-2: var(--neutral-50); --_color-surface-3: var(--_neutral-150); --color-surface-3: var(--_color-surface-3); --color-border: var(--neutral-200); --color-border-subtle: var(--neutral-150); --color-text-primary: var(--neutral-900); --color-text-secondary: var(--neutral-600); /* WCAG AA: ~5.0:1 auf weiß */ --_color-text-tertiary: #6A6964; --color-text-tertiary: var(--_color-text-tertiary); /* WCAG AA: 4.61:1 auf --color-bg */ --color-text-disabled: var(--neutral-300); --color-text-on-accent: #ffffff; /* Weißer Text auf farbigen Hintergründen */ /* Elevation-Stufen für interaktive Listen-Elemente (More-Sheet, Search) */ --_color-surface-elevated: var(--_neutral-50); --color-surface-elevated: var(--_color-surface-elevated); --_color-surface-hover: var(--_neutral-150); --color-surface-hover: var(--_color-surface-hover); /* -------------------------------------------------------- * 2. Farben - Akzent (konfigurierbar) * Indigo mit leichtem Violett-Drall — charaktervoller als Default-Blau, * harmoniert mit --color-accent-secondary und --module-calendar. * -------------------------------------------------------- */ --_color-accent: #4F46E5; --color-accent: var(--_color-accent); /* Indigo-600 — 4.93:1 auf weiß */ --_color-accent-hover: #4338CA; --color-accent-hover: var(--_color-accent-hover); /* Indigo-700 */ --_color-accent-active: #3730A3; --color-accent-active: var(--_color-accent-active); /* Indigo-800 */ --color-accent-deep: #2E2D82; /* Tiefer Akzent für Gradienten, Wetter-Widget */ /* Greeting-Gradienten: Tageszeit-Varianten */ --greeting-morning-from: #C2410C; /* Orange-700 — Morgensonne */ --greeting-morning-to: #D97706; /* Amber-600 */ --greeting-evening-from: #6D28D9; /* Violet-700 */ --greeting-evening-to: #8250DF; /* = --module-calendar */ --_color-accent-secondary: #7C5CFC; --color-accent-secondary: var(--_color-accent-secondary); /* Sekundärer Akzent für Logo-Gradient */ --_color-accent-light: #EEF2FF; --color-accent-light: var(--_color-accent-light); /* Indigo-50 */ --_color-accent-subtle: #E0E7FF; --color-accent-subtle: var(--_color-accent-subtle); /* Indigo-100 */ --_color-btn-primary: #4338CA; --color-btn-primary: var(--_color-btn-primary); /* Indigo-700 — WCAG AAA: 7.04:1 auf weiß */ --_color-btn-primary-hover: #3730A3; --color-btn-primary-hover: var(--_color-btn-primary-hover); /* Indigo-800 */ /* -------------------------------------------------------- * 3. Farben - Semantisch * -------------------------------------------------------- */ --_color-success: #15803D; --color-success: var(--_color-success); --color-success-hover: #166534; --_color-success-light: #DAFBE1; --color-success-light: var(--_color-success-light); --_color-warning: #A15C0A; --color-warning: var(--_color-warning); /* Hue-Trennung von --module-meals, 5.23:1 auf weiß */ --color-warning-hover: #824908; --_color-warning-light: #FFF4D4; --color-warning-light: var(--_color-warning-light); --_color-danger: #B91C1C; --color-danger: var(--_color-danger); /* Red-700 — 6.90:1 auf weiß */ --color-danger-hover: #991B1B; /* Red-800 */ --_color-danger-light: #FFE2E0; --color-danger-light: var(--_color-danger-light); --color-info: #0969DA; /* WCAG AA: ~4.6:1 auf weiß */ --color-info-hover: #0550AE; --_color-info-light: #DDF4FF; --color-info-light: var(--_color-info-light); /* Toast-Textfarben: weiß auf dunklen semantischen Bg (light mode). * Dark mode überschreibt auf dunkel, weil --color-success/warning/danger * dort vivid/hell sind und weißen Text unleserlich machen würden. */ --_toast-success-text: var(--color-text-on-accent); --toast-success-text: var(--_toast-success-text); --_toast-warning-text: var(--color-text-on-accent); --toast-warning-text: var(--_toast-warning-text); --_toast-danger-text: var(--color-text-on-accent); --toast-danger-text: var(--_toast-danger-text); /* -------------------------------------------------------- * 4. Farben - Modul-Akzente * Jedes Modul hat eine eigene dezente Akzentfarbe. * Einsatz in Modul-Headern, Icons, aktiven States. * Domain-Farben von Severity entkoppelt — siehe §2.5 des Redesign-Vorschlags. * -------------------------------------------------------- */ --_module-dashboard: #4F46E5; --module-dashboard: var(--_module-dashboard); /* Indigo - Übersicht (= --color-accent, bewusster Share) */ --_module-tasks: #15803D; --module-tasks: var(--_module-tasks); /* Grün - Erledigung (= --color-success, bewusster Share) */ --_module-calendar: #8250DF; --module-calendar: var(--_module-calendar); /* Violett - Termine, Zeit */ --_module-meals: #C2410C; --module-meals: var(--_module-meals); /* Orange-700 - Essen, Wärme */ --_module-recipes: #0D9488; --module-recipes: var(--_module-recipes); /* Teal-600 - Rezepte */ --_module-shopping: #DB2777; --module-shopping: var(--_module-shopping); /* Pink-600 - Einkaufen (trennt von Meals) */ --_module-notes: #A16207; --module-notes: var(--_module-notes); /* Amber-700 - Notizen (6.3:1 auf weiß — WCAG AA) */ --_module-contacts: #0969DA; --module-contacts: var(--_module-contacts); /* Kräftiges Blau - Kontakte */ --_module-birthdays: #E11D48; --module-birthdays: var(--_module-birthdays); /* Rose - Geburtstage */ --_module-budget: #0F766E; --module-budget: var(--_module-budget); /* Teal-700 - Finanzen, Stabilität */ --_module-documents: #1D4ED8; --module-documents: var(--_module-documents); /* Blue - secure family documents */ --_module-settings: #6E7781; --module-settings: var(--_module-settings); /* Grau - Konfiguration */ --_module-reminders: #0E7490; --module-reminders: var(--_module-reminders); /* Cyan-700 - Erinnerungen, 6.3:1 auf weiß — WCAG AA */ /* -------------------------------------------------------- * 5. Farben - Mahlzeit-Typen * Zentrale Tokens statt Hardcoding in meals.css * -------------------------------------------------------- */ --_meal-breakfast: #A15C0A; --meal-breakfast: var(--_meal-breakfast); /* Morgensonne-Amber (= --color-warning, bewusster Share) */ --_meal-breakfast-light: #FFF4D4; --meal-breakfast-light: var(--_meal-breakfast-light); --meal-lunch: #2DA44E; --_meal-lunch-light: #DAFBE1; --meal-lunch-light: var(--_meal-lunch-light); --_meal-dinner: #4F46E5; --meal-dinner: var(--_meal-dinner); /* Indigo - ruhiger Tag-Ausklang (= --color-accent) */ --_meal-dinner-light: #EEF2FF; --meal-dinner-light: var(--_meal-dinner-light); --meal-snack: #C2410C; /* = --module-meals — Snack ist Sub-Domain */ --_meal-snack-light: #FFECE3; --meal-snack-light: var(--_meal-snack-light); /* -------------------------------------------------------- * 6. Farben - Prioritäten * -------------------------------------------------------- */ --color-priority-none: var(--neutral-400); --color-priority-low: var(--neutral-500); --color-priority-medium: #A16207; /* Amber-700 — trennt von --color-warning + --module-meals */ --color-priority-high: #C2410C; /* = --module-meals (bewusster Share: „heiß") */ --color-priority-urgent: #B91C1C; /* = --color-danger (bewusster Share: „gefährlich") */ /* Hintergrundfarben für Priority-Badges */ --_color-priority-none-bg: rgba(142, 141, 137, 0.08); --color-priority-none-bg: var(--_color-priority-none-bg); --_color-priority-low-bg: rgba(142, 141, 137, 0.12); --color-priority-low-bg: var(--_color-priority-low-bg); --_color-priority-medium-bg: rgba(161, 98, 7, 0.12); --color-priority-medium-bg: var(--_color-priority-medium-bg); --_color-priority-high-bg: rgba(194, 65, 12, 0.12); --color-priority-high-bg: var(--_color-priority-high-bg); --_color-priority-urgent-bg: rgba(185, 28, 28, 0.12); --color-priority-urgent-bg: var(--_color-priority-urgent-bg); /* -------------------------------------------------------- * 7. Overlay / Backdrop * -------------------------------------------------------- */ --_color-overlay: rgba(0, 0, 0, 0.45); --color-overlay: var(--_color-overlay); --_color-overlay-light: rgba(0, 0, 0, 0.2); --color-overlay-light: var(--_color-overlay-light); --color-overlay-glass: rgba(0, 0, 0, 0.30); /* Glass-Modal-Overlay (zwischen overlay-light und overlay) */ --color-backdrop-fab: rgba(0, 0, 0, 0.25); --color-backdrop-glass: rgba(0, 0, 0, 0.18); /* Subtiler FAB-Backdrop hinter Glass */ /* Glass-Overlays (fuer Elemente auf farbigen Hintergruenden) */ --color-glass: rgba(255, 255, 255, 0.18); --color-glass-hover: rgba(255, 255, 255, 0.3); --color-glass-border: rgba(255, 255, 255, 0.15); --color-danger-translucent: rgba(255, 59, 48, 0.35); --color-warning-translucent: rgba(245, 158, 11, 0.28); --color-soon: var(--color-warning); /* -------------------------------------------------------- * 8. Schatten * 3 Stufen: subtle (Karten), medium (Dropdowns, Hover), * elevated (Modals, FAB). * -------------------------------------------------------- */ --shadow-drop-icon: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); --_shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03); --shadow-sm: var(--_shadow-sm); --_shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: var(--_shadow-md); --_shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04); --shadow-lg: var(--_shadow-lg); --_shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-xl: var(--_shadow-xl); --_shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-xs: var(--_shadow-xs); /* -------------------------------------------------------- * 9. Border-Radien * -------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* -------------------------------------------------------- * 10. Typografie * System-Font-Stack laut Redesign-Spec. * Skala von xs (12px) bis 4xl (36px). * -------------------------------------------------------- */ --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace; /* Size-Skala */ --text-2xs: 0.625rem; /* 10px - Sehr kleine Badges (z.B. Erinnerungs-Zähler) */ --text-xs: 0.75rem; /* 12px - Minimum, Captions, Badges, Nav-Labels */ --text-sm: 0.8125rem; /* 13px - Small/Secondary */ --text-base: 0.9375rem; /* 15px - Body (Desktop) */ --text-md: 1rem; /* 16px - Body (Mobile), Inputs */ --text-lg: 1.125rem; /* 18px - Section-Title */ --text-xl: 1.25rem; /* 20px - Subtitle */ --text-2xl: 1.5rem; /* 24px - Page-Title */ --text-3xl: 1.875rem; /* 30px - Page-Title Desktop */ --text-4xl: 2.25rem; /* 36px - Hero/Greeting */ /* Line-Heights */ --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-base: 1.5; --line-height-relaxed: 1.625; /* Font-Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* -------------------------------------------------------- * 11. Abstände - 4px-Raster * -------------------------------------------------------- */ --space-0: 0px; --space-px: 1px; --space-0h: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* -------------------------------------------------------- * 11b. Touch-Target Sizes * -------------------------------------------------------- */ --target-sm: 32px; /* Visuelle Größe (z.B. Logos) — kein Touch-Target */ --target-md: 40px; /* Desktop Touch-Target (Maus) */ --target-lg: 48px; /* Mobile Touch-Target (Finger) */ --target-base: 44px; /* iOS-Minimum Touch-Target (44pt) */ /* -------------------------------------------------------- * 12. Layout * -------------------------------------------------------- */ --nav-height-mobile: 56px; --nav-bottom-height: calc(var(--nav-height-mobile) + 12px); /* scroll (56px) + dots-indicator (12px) */ --sidebar-width: 56px; /* collapsed icon-only (1024–1279px) */ --sidebar-width-expanded: 220px; /* full sidebar (1440px+), max 240px laut Spec */ --content-max-width: 1280px; --content-max-width-narrow: 720px; --cal-hour-height: 56px; /* -------------------------------------------------------- * 13. Sidebar * Reduzierter Neumorphismus - subtilere Schatten. * -------------------------------------------------------- */ --_sidebar-bg: var(--_neutral-100); --sidebar-bg: var(--_sidebar-bg); --_sidebar-shadow-light: rgba(255, 255, 255, 0.6); --sidebar-shadow-light: var(--_sidebar-shadow-light); --_sidebar-shadow-dark: rgba(0, 0, 0, 0.08); --sidebar-shadow-dark: var(--_sidebar-shadow-dark); --safe-area-inset-top: env(safe-area-inset-top, 0px); --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); /* -------------------------------------------------------- * 14. Übergänge * fast=150ms, base=250ms, slow=400ms (laut Redesign-Spec) * -------------------------------------------------------- */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* -------------------------------------------------------- * 15. Z-Indizes * -------------------------------------------------------- */ --z-base: 0; --z-card: 1; --z-sticky: 10; --z-dropdown: 50; --z-nav: 100; --z-modal: 200; --z-toast: 300; /* -------------------------------------------------------- * 16. Glass-Design-System (Liquid Glass Layer) * Additive Tokens – bestehende Tokens werden nicht verändert. * Aktivierung per @supports (backdrop-filter) in Komponenten. * * Aufbau: * a) Glass-Hintergründe * b) Blur-Stufen * c) Opazitäten * d) Highlights / Specular * e) Glass-Schatten * f) Glass-Radien * g) Glass-Übergänge * -------------------------------------------------------- */ /* a) Glass-Hintergründe */ --_glass-bg: rgba(255, 255, 255, 0.72); --glass-bg: var(--_glass-bg); --_glass-bg-hover: rgba(255, 255, 255, 0.82); --glass-bg-hover: var(--_glass-bg-hover); --_glass-bg-elevated: rgba(255, 255, 255, 0.88); --glass-bg-elevated: var(--_glass-bg-elevated); --_glass-border: rgba(255, 255, 255, 0.60); --glass-border: var(--_glass-border); --_glass-border-subtle: rgba(255, 255, 255, 0.35); --glass-border-subtle: var(--_glass-border-subtle); --glass-border-overlay: rgba(255, 255, 255, 0.10); /* immer-dunkle Surfaces (Toasts, Overlays) */ /* a2) Glass-Hintergründe: Vibrancy-Stufe (transparenter, mehr Durchschein) */ --_glass-bg-card: rgba(255, 255, 255, 0.52); --glass-bg-card: var(--_glass-bg-card); --_glass-bg-card-hover: rgba(255, 255, 255, 0.65); --glass-bg-card-hover: var(--_glass-bg-card-hover); --_glass-bg-input: rgba(255, 255, 255, 0.48); --glass-bg-input: var(--_glass-bg-input); --_glass-bg-toolbar: rgba(255, 255, 255, 0.58); --glass-bg-toolbar: var(--_glass-bg-toolbar); /* a3) Tint: Modul-Akzentfarbe als subtile Glass-Tonung */ --_glass-tint-strength: 6%; --glass-tint-strength: var(--_glass-tint-strength); /* b) Blur-Stufen */ --blur-2xs: blur(2px); --blur-xs: blur(4px); --blur-sm: blur(8px); --blur-md: blur(16px); --blur-lg: blur(28px); --blur-xl: blur(48px); /* c) Opazitäten */ --opacity-glass-subtle: 0.65; --opacity-glass-base: 0.80; --opacity-glass-elevated: 0.92; /* d) Highlights / Specular */ --_glass-highlight: rgba(255, 255, 255, 0.70); --glass-highlight: var(--_glass-highlight); --_glass-highlight-subtle: rgba(255, 255, 255, 0.35); --glass-highlight-subtle: var(--_glass-highlight-subtle); --glass-highlight-mid: rgba(255, 255, 255, 0.50); /* Mittlere Stärke für Outlines auf dunklen Surfaces */ /* d2) Inset-Specular: Oberrand-Sheen für Glass-Elemente (volle inset-Kurzform) */ --glass-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.18); --glass-inset-base: inset 0 1px 0 rgba(255, 255, 255, 0.20); --glass-inset-medium: inset 0 1px 0 rgba(255, 255, 255, 0.22); --glass-inset-elevated: inset 0 1px 0 rgba(255, 255, 255, 0.28); --glass-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.32); /* d3) Dark-Inset-Specular: Unterrand-Schatten (komplementär zu den White-Insets oben) */ --glass-inset-bottom-base: inset 0 -1px 0 rgba(0, 0, 0, 0.12); --glass-inset-bottom-hover: inset 0 -1px 0 rgba(0, 0, 0, 0.16); --glass-inset-thumb: inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(0, 0, 0, 0.08); --glass-inset-input: inset 0 1px 2px rgba(0, 0, 0, 0.04); /* e) Glass-Schatten */ --_glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.55); --glass-shadow-sm: var(--_glass-shadow-sm); --_glass-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.50); --glass-shadow-md: var(--_glass-shadow-md); --_glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.45); --glass-shadow-lg: var(--_glass-shadow-lg); /* f) Glass-Radien */ --radius-glass-card: 20px; --radius-glass-inner: 14px; --radius-glass-chip: var(--radius-full); --radius-glass-button: var(--radius-full); /* g) Glass-Übergänge */ --ease-glass: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-glass: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ================================================================ * Dark Mode — private Tokens überschreiben, öffentliche API bleibt stabil. * * Zwei Selektoren aktivieren Dark Mode: * 1. @media (prefers-color-scheme: dark) — System-Präferenz (CSS-native, * kein JS erforderlich, funktioniert auch wenn matchMedia blockiert ist) * 2. [data-theme="dark"] — expliziter Override durch den Nutzer * * Explizites Light ([data-theme="light"]) blockiert den @media-Block via :not(). * Explizites Dark ([data-theme="dark"]) überschreibt den @media-Block, falls OS * auf Light steht. * ================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Neutral-Skala — tiefer warm (Option A) */ --_neutral-50: #141413; --_neutral-100: #1A1A18; --_neutral-150: #222220; --_neutral-200: #2A2A28; --_neutral-250: #333331; --_neutral-300: #3D3D3A; --_neutral-400: #636360; --_neutral-500: #8E8D89; --_neutral-600: #AEADB0; --_neutral-700: #C8C7C3; --_neutral-800: #E2E1DC; --_neutral-900: #F5F4F1; --_neutral-950: #FAFAF8; --_color-surface: #222220; --_color-surface-3: #2A2A28; --_color-surface-elevated: #2A2A28; --_color-surface-hover: #333331; --_sidebar-bg: #141413; --_sidebar-shadow-light: rgba(255, 255, 255, 0.04); --_sidebar-shadow-dark: rgba(0, 0, 0, 0.4); --_color-accent: #818CF8; --_color-accent-hover: #6366F1; --_color-accent-active: #4F46E5; --_color-accent-light: #2E2D5B; --_color-accent-subtle: #252255; --_color-btn-primary: #6366F1; --_color-btn-primary-hover: #4F46E5; --_color-accent-secondary: #A78BFA; --_color-success: #4ADE80; --_color-warning: #F59E0B; --_color-danger: #FCA5A5; --_color-text-tertiary: #A3A3A0; --_color-success-light: #1A3325; --_color-warning-light: #332400; --_color-danger-light: #3D1C1A; --_color-info-light: #1A2D40; /* Toast: dunkler Text auf vividen Farben (#4ADE80, #F59E0B, #FCA5A5) */ --_toast-success-text: #062010; /* 13.6:1 auf #4ADE80 */ --_toast-warning-text: #291400; /* 13.1:1 auf #F59E0B */ --_toast-danger-text: #330808; /* 15.1:1 auf #FCA5A5 */ --_module-dashboard: #818CF8; --_module-tasks: #4ADE80; --_module-calendar: #A78BFA; --_module-meals: #FB923C; --_module-shopping: #F472B6; --_module-notes: #FCD34D; --_module-contacts: #60A5FA; --_module-birthdays: #FB7185; --_module-budget: #2DD4BF; --_module-settings: #94A3B8; --_module-reminders: #22D3EE; /* Cyan-400 */ --_meal-breakfast: #F59E0B; --_meal-breakfast-light: #332400; --_meal-lunch-light: #1A3325; --_meal-dinner: #818CF8; --_meal-dinner-light: #2E2D5B; --_meal-snack-light: #3D2010; --_color-priority-none-bg: rgba(142, 141, 137, 0.12); --_color-priority-low-bg: rgba(142, 141, 137, 0.18); --_color-priority-medium-bg: rgba(230, 147, 10, 0.18); --_color-priority-high-bg: rgba(212, 81, 30, 0.18); --_color-priority-urgent-bg: rgba(229, 83, 75, 0.18); --_color-overlay: rgba(0, 0, 0, 0.6); --_color-overlay-light: rgba(0, 0, 0, 0.35); --_shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --_shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --_shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --_shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.60), 0 4px 12px rgba(0, 0, 0, 0.25); --_shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --_glass-bg: rgba(28, 28, 26, 0.75); --_glass-bg-hover: rgba(38, 38, 36, 0.82); --_glass-bg-elevated: rgba(46, 46, 44, 0.90); --_glass-border: rgba(255, 255, 255, 0.10); --_glass-border-subtle: rgba(255, 255, 255, 0.06); --_glass-highlight: rgba(255, 255, 255, 0.09); --_glass-highlight-subtle: rgba(255, 255, 255, 0.05); --_glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.07); --_glass-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.06); --_glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05); --_glass-bg-card: rgba(26, 26, 24, 0.50); --_glass-bg-card-hover: rgba(36, 36, 34, 0.62); --_glass-bg-input: rgba(22, 22, 20, 0.45); --_glass-bg-toolbar: rgba(28, 28, 26, 0.55); --_glass-tint-strength: 8%; } } [data-theme="dark"] { /* Neutral-Skala — tiefer warm (Option A) */ --_neutral-50: #141413; --_neutral-100: #1A1A18; --_neutral-150: #222220; --_neutral-200: #2A2A28; --_neutral-250: #333331; --_neutral-300: #3D3D3A; --_neutral-400: #636360; --_neutral-500: #8E8D89; --_neutral-600: #AEADB0; /* WCAG AA: ~5.6:1 auf #222220 */ --_neutral-700: #C8C7C3; --_neutral-800: #E2E1DC; --_neutral-900: #F5F4F1; --_neutral-950: #FAFAF8; /* Semantische Aliase folgen automatisch via var(--neutral-*) */ --_color-surface: #222220; --_color-surface-3: #2A2A28; --_color-surface-elevated: #2A2A28; --_color-surface-hover: #333331; /* Sidebar */ --_sidebar-bg: #141413; --_sidebar-shadow-light: rgba(255, 255, 255, 0.04); --_sidebar-shadow-dark: rgba(0, 0, 0, 0.4); /* Akzent - Dark Mode (Indigo bleibt, nur Lightness/Saturation rücken) */ --_color-accent: #818CF8; /* Indigo-400 — 6.8:1 auf #2A2A28 */ --_color-accent-hover: #6366F1; /* Indigo-500 */ --_color-accent-active: #4F46E5; /* Indigo-600 (= Light-Primary, Mirroring) */ --_color-accent-light: #2E2D5B; --_color-accent-subtle: #252255; --_color-btn-primary: #6366F1; /* Indigo-500 — 5.5:1 auf Dark-Surface */ --_color-btn-primary-hover: #4F46E5; --_color-accent-secondary: #A78BFA; /* Semantische Farben */ --_color-success: #4ADE80; --_color-warning: #F59E0B; --_color-danger: #FCA5A5; --_color-text-tertiary: #A3A3A0; --_color-success-light: #1A3325; --_color-warning-light: #332400; --_color-danger-light: #3D1C1A; --_color-info-light: #1A2D40; /* Toast: dunkler Text auf vividen Farben (#4ADE80, #F59E0B, #FCA5A5) */ --_toast-success-text: #062010; /* 13.6:1 auf #4ADE80 */ --_toast-warning-text: #291400; /* 13.1:1 auf #F59E0B */ --_toast-danger-text: #330808; /* 15.1:1 auf #FCA5A5 */ /* Modul-Akzente (Entflechtung Meals/Shopping spiegelt Light-Mode) */ --_module-dashboard: #818CF8; /* Indigo-400 */ --_module-tasks: #4ADE80; --_module-calendar: #A78BFA; --_module-meals: #FB923C; /* Orange-400 */ --_module-shopping: #F472B6; /* Pink-400 */ --_module-notes: #FCD34D; --_module-contacts: #60A5FA; --_module-birthdays: #FB7185; --_module-budget: #2DD4BF; /* Teal-400 */ --_module-settings: #94A3B8; --_module-reminders: #22D3EE; /* Cyan-400 */ /* Mahlzeit-Typ */ --_meal-breakfast: #F59E0B; --_meal-breakfast-light: #332400; --_meal-lunch-light: #1A3325; --_meal-dinner: #818CF8; /* Indigo-400 */ --_meal-dinner-light: #2E2D5B; --_meal-snack-light: #3D2010; /* Priority-Badge Hintergründe */ --_color-priority-none-bg: rgba(142, 141, 137, 0.12); --_color-priority-low-bg: rgba(142, 141, 137, 0.18); --_color-priority-medium-bg: rgba(230, 147, 10, 0.18); --_color-priority-high-bg: rgba(212, 81, 30, 0.18); --_color-priority-urgent-bg: rgba(229, 83, 75, 0.18); /* Overlay */ --_color-overlay: rgba(0, 0, 0, 0.6); --_color-overlay-light: rgba(0, 0, 0, 0.35); /* Schatten stärker im Dark Mode */ --_shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --_shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --_shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --_shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.60), 0 4px 12px rgba(0, 0, 0, 0.25); --_shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); /* Glass */ --_glass-bg: rgba(28, 28, 26, 0.75); --_glass-bg-hover: rgba(38, 38, 36, 0.82); --_glass-bg-elevated: rgba(46, 46, 44, 0.90); --_glass-border: rgba(255, 255, 255, 0.10); --_glass-border-subtle: rgba(255, 255, 255, 0.06); --_glass-highlight: rgba(255, 255, 255, 0.09); --_glass-highlight-subtle: rgba(255, 255, 255, 0.05); --_glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.07); --_glass-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.06); --_glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05); --_glass-bg-card: rgba(26, 26, 24, 0.50); --_glass-bg-card-hover: rgba(36, 36, 34, 0.62); --_glass-bg-input: rgba(22, 22, 20, 0.45); --_glass-bg-toolbar: rgba(28, 28, 26, 0.55); --_glass-tint-strength: 8%; } /* ================================================================ * Accessibility: prefers-reduced-transparency * Glass-Effekte abschalten - opake Fallbacks. * ================================================================ */ @media (prefers-reduced-transparency: reduce) { :root { --glass-bg: var(--color-surface); --glass-bg-hover: var(--color-surface-2); --glass-bg-elevated: var(--color-surface); --glass-bg-card: var(--color-surface); --glass-bg-card-hover: var(--color-surface-2); --glass-bg-input: var(--color-surface); --glass-bg-toolbar: var(--color-surface); --glass-border: var(--color-border); --glass-border-subtle: var(--color-border-subtle); --glass-highlight: transparent; --glass-highlight-subtle: transparent; --glass-tint-strength: 0%; --blur-2xs: blur(0px); --blur-xs: blur(0px); --blur-sm: blur(0px); --blur-md: blur(0px); --blur-lg: blur(0px); --blur-xl: blur(0px); --opacity-glass-subtle: 1; --opacity-glass-base: 1; --opacity-glass-elevated: 1; } } /* ================================================================ * Accessibility: prefers-contrast: more * Kontrast erhöhen, Blur reduzieren. * ================================================================ */ @media (prefers-contrast: more) { :root { --glass-bg: rgba(255, 255, 255, 0.97); --glass-bg-hover: #ffffff; --glass-bg-elevated: #ffffff; --glass-border: var(--color-text-primary); --glass-border-subtle: var(--color-text-secondary); --glass-highlight: transparent; --glass-highlight-subtle: transparent; --blur-2xs: blur(0px); --blur-xs: blur(0px); --blur-sm: blur(0px); --blur-md: blur(0px); --blur-lg: blur(0px); --blur-xl: blur(0px); /* Notes-Token im Hochkontrast auf voll AA-taugliches Yellow-700 (6.3:1) heben */ --module-notes: #A16207; } }