/*
 * Design tokens — bron: redesign-design-system.md.
 * Kleur/typografie/spacing komen ook in theme.json terug (voor de
 * blockeditor); hier staan ze nogmaals als CSS custom properties zodat ze
 * ook buiten block-markup (headers, footer, templates) bruikbaar zijn, plus
 * de tokens die theme.json niet dekt (schaduw, z-index, motion).
 *
 * Contrastwaarden zijn met de hand beredeneerd, nog niet met een
 * contrastchecker geverifieerd — zie design-system.md, regel 3. TODO vóór
 * productieactivatie: reken --color-primary/--color-accent-tekstcombinaties
 * na met een echte WCAG 2.2 AA-tool.
 */

:root {
	/* Merk */
	--color-primary: #2CC84D;         /* alleen als achtergrond met --color-ink erop (5.56:1, AA) — NIET als tekstkleur op wit, zie hieronder */
	--color-primary-dark: #167C33;    /* geverifieerd: 5.30:1 op wit — voor groene tekst/link-hover (was #1F9E3B, 3.49:1, faalde AA) */
	--color-accent: #C05300;          /* geverifieerd: 4.69:1 met witte knoptekst (was #E37A00, met inkt erop 4.13:1, faalde AA voor kleine bold tekst) */
	--color-accent-hover: #9C4300;    /* geverifieerd: 6.53:1 met witte knoptekst */
	--color-ink: #2E3350;
	--color-navy: #3C415D;

	/* Neutraal */
	--color-bg: #FFFFFF;
	--color-bg-warm: #EEE9E2;
	--color-bg-muted: #F5F2ED;
	--color-border: #DAD6CE;
	--color-text: var(--color-ink);
	--color-text-muted: #5C6178;
	--color-text-inverse: #FFFFFF;

	/* Interactie */
	--color-link: var(--color-ink);
	--color-focus: #0B5FFF;           /* 5.13:1 op wit — AA. Op donkere vlakken (navy) maar 1.94:1: gebruik daar --color-focus-on-dark */
	--color-focus-on-dark: #FFD400;   /* 6.96:1 op navy */

	/* Status */
	--color-success: #1F9E3B;
	--color-error: #B3261E;

	/* Typografie */
	--font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--text-body: 1rem;
	--text-body-lg: 1.125rem;
	--text-small: 0.875rem;
	--text-h5: 1.25rem;
	--text-h4: 1.5rem;
	--text-h3: 1.875rem;
	--text-h2: 2.25rem;
	--text-h1: clamp(2.5rem, 5vw, 3.5rem);

	--line-height-body: 1.65;
	--line-height-heading: 1.15;

	--max-line-length: 70ch;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;

	/* Vorm */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-pill: 999px;

	--shadow-card: 0 1px 3px rgba(46, 51, 80, .08), 0 1px 2px rgba(46, 51, 80, .06);
	--shadow-card-hover: 0 4px 12px rgba(46, 51, 80, .12);

	/* Layout */
	--container-max: 1200px;
	--container-article: 750px;
	--header-height: 4.5rem;

	--bp-sm: 390px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1440px;

	/* Beweging */
	--motion-fast: 150ms;
	--motion-base: 250ms;
	--motion-slow: 400ms;
	--motion-easing: ease-out;

	/* Lagen */
	/* Header staat bewust BOVEN het mobiele menu (i.t.t. de eerder
	   gebruikelijke volgorde) — de menu-knop in de header verandert zelf
	   in een sluitknop (icoon + label wisselt naar "Sluiten", zie
	   js/navigation.js) zodra het menu openstaat, dus de header (met die
	   knop erin) moet zichtbaar/klikbaar blijven bovenop het geopende
	   menu-paneel, niet erdoor bedekt worden. */
	--z-header: 300;
	--z-mobile-menu: 200;
	--z-modal: 400;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--motion-fast: 0ms;
		--motion-base: 0ms;
		--motion-slow: 0ms;
	}
}