/* website-stunter.nl — design tokens (bron: ontwerpsysteem, alleen-lezen kopie) */
/* Self-hosted from Google Fonts (OFL). Latin + latin-ext subsets.
   Schibsted Grotesk = display + body · JetBrains Mono = details · Bricolage Grotesque 700 = wordmark only. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/BricolageGrotesque-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/BricolageGrotesque-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/JetBrainsMono-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/JetBrainsMono-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:italic;font-weight:400 900;font-display:swap;src:url('../fonts/SchibstedGrotesk-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:italic;font-weight:400 900;font-display:swap;src:url('../fonts/SchibstedGrotesk-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/SchibstedGrotesk-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/SchibstedGrotesk-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* --- colors --- */
:root{
/* Inkt — primary brand colour. Text, primary buttons, dark sections. */
--ink-950:#0B1322;--ink-900:#101B30;--ink-800:#18253D;--ink-700:#26354F;--ink-600:#3A4A66;--ink-500:#56647D;--ink-400:#7C879B;--ink-300:#A9B1BF;--ink-200:#D0D5DE;--ink-100:#E8EBF0;--ink-50:#F3F5F8;
/* Signaal — accent. The dash, .nl, key CTA, focus. Use sparingly (≈5% of a screen). */
--signal-800:#8E2E12;--signal-700:#B23C19;--signal-600:#D24A22;--signal-500:#EE5A2F;--signal-400:#F47B55;--signal-300:#F8A488;--signal-200:#FBCBB9;--signal-100:#FDE7DE;--signal-50:#FFF5F1;
/* Polder — secondary. Checks, success, "inbegrepen". */
--polder-800:#173B2E;--polder-700:#1F4D3C;--polder-600:#2A6450;--polder-500:#347A61;--polder-300:#8CC2AC;--polder-200:#BCDCCD;--polder-100:#DCEDE5;--polder-50:#EEF6F2;
/* Zand — warm neutrals / backgrounds */
--sand-50:#FBF9F5;--sand-100:#F5F1EA;--sand-200:#ECE6DB;--sand-300:#DDD5C7;--sand-400:#C3B9A8;--sand-500:#9C917F;
--white:#FFFFFF;
/* Status */
--warning-700:#8A5A0B;--warning-500:#C98A1B;--warning-100:#FBF0D9;
--danger-700:#9F1F14;--danger-600:#B42318;--danger-100:#FDECEA;

/* Semantic — surfaces */
--bg-page:var(--sand-50);--bg-surface:var(--white);--bg-subtle:var(--sand-100);--bg-muted:var(--sand-200);
--bg-inverse:var(--ink-900);--bg-inverse-raised:var(--ink-800);--bg-inverse-deep:var(--ink-950);
/* Semantic — text */
--text-strong:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--ink-500);--text-subtle:var(--ink-400);
--text-inverse:var(--white);--text-inverse-muted:var(--ink-300);
--text-accent:var(--signal-700);--text-accent-inverse:var(--signal-400);
--text-success:var(--polder-600);--text-danger:var(--danger-600);
/* Semantic — borders */
--border-subtle:var(--sand-200);--border-default:var(--sand-300);--border-strong:var(--ink-200);--border-input:var(--ink-400);--border-focus:var(--ink-900);
--border-inverse:rgba(255,255,255,.12);--border-inverse-strong:rgba(255,255,255,.28);
/* Semantic — actions */
--action-primary:var(--ink-900);--action-primary-hover:var(--ink-700);--action-primary-text:var(--white);
--accent:var(--signal-500);--accent-hover:var(--signal-400);--accent-text:var(--ink-950);--accent-soft:var(--signal-100);
--focus-ring:var(--signal-500);--focus-ring-inverse:var(--signal-400);--focus-halo:rgba(238,90,47,.22);
}

/* --- typography --- */
:root{
--font-display:'Schibsted Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--font-wordmark:'Bricolage Grotesque','Schibsted Grotesk',ui-sans-serif,sans-serif; /* wordmark only */
--font-body:'Schibsted Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
/* Fluid sizes (mobile 375 → desktop 1280) */
--fs-display:clamp(2.75rem,1.9rem + 3.6vw,4.75rem);/* @kind other */ /* 44 → 76 */
--fs-h1:clamp(2.25rem,1.7rem + 2.4vw,3.5rem);/* @kind other */       /* 36 → 56 */
--fs-h2:clamp(1.75rem,1.4rem + 1.5vw,2.5rem);/* @kind other */       /* 28 → 40 */
--fs-h3:clamp(1.375rem,1.25rem + .5vw,1.625rem);/* @kind other */    /* 22 → 26 */
--fs-h4:1.25rem;/* @kind other */   /* 20 */
--fs-h5:1.0625rem;/* @kind other */ /* 17 */
--fs-lead:clamp(1.125rem,1.05rem + .35vw,1.3125rem);/* @kind other *//* 18 → 21 */
--fs-body:1.0625rem;/* @kind other */ /* 17 */
--fs-small:.9375rem;/* @kind other */ /* 15 */
--fs-xs:.8125rem;/* @kind other */    /* 13 */
--fs-eyebrow:.75rem;/* @kind other */ /* 12, mono caps */
--fs-price:clamp(2.5rem,2rem + 2vw,3.5rem);/* @kind other */
--fw-regular:400;/* @kind font */--fw-medium:500;/* @kind font */--fw-semibold:600;/* @kind font */--fw-bold:700;/* @kind font */
--lh-tight:1.02;/* @kind font */--lh-heading:1.1;/* @kind font */--lh-snug:1.3;/* @kind font */--lh-body:1.6;/* @kind font */
--tracking-display:-.03em;/* @kind font */--tracking-heading:-.018em;/* @kind font */--tracking-tight:-.01em;/* @kind font */--tracking-eyebrow:.09em;/* @kind font */
--measure:64ch;/* @kind spacing */--measure-narrow:48ch;/* @kind spacing */
}

/* --- spacing --- */
:root{
/* 4px base */
--space-0:0;--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-14:56px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
/* Rhythm */
--stack-xs:var(--space-2);--stack-sm:var(--space-4);--stack-md:var(--space-6);--stack-lg:var(--space-10);--stack-xl:var(--space-16);
--section-y-sm:clamp(48px,3vw + 36px,80px);/* @kind spacing */
--section-y:clamp(64px,5vw + 40px,128px);/* @kind spacing */
--section-y-lg:clamp(80px,7vw + 48px,160px);/* @kind spacing */
}

/* --- layout --- */
:root{
--container-narrow:760px;--container:1200px;--container-wide:1360px;
--gutter:clamp(20px,4vw,40px);/* @kind spacing */
--grid-columns:12;/* @kind other */--grid-gap:clamp(16px,2vw,24px);--grid-gap-lg:clamp(24px,3vw,40px);
/* Breakpoints (reference; CSS vars can't be used in media queries) sm 640 · md 768 · lg 1024 · xl 1280 */
--bp-sm:640px;/* @kind other */--bp-md:768px;/* @kind other */--bp-lg:1024px;/* @kind other */--bp-xl:1280px;/* @kind other */
--nav-height:72px;
--z-nav:50;/* @kind other */--z-overlay:90;/* @kind other */--z-dialog:100;/* @kind other */--z-toast:110;/* @kind other */--z-tooltip:120;/* @kind other */
--tap-min:44px;
}

/* --- radius --- */
:root{
--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-pill:999px;
--radius-button:var(--radius-md);--radius-input:var(--radius-md);--radius-card:var(--radius-lg);--radius-panel:var(--radius-xl);--radius-mockup:var(--radius-lg);
}

/* --- elevation --- */
:root{
--border-width:1px;--border-width-strong:1.5px;
/* Ink-tinted, soft, low. Never pure black, never coloured glows. */
--shadow-xs:0 1px 2px rgba(16,27,48,.06);
--shadow-sm:0 1px 2px rgba(16,27,48,.05),0 2px 8px -2px rgba(16,27,48,.06);
--shadow-md:0 2px 4px rgba(16,27,48,.04),0 10px 28px -8px rgba(16,27,48,.12);
--shadow-lg:0 4px 8px rgba(16,27,48,.04),0 24px 56px -16px rgba(16,27,48,.20);
--shadow-mockup:0 0 0 1px rgba(16,27,48,.06),0 2px 6px rgba(16,27,48,.05),0 36px 72px -24px rgba(16,27,48,.32);
--shadow-inset:inset 0 1px 2px rgba(16,27,48,.06);
}

/* --- motion --- */
:root{
--ease-out:cubic-bezier(.2,.7,.2,1);/* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1);/* @kind other */
--ease-in:cubic-bezier(.5,0,.75,0);/* @kind other */
--dur-instant:80ms;/* @kind other */--dur-fast:140ms;/* @kind other */--dur-base:220ms;/* @kind other */--dur-slow:340ms;/* @kind other */--dur-reveal:600ms;/* @kind other */
--reveal-distance:16px;/* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:1ms;/* @kind other */--dur-base:1ms;/* @kind other */--dur-slow:1ms;/* @kind other */--dur-reveal:1ms;/* @kind other */--reveal-distance:0px}}