/* theme.css — Verander hier kleuren, fonts, radii, spacing. De rest van de styling refereert naar deze variabelen. Wissel theme door op data-theme="light" te zetten. */ :root { /* Colors — dark default ("midnight") */ --bg: #0b1020; --bg-elev: #11172e; --bg-elev-2: #161e3d; --surface: rgba(255, 255, 255, 0.03); --surface-strong: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15); --text: #eaf0ff; --text-muted: #8a93b3; --text-soft: #b8c1dc; --primary: #4ade80; /* groei groen */ --primary-soft: rgba(74, 222, 128, 0.15); --primary-glow: rgba(74, 222, 128, 0.35); --accent: #60a5fa; /* secondary blauw */ --warning: #fbbf24; --danger: #f87171; /* Gradient achter de hoofd-KPI */ --hero-gradient: radial-gradient(60% 80% at 30% 20%, rgba(74,222,128,0.18), transparent 60%), radial-gradient(60% 80% at 80% 80%, rgba(96,165,250,0.18), transparent 60%), linear-gradient(180deg, #131a36 0%, #0b1020 100%); /* Allocation colors — overschrijven om je eigen palet te gebruiken */ --alloc-1: #4ade80; --alloc-2: #60a5fa; --alloc-3: #c084fc; --alloc-4: #fb7185; --alloc-5: #fbbf24; --alloc-6: #34d399; --alloc-7: #38bdf8; --alloc-8: #f472b6; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --fs-hero: clamp(2.5rem, 5vw, 4rem); --fs-large: 1.75rem; --fs-medium: 1.125rem; --fs-base: 0.95rem; --fs-small: 0.825rem; /* Layout */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px rgba(0,0,0,.45); --transition: 200ms cubic-bezier(.2,.7,.3,1); } /* Optional light theme — toggle via [data-theme="light"] on */ :root[data-theme='light'] { --bg: #f7f8fc; --bg-elev: #ffffff; --bg-elev-2: #ffffff; --surface: rgba(0,0,0,0.02); --surface-strong: rgba(0,0,0,0.04); --border: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.16); --text: #0b1020; --text-muted: #5b6586; --text-soft: #2d3559; --hero-gradient: radial-gradient(60% 80% at 30% 20%, rgba(74,222,128,0.18), transparent 60%), radial-gradient(60% 80% at 80% 80%, rgba(96,165,250,0.20), transparent 60%), linear-gradient(180deg, #ffffff 0%, #eef2ff 100%); }