:root{
/* Vaste huisstijlkleuren */
--magenta:#d60b52;--indigo:#29235c;--ink:#333333;--grey-light:#f7f7f7;--green:#61a229;
--indigo-tint:#eeedf4;--magenta-tint:#fbe7ee;
/* Afgeleide statussen van de vaste kleuren (hover/active/lijnen) */
--magenta-hover:#b80945;--magenta-active:#9c073a;--indigo-hover:#1e1945;--indigo-soft:#4a4380;
--green-hover:#528d22;--green-tint:#eef5e8;
--border:#e2e0ec;--border-strong:#c9c5dc;--ink-soft:#5c5c66;--ink-muted:#7a7a85;--white:#ffffff;
/* Semantische aliassen — gebruik deze in componenten */
--brand-primary:var(--magenta);--brand-primary-hover:var(--magenta-hover);--brand-primary-active:var(--magenta-active);
--brand-secondary:var(--indigo);--brand-secondary-hover:var(--indigo-hover);
--text-heading:var(--indigo);--text-body:var(--ink);--text-muted:var(--ink-muted);--text-inverse:var(--white);--text-accent:var(--magenta);--text-link:var(--magenta);--text-link-hover:var(--indigo);
--surface-page:var(--white);--surface-subtle:var(--grey-light);--surface-card:var(--white);--surface-inverse:var(--indigo);--surface-indigo-tint:var(--indigo-tint);--surface-magenta-tint:var(--magenta-tint);
--border-subtle:var(--border);--border-accent:var(--magenta);--border-focus:var(--magenta);
--icon-line:var(--indigo);--icon-accent:var(--magenta);
--status-ok-fg:var(--green);--status-ok-bg:var(--green-tint)}