/**
 * Design tokens — Kerstavontuur editorial (strict palette)
 */

:root {
	--color-ivory: #faf6ef;
	--color-forest: #1e3a2f;
	--color-gold: #c9953a;
	--color-forest-light: #2d5240;
	--color-warm-white: #ffffff;
	--color-text: #2c2c2c;
	--color-muted: #7a6f63;
	--color-border: #e8e0d4;
	--color-ivory-alt: #f2ede4;

	/* Header: lichte schil (past bij ivory body) */
	--color-header-bg: #faf9f5;
	--color-header-bg-scrolled: #f4f3ee;
	--header-nav-ease: cubic-bezier(0.19, 1, 0.22, 1);

	/* Typografie: alleen Fraunces (koppen) + DM Sans (tekst/UI) */
	--font-heading: "Fraunces", serif;
	--font-body: "DM Sans", system-ui, -apple-system, sans-serif;
	--font-display: var(--font-heading);

	--font-size-body: 1.125rem;
	--line-height-body: 1.8;
	--content-max: 1200px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--shadow-soft: 0 4px 24px rgba(30, 58, 47, 0.08);
	--shadow-page: 0 2px 16px rgba(30, 58, 47, 0.06);
	--transition: 0.2s ease;
	/* Sticky subkoppen / rail: wordt door main.js gezet (px); fallback tot eerste meting */
	--header-sticky-offset: 5rem;
	/*
	 * Geen vaste rem hier: bij niet-fixed header staat #page al onder de header in de flow.
	 * Dubbele ruimte (header + padding) duwt layout/sidebar naar beneden. JS zet px bij fixed.
	 */
	--site-header-offset: 0px;
}