/* Design tokens — Figma Marketing DS (claude.ai/design handoff 4, makeover).
   Bron: _ds/figma-marketing-design-system/tokens/*.css. De variabelenamen van
   het vorige DS blijven bestaan zodat alle schermen meekleuren; de waarden
   volgen het nieuwe systeem: monochroom zwart/wit, hairlines, magenta-accent,
   pill-CTA's, Inter variabel + JetBrains Mono voor eyebrows/badges. */

:root{
/* base ramp — geen mid-grays via opacity; hiërarchie komt uit gewicht */
--ink:#000000;--ink-muted:#333333;--ink-subtle:#555555;--ink-tertiary:#767676; /* lichtste AA-veilige grijs (4,54:1) */
--on-primary:#ffffff;
--canvas:#ffffff;--surface-1:#ffffff;--surface-2:#f7f7f5;
--surface-nav-active:#f0efe9; /* actieve nav-vulling (handoff-README r. 75 en 182, behandeling B) */
--inverse-canvas:#000000;--inverse-surface-1:#2a2a2a;--inverse-ink:#ffffff;--inverse-ink-muted:#999999;
--hairline:#e6e6e6;--hairline-soft:#f1f1f1;
/* brand */
--fin-orange:#ff3d8b;   /* accent-magenta — naam blijft voor compatibiliteit */
--accent-magenta:#ff3d8b;
--brand-blue:#1f1d3d;   /* block-navy */
/* pastel color blocks (signatuur van het DS; spaarzaam gebruiken) */
--block-lime:#dceeb1;--block-lilac:#c5b0f4;--block-cream:#f4ecd6;
--block-pink:#efd4d4;--block-mint:#c8e6cd;--block-coral:#f3c9b6;--block-navy:#1f1d3d;
/* Taakbord-tinten (opvolgpunt fase 3, #11): de kale hex uit bord.css hierheen. */
--surface-sunken:#fbfbfa;          /* kolom-body en uitgeklapte detailregio */
--surface-sleep-doel:#f4f4f1;      /* de doelkolom tijdens het slepen */
--badge-vulling:rgba(0,0,0,.14);   /* het aantal in de kolomkop */
--rand-cream:#d9d5c9;--rand-lilac:#cfc2ee;--rand-coral:#e8cdbd; /* kaartranden per kolomkleur */
--rand-lime:#c3d69c;               /* de klaar-stip */
--rand-mint:#b9d8c0;               /* reviewkaart-rand (herindeling 24/8) */
--rand-dicht:#c9c9c2;              /* de dichte sleepkolom */
/* semantic */
--semantic-error:#c41c1c;--semantic-success:#1ea64a;
/* aliases */
--color-primary:var(--ink);--color-accent:var(--accent-magenta);
--focus-ring:var(--ink);
}

/* Vlak en hairline-gedreven; schaduw alleen voor zwevende lagen. */
:root{
--divider:1px solid var(--hairline-soft);
--transition-fast:120ms ease;
--transition-base:180ms ease;
--shadow-soft:0 8px 24px rgba(0,0,0,.08);
}

/* Inter vervangt figmaSans, JetBrains Mono vervangt figmaMono (per DS-readme).
   De fonts zelf laden via <link> in de head van elk scherm: een @import hier
   (na andere rules) is per CSS-spec ongeldig en werd stilzwijgend genegeerd. */
:root{--font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace}

:root{
--radius-xs:2px;--radius-sm:6px;--radius-md:8px;--radius-lg:8px;--radius-xl:24px;--radius-pill:50px;
--radius-button:var(--radius-pill);--radius-input:8px;--radius-card:8px;
}

:root{
--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;
--container-max:1280px;
--button-padding-y:10px;--button-padding-x:20px;--input-padding-y:10px;--input-padding-x:14px;
--nav-height:56px;
}

:root{
--headline-size:28px;--headline-weight:540;--headline-lh:1.10;--headline-ls:-0.7px;
--display-md-size:40px;--display-md-ls:-1px;
--body-size:16px;--body-sm-size:14px;--caption-size:12px;
--button-size:14px;--button-weight:540;--button-lh:1.20;--button-ls:0;
--mono-size:12px;
}