/**
 * Design tokens — enige bron van waarheid voor kleuren, typografie, spacing
 * en motion. Elk ander CSS-bestand gebruikt uitsluitend var(--...).
 * Kleuren zijn afgeleid van het WAHD Herstelregie-logo:
 * donkerbruin #25140A, goud #D3A24E en crème #F4ECDD.
 */

:root {
	/* Basis — warme crème, afgeleid van de logoletters (#F4ECDD) */
	--color-bg: #f5eee1;
	--color-bg-alt: #ece0cb;
	--color-surface: #fffdf9;
	--color-surface-muted: #ece0cb;
	--color-border: #ddc9a6;

	--color-text: #241812;
	--color-text-muted: #6b5847;
	--color-text-on-accent: #2a1a0e;

	/* Goud-accent — logogoud (#D3A24E), met een dieper goud voor voldoende
	   contrast op de crème achtergrond (knoppen, links, accenten). */
	--color-accent: #b98a34;
	--color-accent-dark: #96702a;
	--color-accent-light: #e6d3a6;
	--color-gold-bright: #d3a24e;

	/* Donkerbruin — hoofdkleur van het logo (#25140A). Draagt koppen, footer,
	   dividers en donkere accentvlakken. Vervangt het oude diepgroen; de
	   --color-vitality-aliassen laten bestaande componenten automatisch mee
	   overschakelen naar de bruine huisstijl. */
	--color-brown: #3a2416;
	--color-brown-deep: #25140a;
	--color-brown-soft: #5a4232;
	--color-vitality: #3a2416;
	--color-vitality-light: #6b4a30;

	/* Warm terracotta — spaarzaam "pop"-accent (aankondiging, ticker, badges,
	   hover-gloed), afgestemd op het bruin/goud-palet. */
	--color-highlight: #b5673d;
	--color-highlight-dark: #8f4e2c;
	--color-highlight-light: #e8cdb6;

	/* Feedback */
	--color-success: #5a7d54;
	--color-error: #b5533c;

	/* Typografie */
	--font-heading: Georgia, 'Times New Roman', serif;
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-size-base: 1rem;
	--line-height-base: 1.65;

	/* Spacing-schaal */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;

	/* Vorm */
	--radius-sm: 4px;
	--radius-md: 12px;
	--radius-lg: 24px;
	--shadow-soft: 0 4px 20px rgba(58, 52, 44, 0.08);
	--container-width: 1160px;

	/* Motion */
	--duration-fast: 250ms;
	--duration-medium: 500ms;
	--duration-slow: 900ms;
	--ease-calm: cubic-bezier(0.4, 0, 0.2, 1);
}