/**
 * Design tokens — FIT.nl "performance / amber".
 * Bron: design handoff README (canonieke tokens). Eén accent: amber.
 */
:root {
	/* Ink / dark surfaces */
	--ink-950: #0d0d0c;   /* hoofd-donker, tekst op amber */
	--ink-975: #0a0a09;   /* footer */
	--ink-900: #171614;   /* verhoogde donkere kaarten */
	--ink-850: #1c1b19;   /* image-placeholders op donker */
	--amber-tint-dark: #1a1611; /* uitgelichte donkere kaart */
	--line-dark: #2a2927;
	--line-dark-strong: #3a3936;
	--muted-dark: #5a5853;
	--text-dim: #77736b;
	--text-muted: #a8a39a;
	--text-soft: #cfc9bd;
	--text-soft-2: #dcd7cc;

	/* Paper / light surfaces */
	--paper: #f2f0eb;
	--paper-line: #d6d1c5;
	--paper-ink-2: #3d3a35;
	--paper-ink-3: #57534c;
	--white: #ffffff;

	/* Accent — reserveer gevulde amber voor de primaire actie */
	--amber: #f28a12;
	--amber-text-on-light: #b86400;
	--amber-wash: #fdf3e6;
	--amber-tint-light: #fdf3e6;
	--error: #d9573b;

	/* Semantisch (default: donkere brand-surface) */
	--bg: var(--ink-950);
	--fg: var(--paper);
	--fg-soft: var(--text-soft);
	--fg-muted: var(--text-muted);
	--line: var(--line-dark);

	/* Typografie */
	--font-display: 'Sofia Sans Extra Condensed', 'Arial Narrow', system-ui, sans-serif;
	--font-body: 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Spacing-schaal */
	--sp-1: 6px;   --sp-2: 8px;   --sp-3: 10px;  --sp-4: 12px;
	--sp-5: 14px;  --sp-6: 16px;  --sp-7: 20px;  --sp-8: 24px;
	--sp-9: 28px;  --sp-10: 32px; --sp-11: 40px; --sp-12: 48px;
	--sp-13: 56px; --sp-14: 64px; --sp-15: 72px;

	/* Layout */
	--container: 1344px;
	--gutter: max(48px, calc((100% - var(--container)) / 2));
	--section-y: 112px;
	--header-h: 80px;

	/* Vorm */
	--radius: 0px;                 /* hoekig/atletisch, overal 0 */
	--shadow-offset: 12px 12px 0 var(--amber);
	--shadow-float: 0 18px 50px rgba(0, 0, 0, .55);

	/* Beweging */
	--t-fast: .15s ease;
	--t-med: .3s ease;
	--ease-slide: cubic-bezier(.2, .8, .2, 1);
}

/* Lichte sectie: draai de semantische kleuren om. */
.surface-light {
	--bg: var(--paper);
	--fg: var(--ink-950);
	--fg-soft: var(--paper-ink-2);
	--fg-muted: var(--paper-ink-3);
	--line: var(--paper-line);
}

@media (max-width: 760px) {
	:root {
		--gutter: 20px;
		--section-y: 60px;
	}
}