/* ==========================================================================
   Droomwand — tokens
   De enige plek met ruwe waarden. Alles daarbuiten verwijst hiernaar.
   ========================================================================== */

:root {
	/* --- Kleur: vlakken en tekst --- */
	--bg: #f3eee6;          /* crème, het papier van het atelier */
	--bg-elevated: #faf6ef;  /* iets lichter vlak, banden en voettekst */
	--surface: #fffcf7;      /* kaarten en velden */
	--fg: #1b1814;           /* inkt */
	--muted: #6f675c;        /* bijtekst */
	--subtle: #948c82;       /* onderschrift, zeer terughoudend */
	--border: #e2dad0;
	--border-sterk: #d3c8ba;

	/* --- Kleur: merk --- */
	--accent: #2a4743;       /* dennengroen */
	--accent-hover: #213a36;
	--accent-zacht: #e6ece9;
	--accent-fg: #f3eee6;
	--pine: #2a4743;
	--navy: #1f2e4a;
	--rust: #8f3f24;
	--blush: #c9a39a;
	--sand: #d4c4a8;
	--sky: #7a9bb5;
	--ink: #1b1814;
	--cream: #f3eee6;

	/* --- Kleur: statussen --- */
	--succes: #2f6b4f;
	--waarschuwing: #8f6524;
	--fout: #8f3f24;
	--fout-zacht: #f6e9e3;

	/* --- Letters --- */
	--font-sans: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;

	/* --- Typografische schaal (één schaal, 1.25 ratio, vloeiend aan de top) --- */
	--fs-xs: 0.75rem;    /* 12px — kicker, onderschrift */
	--fs-sm: 0.875rem;   /* 14px — navigatie, bijtekst */
	--fs-base: 1rem;     /* 16px — lopende tekst */
	--fs-md: 1.125rem;   /* 18px — lead */
	--fs-lg: 1.25rem;    /* 20px — kaartkop */
	--fs-xl: 1.5rem;     /* 24px */
	--fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
	--fs-3xl: clamp(1.75rem, 1.3rem + 2vw, 2.25rem);
	--fs-4xl: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);

	--lh-strak: 1.05;
	--lh-kop: 1.15;
	--lh-basis: 1.55;
	--lh-ruim: 1.7;

	--ls-strak: -0.02em;
	--ls-kicker: 0.2em;

	--fw-normaal: 400;
	--fw-medium: 500;
	--fw-halfvet: 600;

	/* --- Ruimteschaal (0,25rem-stappen, oplopend) --- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-7: 2rem;
	--sp-8: 2.5rem;
	--sp-9: 3rem;
	--sp-10: 3.5rem;
	--sp-11: 4rem;
	--sp-12: 5rem;
	--sp-13: 6rem;
	--sp-14: 7rem;
	--sp-15: 8rem;
	--sp-16: 10rem;

	/* --- Radii --- */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;
	--r-xl: 24px;
	--r-rond: 999px;

	/* --- Schaduwen: rustig, altijd met een haarlijn --- */
	--shadow-1:
		0 0 0 1px rgba(27, 24, 20, 0.06),
		0 1px 2px -1px rgba(27, 24, 20, 0.06),
		0 2px 4px 0 rgba(27, 24, 20, 0.04);
	--shadow-2:
		0 0 0 1px rgba(27, 24, 20, 0.08),
		0 2px 4px -2px rgba(27, 24, 20, 0.08),
		0 6px 12px -4px rgba(27, 24, 20, 0.06);
	--shadow-3:
		0 0 0 1px rgba(27, 24, 20, 0.08),
		0 8px 20px -8px rgba(27, 24, 20, 0.16),
		0 24px 48px -24px rgba(27, 24, 20, 0.18);

	/* --- Maten en containers --- */
	--max: 72rem;            /* 1152px — de hoofdcontainer */
	--max-smal: 48rem;       /* leesbreedte voor lopende tekst */
	--max-breed: 84rem;      /* uitzondering voor brede galerijen */
	--gutter: 1rem;
	--wrap: min(var(--max), calc(100% - var(--gutter) * 2));
	--wrap-smal: min(var(--max-smal), calc(100% - var(--gutter) * 2));
	--wrap-breed: min(var(--max-breed), calc(100% - var(--gutter) * 2));
	--header-hoogte: 4rem;
	--raak: 2.75rem;         /* minimale raakmaat, 44px */

	/* --- Focus --- */
	--ring: var(--accent);
	--ring-breedte: 2px;
	--ring-afstand: 2px;

	/* --- Beweging --- */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--duur-snel: 120ms;
	--duur: 220ms;
	--duur-traag: 380ms;

	/* --- Lagen --- */
	--z-mega: 40;
	--z-header: 50;
	--z-overlay: 60;
}

@media (min-width: 40rem) {
	:root {
		--gutter: 1.5rem;
	}
}