/* ========================================================= Nedals Hexenkessel — Design Tokens Light: Lavendel BG + dunkles Violett FG Dark: Tiefes Violett BG + warmes Helles Gelb FG ========================================================= */ /* Webfonts werden via im HTML-Head geladen, nicht hier per @import — sonst seriell statt parallel und FOUT. */ /* ---------- Base palette: Violet ramp ---------- */ :root { --violet-50: oklch(98% 0.012 295); --violet-100: oklch(95% 0.028 295); --violet-200: oklch(90% 0.055 295); --violet-300: oklch(82% 0.090 295); --violet-400: oklch(70% 0.150 295); --violet-500: oklch(58% 0.180 295); --violet-600: oklch(48% 0.180 295); --violet-700: oklch(38% 0.150 295); --violet-800: oklch(28% 0.110 295); --violet-900: oklch(22% 0.080 295); --violet-950: oklch(18% 0.070 295); --yellow-50: oklch(98% 0.030 95); --yellow-100: oklch(96% 0.060 95); --yellow-200: oklch(94% 0.080 95); --yellow-300: oklch(91% 0.105 92); --yellow-400: oklch(85% 0.135 88); --plum: oklch(55% 0.155 340); --sage: oklch(70% 0.075 150); --rust: oklch(64% 0.150 40); /* ---------- Light mode (default) ---------- */ --bg: var(--violet-50); --bg-elev: #FFFFFF; --bg-sunken: var(--violet-100); --bg-tint: oklch(94% 0.045 295); --fg: var(--violet-900); --fg-muted: var(--violet-700); --fg-subtle: oklch(52% 0.022 280); --fg-faint: oklch(64% 0.018 280); --fg-on-accent: var(--violet-50); --accent: var(--violet-600); --accent-hover: var(--violet-700); --accent-soft: var(--violet-100); --border: oklch(86% 0.045 295); --border-strong: oklch(75% 0.075 295); --divider: oklch(90% 0.030 295); --tag-bg: var(--violet-100); --tag-fg: var(--violet-700); --shadow-sm: 0 1px 2px oklch(20% 0.080 295 / 0.06), 0 1px 1px oklch(20% 0.080 295 / 0.04); --shadow-md: 0 4px 12px oklch(20% 0.080 295 / 0.08), 0 2px 4px oklch(20% 0.080 295 / 0.05); --shadow-lg: 0 18px 40px oklch(20% 0.080 295 / 0.14), 0 6px 12px oklch(20% 0.080 295 / 0.08); --focus-ring: 0 0 0 2px var(--violet-200); --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Cinzel", "IM Fell English", "Cormorant Garamond", Georgia, serif; --font-body: var(--font-sans); --font-mono: var(--font-sans); --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 36px; --fs-3xl: 48px; --fs-4xl: 64px; --fs-5xl: 88px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.55; --lh-loose: 1.7; --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 320ms; --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1); } /* ---------- Dark mode: explicit override ---------- */ :root[data-theme="dark"] { --bg: oklch(14% 0.045 295); --bg-elev: oklch(21% 0.070 295); --bg-sunken: oklch(10% 0.035 295); --bg-tint: oklch(27% 0.085 295); --fg: var(--yellow-100); --fg-muted: oklch(86% 0.060 95); --fg-subtle: oklch(76% 0.045 95); --fg-faint: oklch(66% 0.030 95); --fg-on-accent: var(--violet-900); --accent: var(--yellow-100); --accent-hover: var(--yellow-50); --accent-soft: color-mix(in oklch, var(--yellow-100) 25%, transparent); --border: oklch(32% 0.075 295); --border-strong: oklch(46% 0.090 295); --divider: oklch(26% 0.065 295); --tag-bg: oklch(40% 0.095 295); --tag-fg: var(--yellow-100); --shadow-sm: 0 0 0 1px oklch(58% 0.180 295 / 0.18), 0 2px 6px oklch(58% 0.180 295 / 0.25), 0 8px 16px oklch(58% 0.180 295 / 0.18); --shadow-md: 0 0 0 1px oklch(58% 0.180 295 / 0.22), 0 6px 14px oklch(58% 0.180 295 / 0.35), 0 18px 32px oklch(58% 0.180 295 / 0.22); --shadow-lg: 0 0 0 1px oklch(58% 0.180 295 / 0.30), 0 12px 28px oklch(58% 0.180 295 / 0.45), 0 32px 60px oklch(58% 0.180 295 / 0.30); --focus-ring: 0 0 0 2px var(--yellow-200); } /* Light ist hartes Default — System-prefers-color-scheme wird bewusst ignoriert. Dark gibt's nur opt-in über data-theme="dark" (Toggle persistiert in localStorage). */ /* ---------- Box model reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* ---------- Element defaults ---------- */ html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; color: var(--fg); margin: 0; text-wrap: balance; } h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); font-weight: 600; letter-spacing: 0.015em; } h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); font-weight: 500; letter-spacing: 0.02em; } h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); font-weight: 500; letter-spacing: 0.025em; } h4 { font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: 500; letter-spacing: 0.025em; } p { margin: 0; text-wrap: pretty; } .eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg-subtle); } .num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } code, kbd, samp { font-family: var(--font-sans); font-size: 0.92em; } a { color: var(--accent); text-decoration-color: color-mix(in oklch, var(--accent) 35%, transparent); text-underline-offset: 3px; transition: color var(--duration-fast) ease; } a:hover { color: var(--accent-hover); } :focus-visible { outline: none; box-shadow: var(--focus-ring); } ::selection { background: var(--accent-soft); color: var(--fg); } @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; } }