/* ============================================================ PsychoBerlin – M3 Design Tokens Primärfarbe: #C21A64 (Pink, WCAG AA compliant) Text: #1A1B2E (Navy) Hintergrund: #FFF5F8 (Zartes Rosa) Banner/Footer: #FDE8F0 (Rosa) Cards: #FFFFFF (Weiß) ============================================================ */ :root { /* ── Farben (M3 Color System) ──────────────────────────── */ /* WCAG 2.1 AA Contrast Ratios documented per token: - Normal text: >= 4.5:1 - Large text (18px+ or 14px bold): >= 3:1 - UI components/graphical objects: >= 3:1 */ --md-sys-color-primary: #1A1B2E; /* on #FFF5F8: ~16.0:1 PASS AA */ --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #FDE8F0; --md-sys-color-on-primary-container: #1A1B2E; /* on #FDE8F0: ~12.6:1 PASS AA */ /* Accent: darkened from #E4257B to #C21A64 for 4.5:1 on white Old #E4257B on #FFF: 4.35:1 (FAIL normal text) New #C21A64 on #FFF: ~5.3:1 (PASS AA normal text) New #FFF on #C21A64: ~5.3:1 (PASS AA normal text) */ --md-sys-color-accent: #C21A64; --md-sys-color-on-accent: #FFFFFF; --md-sys-color-accent-container: #FDE8F0; --md-sys-color-on-accent-container: #880E4F; /* on #FDE8F0: ~7.0:1 PASS AA */ /* Secondary: darkened from #718096 to #596577 for 4.5:1 on white Old #718096 on #FFF: ~4.0:1 (FAIL normal text) New #596577 on #FFF: ~5.0:1 (PASS AA normal text) New #596577 on #FFF5F8: ~4.7:1 (PASS AA normal text) New #596577 on #FDE8F0: ~4.1:1 (PASS AA large text) */ --md-sys-color-secondary: #596577; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #FDE8F0; --md-sys-color-on-secondary-container: #1A1B2E; --md-sys-color-tertiary: #7C5800; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #FFDEA6; --md-sys-color-on-tertiary-container: #271900; /* on #FFDEA6: ~14.5:1 PASS AA */ /* Error: uses same accent color for brand consistency #C21A64 on #FFF5F5: ~5.0:1 (PASS AA normal text) */ --md-sys-color-error: #C21A64; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFF5F5; --md-sys-color-on-error-container: #63171B; /* on #FFF5F5: ~11.0:1 PASS AA */ --md-sys-color-warning: #F6AD55; --md-sys-color-on-warning: #FFFFFF; /* Success: darkened from #1E8E3E to #167132 for 4.5:1 on success-container Old #1E8E3E on #E6F4EA: ~3.8:1 (FAIL normal text) New #167132 on #E6F4EA: ~5.2:1 (PASS AA normal text) New #167132 on #FFF: ~6.5:1 (PASS AA normal text) */ --md-sys-color-success: #167132; --md-sys-color-on-success: #FFFFFF; --md-sys-color-success-container: #E6F4EA; --md-sys-color-surface: #FFF5F8; --md-sys-color-on-surface: #1A1B2E; /* on #FFF5F8: ~16.0:1 PASS AA */ /* On-surface-variant: same as secondary, darkened for contrast */ --md-sys-color-on-surface-variant: #596577; /* on #FFF5F8: ~4.7:1 PASS AA */ --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #FFF8FA; --md-sys-color-surface-container: #FFFFFF; --md-sys-color-surface-container-high: #FDE8F0; --md-sys-color-surface-container-highest: #FDE8F0; /* Outline: decorative borders/dividers, not text — contrast requirement is 3:1 for UI components. #F0D4E0 on #FFF5F8: ~1.3:1 — sufficient for decorative borders but not for meaningful UI boundaries. Darkened outline-variant. */ --md-sys-color-outline: #E0BFD0; /* darkened from #F0D4E0 for better visibility */ --md-sys-color-outline-variant: #D4A8BC; /* darkened from #E8C4D4; on #FFF5F8: ~1.9:1 */ --md-sys-color-inverse-surface: #1A1B2E; --md-sys-color-inverse-on-surface: #FFFFFF; --md-sys-color-scrim: rgba(0, 0, 0, 0.32); /* ── Typografie (M3 Type Scale) ────────────────────────── */ --md-sys-typescale-font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --md-sys-typescale-display-large-size: 3.5rem; /* 57px */ --md-sys-typescale-display-large-weight: 400; --md-sys-typescale-display-large-line-height: 1.12; --md-sys-typescale-display-medium-size: 2.8125rem; /* 45px */ --md-sys-typescale-display-medium-weight: 400; --md-sys-typescale-display-small-size: 2.25rem; /* 36px */ --md-sys-typescale-display-small-weight: 400; --md-sys-typescale-headline-large-size: 2rem; /* 32px */ --md-sys-typescale-headline-large-weight: 400; --md-sys-typescale-headline-medium-size: 1.75rem; /* 28px */ --md-sys-typescale-headline-medium-weight: 400; --md-sys-typescale-headline-small-size: 1.5rem; /* 24px */ --md-sys-typescale-headline-small-weight: 400; --md-sys-typescale-title-large-size: 1.375rem; /* 22px */ --md-sys-typescale-title-large-weight: 500; --md-sys-typescale-title-medium-size: 1rem; /* 16px */ --md-sys-typescale-title-medium-weight: 500; --md-sys-typescale-title-small-size: 0.875rem; /* 14px */ --md-sys-typescale-title-small-weight: 500; --md-sys-typescale-body-large-size: 1rem; /* 16px */ --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-large-line-height: 1.5; --md-sys-typescale-body-medium-size: 0.875rem; /* 14px */ --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-medium-line-height: 1.43; --md-sys-typescale-body-small-size: 0.75rem; /* 12px */ --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-label-large-size: 0.875rem; /* 14px */ --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-large-tracking: 0.01em; --md-sys-typescale-label-medium-size: 0.75rem; /* 12px */ --md-sys-typescale-label-medium-weight: 500; --md-sys-typescale-label-small-size: 0.6875rem; /* 11px */ --md-sys-typescale-label-small-weight: 500; /* ── Shape (M3 Shape System) ───────────────────────────── */ --md-sys-shape-corner-none: 0; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 9999px; /* ── Elevation (M3 Elevation – Tonal Surfaces) ─────────── */ --md-sys-elevation-0: none; --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); --md-sys-elevation-2: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); --md-sys-elevation-3: 0 10px 15px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.05); --md-sys-elevation-4: 0 20px 25px rgba(0,0,0,0.07), 0 8px 10px rgba(0,0,0,0.04); --md-sys-elevation-5: 0 25px 50px rgba(0,0,0,0.12); /* ── Motion (M3 Motion System) ─────────────────────────── */ --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); --md-sys-motion-duration-short1: 50ms; --md-sys-motion-duration-short2: 100ms; --md-sys-motion-duration-short3: 150ms; --md-sys-motion-duration-short4: 200ms; --md-sys-motion-duration-medium1: 250ms; --md-sys-motion-duration-medium2: 300ms; --md-sys-motion-duration-medium3: 350ms; --md-sys-motion-duration-medium4: 400ms; --md-sys-motion-duration-long1: 450ms; --md-sys-motion-duration-long2: 500ms; /* ── Spacing ───────────────────────────────────────────── */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; /* ── Z-Index ───────────────────────────────────────────── */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-snackbar: 600; --z-crisis-banner: 700; --z-cookie-banner: 800; } /* ── Reduced Motion ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --md-sys-motion-duration-short1: 0ms; --md-sys-motion-duration-short2: 0ms; --md-sys-motion-duration-short3: 0ms; --md-sys-motion-duration-short4: 0ms; --md-sys-motion-duration-medium1: 0ms; --md-sys-motion-duration-medium2: 0ms; --md-sys-motion-duration-medium3: 0ms; --md-sys-motion-duration-medium4: 0ms; --md-sys-motion-duration-long1: 0ms; --md-sys-motion-duration-long2: 0ms; } }