/*
 * Design tokens. --primary-blue / --dark-blue / --light-blue are overridden
 * inline by inc/customizer.php using the values saved on the Site Settings
 * admin page — change your brand there, not here. Everything else below is
 * derived from those three so the whole palette stays consistent.
 */

:root {
	/* Brand (defaults — overridden inline per-site) */
	--primary-blue: #2563eb;
	--primary-blue-dark: #1d4ed8;
	--primary-blue-light: #60a5fa;
	--dark-blue: #0b1533;
	--dark-blue-alt: #10193a;
	--light-blue: #eaf1ff;

	/* Neutrals */
	--background: #ffffff;
	--surface: #f7f9fd;
	--text: #0f172a;
	--muted-text: #5b6478;
	--border: #e2e8f0;
	--white: #ffffff;

	/* Feedback */
	--success: #16a34a;
	--warning: #d97706;

	/* Radius */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;
	--radius-xl: 32px;
	--radius-pill: 999px;

	/* Shadow */
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
	--shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
	--shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
	--shadow-glow: 0 12px 32px -8px rgba(37, 99, 235, 0.35);

	/* Type — system font stack by default: zero network requests, native
	   rendering on every OS, no layout shift. See docs/PERFORMANCE.md for
	   how to swap in self-hosted Inter/Sora if you want a custom typeface. */
	--font-heading: -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
	--font-body: -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;

	/* Layout */
	--container-width: 1240px;
	--container-padding: 24px;
	--section-padding-y: 96px;
	--header-height: 80px;

	/* Motion */
	--transition-fast: 160ms ease;
	--transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 782px) {
	:root {
		--section-padding-y: 56px;
		--header-height: 68px;
	}
}