/* tokens.css — Brand-Design-Tokens für die Course-App. * * Quelle: 04-CONTEXT.md "Visuelle Identität" — iterierbarer Arbeitsstand: * --brand-bg #FAFAF7 / --brand-text #0A0A0A / --brand-primary #0A0A0A / * --brand-accent #C5A572 (Gold). Hell-Modus = Default. * * Dark-Mode-Toggle: oder . * Override per CSS-Variable, keine Klassen-Bombing. * * DSGVO: Inter wird LOKAL aus /assets/fonts/ geladen — kein Google CDN. */ /* ---------------- Lokale Webfonts (DSGVO, kein CDN) ---------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/Inter-Regular.ttf') format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Inter-Bold.ttf') format('truetype'); } /* ---------------- Light (Default) ---------------- */ :root { /* Brand-Palette */ --brand-bg: #FAFAF7; --brand-bg-elevated: #FFFFFF; --brand-text: #0A0A0A; --brand-text-muted: #5A5A5A; --brand-primary: #0A0A0A; --brand-primary-contrast: #FAFAF7; --brand-accent: #C5A572; --brand-accent-strong: #A88643; --brand-border: #E5E2D7; --brand-surface-hover: #F2EFE6; --brand-danger: #B23A2F; --brand-success: #2F7A3A; /* Typographie */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-300: 0.875rem; --fs-400: 1rem; --fs-500: clamp(1.0625rem, 0.95rem + 0.5vw, 1.125rem); --fs-600: clamp(1.25rem, 1.05rem + 1vw, 1.5rem); --fs-700: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); --fs-800: clamp(2.25rem, 1.8rem + 2vw, 3rem); --lh-tight: 1.2; --lh-base: 1.55; /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; /* Radii */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 9999px; /* Shadow + Lift */ --shadow-card: 0 1px 2px rgba(10, 10, 10, 0.04), 0 4px 12px rgba(10, 10, 10, 0.05); --shadow-lift: 0 4px 8px rgba(10, 10, 10, 0.06), 0 12px 32px rgba(10, 10, 10, 0.1); --shadow-focus: 0 0 0 3px rgba(197, 165, 114, 0.4); /* Form-Input-Aliases (Plan 04-01.1) — semantic mapping, alle existieren bereits unter den Brand-Tokens. Aliases existieren, damit Auth-Forms eine stabile API haben falls wir das Input-Styling später entkoppeln wollen. */ --input-bg: var(--brand-bg-elevated); --input-border: var(--brand-border); --input-text: var(--brand-text); --input-focus-ring: var(--shadow-focus); /* Motion */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 120ms; --dur-base: 220ms; color-scheme: light; } /* ---------------- Dark (Toggle via data-theme="dark") ---------------- */ [data-theme='dark'] { --brand-bg: #0E0E0E; --brand-bg-elevated: #161616; --brand-text: #F4F1E8; --brand-text-muted: #A8A29A; --brand-primary: #F4F1E8; --brand-primary-contrast: #0E0E0E; --brand-accent: #C5A572; --brand-accent-strong: #DCBF8C; --brand-border: #2A2823; --brand-surface-hover: #1F1D17; --brand-danger: #E5786E; --brand-success: #6BAF75; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lift: 0 4px 8px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-focus: 0 0 0 3px rgba(197, 165, 114, 0.55); color-scheme: dark; } /* ---------------- Reduced Motion (DSGVO/A11y) ---------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }