/**
 * Design tokens — canonical (Fase 3)
 * Semantiek: navy = merk/structuur, rood = primaire actie.
 */

:root {
	/* Brand */
	--color-brand: #163b6d;
	--color-brand-dark: #0f2747;
	--color-brand-soft: #e8eef6;
	--color-accent: #d62828;
	--color-accent-hover: #b71f1f;

	/* Surfaces & text */
	--color-surface: #ffffff;
	--color-surface-soft: #f4f8fc;
	--color-surface-dark: #0f1419;
	--color-text: #1f2937;
	--color-text-muted: #6b7280;
	--color-text-on-dark: #ffffff;
	--color-border: #e5e7eb;

	/* Feedback */
	--color-success: #0d9488;
	--color-warning: #d97706;
	--color-error: #b91c1c;

	/**
	 * Aliassen (bestaande componenten)
	 * --color-primary = navy (nooit rood)
	 */
	--color-primary: var(--color-brand);
	--color-primary-dark: var(--color-brand-dark);
	--color-background: var(--color-surface);
	--color-background-alt: var(--color-surface-soft);
	--color-text-light: var(--color-text-muted);

	/* Typography */
	--font-heading: "Manrope", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;

	--text-display: clamp(2.25rem, 4vw, 3rem);
	--text-h1: clamp(2rem, 3.5vw, 2.75rem);
	--text-h2: clamp(1.75rem, 3vw, 2.25rem);
	--text-h3: 1.375rem;
	--text-h4: 1.125rem;
	--text-lead: 1.125rem;
	--text-body: 1rem;
	--text-small: 0.8125rem;
	--text-label: 0.75rem;
	--text-breadcrumb: 0.9375rem;

	--text-xs: var(--text-small);
	--text-sm: var(--text-breadcrumb);
	--text-base: var(--text-body);
	--text-lg: var(--text-lead);
	--text-xl: var(--text-h4);
	--text-2xl: var(--text-h3);
	--text-3xl: var(--text-h2);
	--text-4xl: var(--text-h1);

	--leading-tight: 1.2;
	--leading-heading: 1.25;
	--leading-body: 1.6;
	--tracking-tight: -0.02em;

	--measure-narrow: 42rem;
	--measure-default: 48rem;
	--measure-wide: 64rem;

	/* Spacing scale (4px base) */
	--space-1: 0.25rem; /* 4 */
	--space-2: 0.5rem; /* 8 */
	--space-3: 0.75rem; /* 12 */
	--space-4: 1rem; /* 16 */
	--space-5: 1.5rem; /* 24 */
	--space-6: 2rem; /* 32 */
	--space-7: 3rem; /* 48 */
	--space-8: 4rem; /* 64 */
	--space-9: 6rem; /* 96 */
	--space-10: 8rem; /* 128 */

	/* Containers */
	--container-narrow: 720px;
	--container-default: 960px;
	--container-wide: 1280px;

	--container-sm: var(--container-narrow);
	--container-md: var(--container-default);
	--container-lg: var(--container-wide);
	--container-xl: 1440px;

	--container-pad: var(--space-5);
	--container-pad-sm: var(--space-4);

	/* Section vertical rhythm */
	--section-space-compact: var(--space-7);
	--section-space: var(--space-8);
	--section-space-spacious: var(--space-9);

	--section-space-sm: var(--section-space-compact);
	--section-space-lg: var(--section-space-spacious);
	--section-space-xl: var(--section-space-spacious);

	/* Radius */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 999px;
	--border-radius: var(--radius-lg);

	/* Shadows */
	--shadow-subtle: 0 1px 2px rgba(15, 39, 71, 0.06);
	--shadow-soft: 0 8px 28px rgba(15, 39, 71, 0.06);
	--shadow-card: 0 12px 36px rgba(15, 39, 71, 0.08);
	--shadow-elevated: 0 16px 48px rgba(15, 39, 71, 0.1);
	--shadow-header: var(--shadow-subtle);
	--shadow-header-scrolled: var(--shadow-soft);

	/* Motion */
	--duration-fast: 150ms;
	--duration-default: 200ms;
	--ease-default: ease;
	--transition: var(--duration-default) var(--ease-default);
	--transition-header: 280ms var(--ease-default);

	/* Header */
	--site-header-h: 96px;
	--site-header-h-compact: 72px;
	--site-logo-h: 58px;
	--site-logo-h-compact: 44px;
	--z-header: 1000;
	--z-dropdown: 1010;

	/* Buttons */
	--btn-height: 48px;
	--btn-height-sm: 42px;
	--btn-height-lg: 52px;
	--btn-font-size: var(--text-sm);
	--btn-font-weight: 600;

	--grid-gap: var(--space-6);
	--bp-nav: 968px;
	--bp-split: 900px;
}

@media (max-width: 768px) {
	:root {
		--container-pad: var(--container-pad-sm);
		--section-space-compact: var(--space-6);
		--section-space: var(--space-7);
		--section-space-spacious: var(--space-8);
		--site-header-h: 64px;
		--site-header-h-compact: 56px;
		--site-logo-h: 40px;
		--site-logo-h-compact: 34px;
	}
}