/*
 * Designtokens holzverstehen.de — v4.
 *
 * Wit, donkerbruin en walnootbruin. De lichte basis is echt wit (#FFFFFF),
 * donkerbruin (#2b211b) draagt het merk en de koppen, walnootbruin (#75472f)
 * markeert bediening en huidige selectie. Categorieën krijgen geen zestien
 * eigen UI-kleuren meer: elke [data-kleur] wijst naar dezelfde bruine
 * bedieningskleur. Inhoudelijke statuskleuren (waarschuwing, gelukt) behouden
 * hun eigen betekenisvolle tint.
 *
 * De tokennamen zijn ongewijzigd ten opzichte van de vorige versie, zodat alle
 * bestaande componenten en inline verwijzingen blijven werken.
 */

:root {
	color-scheme: light dark;

	/* Basis: echt wit met donkerbruine inkt */
	--inkt: #30251e;
	--inkt-zacht: #6b5b50;
	--inkt-licht: #6b5b50;
	--papier: #ffffff;
	--papier-2: #f8f4f0;
	--papier-3: #f0e8e1;
	--lijn: #e2d7cd;
	--lijn-sterk: #927d6c;

	/* Merk */
	--navy: #2b211b;
	--primair: #75472f;
	--primair-donker: #58331f;
	--primair-zacht: #f7f0e9;
	--op-primair: #ffffff;
	--link: #75472f;
	--accent: #75472f;
	--accent-zacht: #f7f0e9;
	--goed: #166534;
	--goed-zacht: #edf8f0;
	--let-op: #9a3412;
	--let-op-zacht: #fff4ed;
	--focus: #75472f;

	/* Voormalige clusterkleuren. Bewaard als naam, maar visueel wijst alles
	   naar dezelfde bruine bedieningskleur: het onderscheid komt van de naam
	   en het kleine functie-icoon, niet van zestien tinten. */
	--amber: var(--link);         --amber-zacht: var(--primair-zacht);
	--vuurrood: var(--link);      --vuurrood-zacht: var(--primair-zacht);
	--waterblauw: var(--link);    --waterblauw-zacht: var(--primair-zacht);
	--aqua: var(--link);          --aqua-zacht: var(--primair-zacht);
	--zand: var(--link);          --zand-zacht: var(--primair-zacht);
	--kobalt: var(--link);        --kobalt-zacht: var(--primair-zacht);
	--leisteen: var(--link);      --leisteen-zacht: var(--primair-zacht);
	--eiken: var(--link);         --eiken-zacht: var(--primair-zacht);
	--dakpan: var(--link);        --dakpan-zacht: var(--primair-zacht);
	--hemel: var(--link);         --hemel-zacht: var(--primair-zacht);
	--mos: var(--link);           --mos-zacht: var(--primair-zacht);
	--beton: var(--link);         --beton-zacht: var(--primair-zacht);
	--noot: var(--link);          --noot-zacht: var(--primair-zacht);
	--blad: var(--link);          --blad-zacht: var(--primair-zacht);
	--staal: var(--link);         --staal-zacht: var(--primair-zacht);
	--pruim: var(--link);         --pruim-zacht: var(--primair-zacht);

	/* Actieve clusterkleur; behouden als koppelpunt voor alle componenten */
	--cluster: var(--primair);
	--cluster-zacht: var(--primair-zacht);

	/* Typografie: Manrope voor koppen, Inter voor tekst en bediening */
	--kop: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--tekst: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--t-xs: 0.875rem;
	--t-s: 0.875rem;
	--t-m: 1rem;
	--t-l: 1.125rem;
	--t-xl: 1.375rem;
	--t-2xl: 1.5rem;
	--t-3xl: 2rem;
	--t-4xl: 2.75rem;

	/* Ritme: 4, 8, 12, 16, 24, 32, 48, 64 */
	--r-1: 4px;
	--r-2: 8px;
	--r-3: 12px;
	--r-4: 16px;
	--r-5: 24px;
	--r-6: 32px;
	--r-7: 48px;
	--r-8: 64px;

	/* Vorm */
	--rond-s: 6px;
	--rond-m: 8px;
	--rond-l: 12px;
	--rond-xl: 12px;

	--schaduw-s: none;
	--schaduw-m: none;
	--schaduw-l: 0 12px 32px rgb(43 33 27 / 0.15);

	--breedte: 1216px;
	--breedte-tekst: 760px;
	--zijbalk-breedte: 360px;

	--soepel: 140ms ease-out;

	/* Werkelijke hoogte van de vaste bediening; wh-ui.js werkt --sticky-offset
	   bij op basis van wat er op dat moment echt vaststaat. */
	--header-hoogte: 132px;
	--balk-hoogte: 56px;
	--sticky-offset: 68px;
}

/* Clusterkleur toewijzen. De koppeling blijft bestaan; visueel is elke
   categorie dezelfde rustige bruine bedieningskleur. */
[data-kleur="amber"],
[data-kleur="vuurrood"],
[data-kleur="waterblauw"],
[data-kleur="aqua"],
[data-kleur="zand"],
[data-kleur="kobalt"],
[data-kleur="leisteen"],
[data-kleur="eiken"],
[data-kleur="dakpan"],
[data-kleur="hemel"],
[data-kleur="mos"],
[data-kleur="beton"],
[data-kleur="noot"],
[data-kleur="blad"],
[data-kleur="staal"],
[data-kleur="pruim"],
[data-kleur="primair"] {
	--cluster: var(--primair);
	--cluster-zacht: var(--primair-zacht);
}

/* Donkere modus: bestaande voorkeur blijft ondersteund. Bruine tinten
   opgehelderd zodat contrast op donker behouden blijft. */
@media (prefers-color-scheme: dark) {
	:root {
		--inkt: #f5ede5;
		--inkt-zacht: #d1bead;
		--inkt-licht: #d1bead;
		--papier: #211913;
		--papier-2: #30251e;
		--papier-3: #2b211b;
		--lijn: #5f4d3e;
		--lijn-sterk: #ae9681;

		--navy: #f5ede5;
		--primair: #d3a378;
		--primair-donker: #e8bd96;
		--primair-zacht: #493526;
		--op-primair: #211913;
		--link: #e3b58d;
		--accent: #e3b58d;
		--accent-zacht: #493526;
		--goed: #a0d8b5;
		--goed-zacht: #173729;
		--let-op: #ffb890;
		--let-op-zacht: #3a241d;
		--focus: #e3b58d;

		--schaduw-l: 0 12px 32px rgb(0 0 0 / 0.55);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root { --soepel: 0ms linear; }
}