/* ==========================================================================
   Wolters Kassenbouw — design tokens
   Everything derives from the logo cube: flat colour, hard edges, structural
   geometry. Do not add values here that could not sit next to that cube.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   Source Sans 3 — SUBSTITUTION for the humanist grotesque in the wordmark.
   IBM Plex Mono — technical / numeric data. No vendor binaries were supplied;
   drop them in /fonts and swap the @import if Wolters licenses the real face.
   -------------------------------------------------------------------------- */
/* Loaded with <link> tags in templates/header.php, so the stylesheet is not
   blocked on a CSS @import round-trip. */

:root {
	/* ---- Brand primitives (sampled from the logo cube) ---- */
	--wk-green-50: #eaf7ef;  --wk-green-100: #c9ecd6; --wk-green-200: #94dab1; --wk-green-300: #55c489; --wk-green-400: #1fae67;
	--wk-green-500: #009846; --wk-green-600: #007f3a; --wk-green-700: #00662e; --wk-green-800: #004d23; --wk-green-900: #0b3319;
	--wk-blue-50: #e6f6fd;   --wk-blue-100: #c0e9fa;  --wk-blue-200: #85d4f4;  --wk-blue-300: #45bdee;  --wk-blue-400: #12abe8;
	--wk-blue-500: #00a0e3;  --wk-blue-600: #0083ba;  --wk-blue-700: #006692;  --wk-blue-800: #004b6c;  --wk-blue-900: #05334a;
	--wk-red-50: #fdecec;    --wk-red-100: #fbd0d1;   --wk-red-200: #f5a2a4;   --wk-red-300: #ef6e72;   --wk-red-400: #e93f45;
	--wk-red-500: #e31e24;   --wk-red-600: #bd171d;   --wk-red-700: #971216;   --wk-red-800: #700d10;   --wk-red-900: #4a0a0c;
	/* Amber: system addition — the mark has no warning colour. */
	--wk-amber-50: #fef6e7;  --wk-amber-100: #fce6bb; --wk-amber-200: #f8cd77; --wk-amber-300: #f4b436; --wk-amber-400: #f2a10d;
	--wk-amber-500: #d98a05; --wk-amber-600: #ad6d04; --wk-amber-700: #805003; --wk-amber-800: #553502; --wk-amber-900: #2e1c01;

	/* ---- Neutrals: cool galvanised-steel greys, never warm beige ---- */
	--wk-neutral-0: #ffffff;   --wk-neutral-25: #f7f9fa;  --wk-neutral-50: #eef1f3;  --wk-neutral-100: #e2e7ea;
	--wk-neutral-200: #cbd3d8; --wk-neutral-300: #adb8bf; --wk-neutral-400: #8895a0; --wk-neutral-500: #67747f;
	--wk-neutral-600: #4c5862; --wk-neutral-700: #37424a; --wk-neutral-800: #232c33; --wk-neutral-900: #14191d;
	--wk-neutral-1000: #0a0d10;

	/* ---- Semantic: brand roles ---- */
	--color-brand: var(--wk-green-500);
	--color-brand-hover: var(--wk-green-600);
	--color-brand-active: var(--wk-green-700);
	--color-brand-soft: var(--wk-green-50);
	--color-glass: var(--wk-blue-500);			/* glas / Kasschade app */
	--color-glass-hover: var(--wk-blue-600);
	--color-glass-soft: var(--wk-blue-50);
	--color-signal: var(--wk-red-500);			/* schade, urgentie */
	--color-signal-hover: var(--wk-red-600);
	--color-signal-soft: var(--wk-red-50);

	/* ---- Semantic: text ---- */
	--text-strong: var(--wk-neutral-900);
	--text-body: var(--wk-neutral-700);
	--text-muted: var(--wk-neutral-500);
	--text-faint: var(--wk-neutral-400);
	--text-inverse: var(--wk-neutral-0);
	--text-inverse-muted: rgba(255, 255, 255, .72);
	--text-brand: var(--wk-green-600);
	--text-link: var(--wk-green-600);
	--text-link-hover: var(--wk-green-700);

	/* ---- Semantic: surfaces. Max two background tones per view ---- */
	--surface-page: var(--wk-neutral-0);
	--surface-subtle: var(--wk-neutral-25);
	--surface-inset: var(--wk-neutral-50);
	--surface-card: var(--wk-neutral-0);
	--surface-dark: var(--wk-neutral-900);
	--surface-dark-raised: var(--wk-neutral-800);
	--surface-brand: var(--wk-green-500);
	--surface-glass: var(--wk-blue-500);
	--surface-overlay: rgba(10, 13, 16, .62);

	/* ---- Semantic: borders ---- */
	--border-subtle: var(--wk-neutral-100);
	--border-default: var(--wk-neutral-200);
	--border-strong: var(--wk-neutral-300);
	--border-inverse: rgba(255, 255, 255, .16);
	--border-focus: var(--wk-blue-500);

	/* ---- Semantic: status ---- */
	--status-success: var(--wk-green-500); --status-success-soft: var(--wk-green-50); --status-success-text: var(--wk-green-700);
	--status-info: var(--wk-blue-500);     --status-info-soft: var(--wk-blue-50);     --status-info-text: var(--wk-blue-700);
	--status-danger: var(--wk-red-500);    --status-danger-soft: var(--wk-red-50);    --status-danger-text: var(--wk-red-700);
	--status-warning: var(--wk-amber-400); --status-warning-soft: var(--wk-amber-50); --status-warning-text: var(--wk-amber-700);

	/* ---- Focus. Always blue, never green — it must not read as "selected" ---- */
	--focus-ring: 0 0 0 3px rgba(0, 160, 227, .35);

	/* ---- Typography ---- */
	--font-sans: "Source Sans 3", "Segoe UI", Frutiger, "Helvetica Neue", Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 20px;
	--text-xl: 24px; --text-2xl: 30px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 60px; --text-6xl: 72px;

	--leading-tight: 1.08; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65;

	--weight-light: 300; --weight-regular: 400; --weight-medium: 500;
	--weight-semibold: 600; --weight-bold: 700; --weight-black: 900;

	--tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-eyebrow: 0.14em;

	--type-display: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-sans);
	--type-h1: var(--weight-bold) var(--text-3xl)/var(--leading-snug) var(--font-sans);
	--type-h2: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
	--type-h3: var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-sans);
	--type-body: var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
	--type-body-lg: var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-sans);
	--type-small: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
	--type-label: var(--weight-semibold) var(--text-sm)/var(--leading-normal) var(--font-sans);
	--type-eyebrow: var(--weight-bold) var(--text-xs)/var(--leading-normal) var(--font-sans);
	--type-mono: var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-mono);

	/* ---- Spacing ---- */
	--space-0: 0;     --space-1: 2px;   --space-2: 4px;   --space-3: 6px;   --space-4: 8px;
	--space-5: 12px;  --space-6: 16px;  --space-7: 20px;  --space-8: 24px;  --space-9: 32px;
	--space-10: 40px; --space-11: 48px; --space-12: 64px; --space-13: 80px; --space-14: 96px; --space-15: 128px;

	--gap-inline: var(--space-4);
	--gap-stack: var(--space-6);
	--pad-card: var(--space-8);
	--pad-section: var(--space-14);
	--pad-control-x: var(--space-6);
	--pad-control-y: var(--space-5);

	/* ---- Radii. Greenhouse framing is straight aluminium; radii stay tight ---- */
	--radius-none: 0; --radius-xs: 2px; --radius-sm: 3px; --radius-md: 6px;
	--radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px;
	--radius-control: var(--radius-sm);
	--radius-card: var(--radius-md);
	--radius-media: var(--radius-md);
	--radius-dialog: var(--radius-lg);
	--border-width-hairline: 1px; --border-width-thick: 2px; --border-width-accent: 4px;

	/* ---- Elevation. Cool-tinted, low-spread. Shadow means "lifted" ---- */
	--shadow-none: none;
	--shadow-xs: 0 1px 2px rgba(20, 25, 29, .06);
	--shadow-sm: 0 1px 3px rgba(20, 25, 29, .08), 0 1px 2px rgba(20, 25, 29, .04);
	--shadow-md: 0 4px 10px rgba(20, 25, 29, .09), 0 1px 3px rgba(20, 25, 29, .05);
	--shadow-lg: 0 12px 28px rgba(20, 25, 29, .13), 0 2px 6px rgba(20, 25, 29, .06);
	--shadow-xl: 0 24px 56px rgba(20, 25, 29, .18);
	--shadow-inset: inset 0 1px 2px rgba(20, 25, 29, .07);

	/* ---- Scrims. The only gradients in the system ---- */
	--scrim-bottom: linear-gradient(to top, rgba(10, 13, 16, .86) 0%, rgba(10, 13, 16, .55) 45%, rgba(10, 13, 16, 0) 100%);
	--scrim-flat: rgba(10, 13, 16, .5);
	--scrim-hero: linear-gradient(to top, rgba(10, 13, 16, .82) 0%, rgba(10, 13, 16, .58) 40%, rgba(10, 13, 16, .28) 72%, rgba(10, 13, 16, .06) 100%);
	--scrim-left: linear-gradient(to right, rgba(10, 13, 16, .52) 0%, rgba(10, 13, 16, .24) 52%, rgba(10, 13, 16, 0) 82%);

	/* ---- Motion. Quick start, calm settle. No bounce, no spring ---- */
	--duration-instant: 80ms;
	--duration-fast: 140ms;
	--duration-base: 220ms;
	--duration-slow: 360ms;
	--ease-standard: cubic-bezier(.2, 0, .2, 1);
	--ease-out: cubic-bezier(0, 0, .2, 1);
	--ease-in: cubic-bezier(.4, 0, 1, 1);
	--transition-control: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
	--transition-lift: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);

	--anim-rise: wk-rise-in var(--duration-slow) var(--ease-out) both;
	--anim-fade: wk-fade-in var(--duration-slow) var(--ease-out) both;
	--anim-wipe: wk-wipe-in 520ms var(--ease-out) both;
	--anim-drift: wk-drift 9000ms linear both;
	--stagger-step: 70ms;

	/* ---- Layout. Two breakpoints only: 640px phone, 900px tablet ---- */
	--bp-sm: 640px;
	--bp-md: 900px;
	--container-max: 1200px;
	--container-narrow: 760px;
	--gutter: 24px;
	--gutter-lg: 40px;
	--header-height: 76px;
	--z-base: 0;
	--z-sticky: 100;
	--z-header: 200;
	--z-overlay: 800;
	--z-dialog: 900;
	--z-tooltip: 1000;
}

@media only screen and (max-width: 768px) {
	:root {
		--gutter: 16px;
		--header-height: 64px;
		--pad-section: var(--space-11);
	}
}

/* --------------------------------------------------------------------------
   Four keyframes only. Fades and short translations — no bounce, no overshoot.
   -------------------------------------------------------------------------- */
@keyframes wk-rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wk-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wk-wipe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Slow photographic drift on the active hero slide — 4% to 10% over 9s, never more. */
@keyframes wk-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.10) translate3d(-1.2%, -0.8%, 0); } }

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-instant: 0ms;
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--duration-slow: 0ms;
	}
	@keyframes wk-rise-in { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
	@keyframes wk-wipe-in { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 0); } }
	@keyframes wk-drift { from { transform: none; } to { transform: none; } }
}