/* ============================================ TOKENS — alle Design-Variablen an EINER Stelle. Hier änderst du Farben, Fonts, Abstände. ============================================ */ :root { /* === FARBEN === */ --green: #39ff14; /* Markenfarbe — Neongrün */ --green-soft: #7cff5a; --green-deep: #0e4d06; --bg-0: #030503; /* Tiefster Hintergrund */ --bg-1: #050805; --bg-2: #0a1208; --ink: #eaffe0; /* Haupttextfarbe */ --ink-dim: #6da36a; /* Sekundärtext */ --line: rgba(57, 255, 20, 0.16); --line-strong: rgba(57, 255, 20, 0.4); /* === GLOWS === */ --glow-soft: 0 0 12px rgba(57, 255, 20, 0.7), 0 0 32px rgba(57, 255, 20, 0.25); --glow-hard: 0 0 4px rgba(57, 255, 20, 1), 0 0 16px rgba(57, 255, 20, 0.9), 0 0 48px rgba(57, 255, 20, 0.4); /* === FONTS === */ --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; --font-display: 'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif; /* === SPACING (8pt scale) === */ --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px; /* === RADIUS === */ --r-sm: 2px; --r-md: 4px; /* === LAYOUT === */ --max-w: 1280px; --pad-x: clamp(20px, 5vw, 60px); /* === TIMING === */ --t-fast: 120ms; --t-base: 220ms; --t-slow: 400ms; /* === Tageszeit-Themes — werden via JS auf gesetzt === */ } /* MORNING — leicht wärmer, weicher */ html.theme-morning { --green: #5dff5a; --green-soft: #a4ff7a; --bg-0: #050805; --bg-1: #08120a; --ink: #f0ffe5; } /* DAY — neutral (= Default) */ html.theme-day { /* benutzt die :root-Defaults */ } /* NIGHT — gedämpft, dunkler, weicher */ html.theme-night { --green: #2ee012; --green-soft: #59ff3a; --bg-0: #020402; --bg-1: #040604; --bg-2: #060c05; --ink: #d8f5cf; --ink-dim: #5d8a5a; }