/* Design tokens bestebouwstofzuiger.nl (docs/design-spec.md, hoofdstuk 2).
   Geen dark mode: WordPress-site, body krijgt een expliciete achtergrond. */
:root {
	/* 2.1 Kleuren */
	--bsz-canvas: #F6F7F9;
	--bsz-surface: #FFFFFF;
	--bsz-surface-2: #EEF1F4;
	--bsz-foto: #F1F3F6;
	--bsz-ink: #1B2430;
	--bsz-ink-2: #5B6672;
	--bsz-ink-3: #6B7785;
	--bsz-line: #E1E5EA;
	--bsz-line-2: #C9D0D8;
	--bsz-blue: #1F4E79;
	--bsz-blue-tint: #E9F0F7;
	--bsz-accent: #B8480A;
	--bsz-accent-hover: #9E3D08;
	--bsz-focus: #5B95D6;
	--bsz-ok: #2E7D4F;
	--bsz-l: #256B42;
	--bsz-l-bg: #E6F4EC;
	--bsz-l-line: #BFE0CC;
	--bsz-m: #8A5A00;
	--bsz-m-bg: #FBF1DA;
	--bsz-m-line: #EDD59A;
	--bsz-h: #A52A1E;
	--bsz-h-bg: #FCEBE9;
	--bsz-h-line: #F1C2BC;
	--bsz-bol: #0000A4;
	/* Logomerk: de drie balkjes op ink (alleen in .bsz-logo) */
	--bsz-logo-l: #5CB27F;
	--bsz-logo-m: #E2B24A;
	--bsz-logo-h: #E06A5C;

	/* 2.2 Typografie */
	--bsz-font-display: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bsz-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bsz-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* 2.3 Ruimte (basis 4px) */
	--bsz-s1: 4px;
	--bsz-s2: 8px;
	--bsz-s3: 12px;
	--bsz-s4: 16px;
	--bsz-s5: 20px;
	--bsz-s6: 24px;
	--bsz-s8: 32px;
	--bsz-s12: 48px;
	--bsz-s14: 56px;
	--bsz-s16: 64px;

	/* 2.4 Radius */
	--bsz-r-card: 8px;
	--bsz-r-btn: 6px;
	--bsz-r-chip: 4px;

	/* 3.1 Container */
	--bsz-wrap: 1200px;
	--bsz-aside: 300px;
	--bsz-gutter: 24px;

	/* Verouderde namen (ronde 1 t/m 5), alleen zodat oude inline-stijlen niet
	   op een ontbrekende variabele vallen. Niet gebruiken in nieuwe code. */
	--bsz-papier: var(--bsz-canvas);
	--bsz-papier-donker: var(--bsz-surface-2);
	--bsz-grafiet: var(--bsz-ink);
	--bsz-staalblauw: var(--bsz-blue);
	--bsz-lijn: var(--bsz-line);
	--bsz-wit: var(--bsz-surface);
	--bsz-font-kop: var(--bsz-font-display);
	--bsz-radius: var(--bsz-r-card);
	--bsz-radius-klein: var(--bsz-r-btn);
	--bsz-maat-1: 4px;
	--bsz-maat-2: 8px;
	--bsz-maat-3: 16px;
	--bsz-maat-4: 24px;
	--bsz-maat-5: 40px;
	--bsz-maat-6: 64px;
}