/* Design tokens — Kings & Queens Resilienztraining. * * The defaults below are the "classic" (Farbenmut) palette; the * theme-bold.css / theme-minimal.css sheets override tokens on * body.kq-style-* so the three style options share every component * rule in base.css and differ only here. * * Dark mode ("modo black") keys off [data-theme="dark"] on , * set before first paint by uikit's theme-boot (no FOUC) and toggled * by the header button. */ :root { /* surfaces */ --kq-bg: #fdf9f3; --kq-surface: #ffffff; --kq-tint: #f7efe2; --kq-line: #e8ddcc; /* ink */ --kq-ink: #2b2b33; --kq-ink-700: #4c4a55; --kq-ink-500: #6f6c7a; /* brand accents (Farbenmut) */ --kq-primary: #e2606b; /* coral — CTAs */ --kq-primary-ink: #ffffff; --kq-accent: #4a9b6e; /* sage green */ --kq-warm: #f2c14e; /* sun yellow */ --kq-cool: #7b84c9; /* lavender blue */ /* shape + type */ --kq-radius: 16px; --kq-radius-sm: 10px; --kq-font-display: "Avenir Next", "Segoe UI", system-ui, sans-serif; --kq-font-body: "Avenir Next", "Segoe UI", system-ui, sans-serif; /* spacing scale */ --kq-1: 4px; --kq-2: 8px; --kq-3: 12px; --kq-4: 16px; --kq-5: 24px; --kq-6: 32px; --kq-7: 48px; --kq-8: 72px; --kq-text-sm: 0.875rem; --kq-text-lg: 1.125rem; --kq-shadow: 0 8px 30px rgb(43 43 51 / 0.08); } [data-theme="dark"] { --kq-bg: #17171e; --kq-surface: #22222c; --kq-tint: #1d1d26; --kq-line: #33323e; --kq-ink: #f2efe8; --kq-ink-700: #c9c5bc; --kq-ink-500: #98949e; --kq-primary: #f0787f; --kq-primary-ink: #201316; --kq-accent: #63b586; --kq-warm: #f6ce6c; --kq-cool: #98a1e0; --kq-shadow: 0 8px 30px rgb(0 0 0 / 0.35); }