/**
 * SeifAcademy design tokens.
 * Eén bron van waarheid voor thema, Elementor-pagina's en SeifAcademy Core (D2).
 * Alleen donker thema (PROJECT.md §3).
 */
:root {
	/* Merkkleuren */
	--sa-obsidian: #080808;
	--sa-graphite: #252525;
	--sa-gold: #d4a52e;
	--sa-gold-bright: #ffd76a;
	--sa-bronze: #80551b;
	--sa-ivory: #f7f1e2;

	/* Afgeleide vlakken */
	--sa-bg: var(--sa-obsidian);
	--sa-surface-1: #101010;
	--sa-surface-2: #161514;
	--sa-surface-3: #1d1c1a;
	--sa-line: rgba(212, 165, 46, 0.18);
	--sa-line-strong: rgba(212, 165, 46, 0.42);
	--sa-line-soft: rgba(247, 241, 226, 0.08);

	/* Tekst (contrast getoetst op #080808: ivory 17.6:1, muted 9.1:1, faint 5.0:1) */
	--sa-text: var(--sa-ivory);
	--sa-text-muted: #c9c1ae;
	--sa-text-faint: #8f887a;
	--sa-text-on-gold: #120d02;

	/* Status */
	--sa-success: #5fbf7f;
	--sa-warning: #e7b14a;
	--sa-danger: #e2675b;
	--sa-info: #7fb3d9;

	/* Verlopen */
	--sa-gradient-gold: linear-gradient(135deg, #ffd76a 0%, #d4a52e 45%, #80551b 100%);
	--sa-gradient-gold-soft: linear-gradient(135deg, rgba(255, 215, 106, 0.16), rgba(128, 85, 27, 0.06));
	--sa-gradient-text: linear-gradient(100deg, #fff1c4 0%, #ffd76a 30%, #d4a52e 65%, #b07a2a 100%);
	--sa-glow: 0 0 0 1px rgba(212, 165, 46, 0.25), 0 18px 60px -20px rgba(212, 165, 46, 0.35);

	/* Typografie */
	--sa-font-ar: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
	--sa-font-lat: "Inter", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sa-fs-xs: 0.8125rem;
	--sa-fs-sm: 0.9375rem;
	--sa-fs-base: 1.0625rem;
	--sa-fs-lg: 1.25rem;
	--sa-fs-xl: clamp(1.4rem, 1.15rem + 1vw, 1.75rem);
	--sa-fs-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
	--sa-fs-3xl: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
	--sa-fs-hero: clamp(2.4rem, 1.4rem + 4.6vw, 4.75rem);
	--sa-lh-tight: 1.25;
	--sa-lh-body: 1.85; /* Arabisch heeft meer regelhoogte nodig */

	/* Ruimte en vorm */
	--sa-space-1: 0.25rem;
	--sa-space-2: 0.5rem;
	--sa-space-3: 0.75rem;
	--sa-space-4: 1rem;
	--sa-space-5: 1.5rem;
	--sa-space-6: 2rem;
	--sa-space-7: 3rem;
	--sa-space-8: 4.5rem;
	--sa-space-9: clamp(4rem, 3rem + 5vw, 7.5rem);
	--sa-radius-sm: 8px;
	--sa-radius: 14px;
	--sa-radius-lg: 22px;
	--sa-radius-pill: 999px;
	--sa-container: 1200px;
	--sa-container-narrow: 820px;
	--sa-gutter: clamp(16px, 4vw, 32px);
	--sa-header-h: 76px;

	/* Beweging */
	--sa-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sa-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--sa-dur-fast: 160ms;
	--sa-dur: 320ms;
	--sa-dur-slow: 700ms;

	color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--sa-dur-fast: 0ms;
		--sa-dur: 0ms;
		--sa-dur-slow: 0ms;
	}
}