/* ========================================================================== Voluno — Design tokens (exact uit het ontwerpkader §4) ========================================================================== */ :root{ /* Brand blues */ --brand:#60A5FA; --brand-d:#2563EB; --brand-dp:#1D4ED8; --brand-x:#1e3a5f; /* navy */ --brand-xx:#0f1c3d; /* diep navy */ --brand-lt:#EFF6FF; --brand-ms:#DBEAFE; /* Neutrals */ --paper:#F8FAFF; --white:#FFFFFF; --ink:#1E293B; --warm:#64748B; --border:#BFDBFE; --border-l:#E2E8F0; /* Gold */ --gold:#C8900A; --gold-m:#E8A820; --gold-lt:#FDF4E0; --gold-bg:#FFFBE8; /* Status */ --green:#16A34A; --danger:#B91C1C; /* Radii */ --r-sm:12px; --r-md:14px; --r-lg:20px; --r-pill:999px; /* panelen 20, podium 24 (calcA), klein 12 */ /* Spacing rhythm (8pt) */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; /* Type families */ --f-display:'Cormorant Garamond', Georgia, serif; --f-sans:'Outfit', system-ui, -apple-system, sans-serif; --f-mono:'JetBrains Mono', ui-monospace, monospace; /* Elevation */ --sh-sm:0 1px 2px rgba(30,58,95,.06); --sh-md:0 8px 24px -10px rgba(30,58,95,.18); --sh-lg:0 22px 50px -16px rgba(30,58,95,.30); --sh-gold:0 12px 28px -10px rgba(200,144,10,.45); /* Motion */ --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.65,.05,.36,1); --dur-fast:160ms; --dur-mid:280ms; --dur-slow:600ms; /* Z-scale */ --z-sky:0; --z-base:1; --z-chip:40; --z-nav:60; --z-sticky:50; --z-modal:100; /* Layout */ --maxw:1180px; --gutter:clamp(20px, 5vw, 64px); } /* ---- Fonts (Google Fonts, display=swap geladen in ) ---- */ /* ---- Reset ---- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} } body{ font-family:var(--f-sans); font-weight:300; color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} :focus-visible{outline:2px solid var(--brand-d);outline-offset:3px;border-radius:4px}