:root {
	/* Colors — sampled visually from Figma (Dev Mode unavailable), tune here */
	--color-navy: #14171F;
	--color-black: #151515;
	--color-teal: #0AB9AC;
	--color-teal-light: #4FD6C4;
	--color-teal-rgb: 23, 163, 152;
	--color-white: #FFFFFF;
	--color-light-bg: #E6EAF0;
	--color-card-border: #E5E7EB;
	--color-charcoal: #232529;
	--color-mint-panel: #E7F8F7;
	--color-badge-purple: #800080;
	--color-text-dark: #151515;
	--color-text-muted: #6B7280;
	--color-text-muted-on-dark: #9CA3AF;

	/* Typography */
	--font-family-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* Radii */
	--radius-sm: 6px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-full: 999px;

	/* Layout — --container-pad matches .site-header__inner's own padding-inline
	   (layout.css) so section content lines up with the header instead of
	   running narrower at in-between viewport widths. */
	--container-max: 1344px;
	--container-pad: var(--space-4);

	/* Breakpoints (reference only, used inside media queries below) */
	--bp-xl: 1280px;
	--bp-lg: 1024px;
	--bp-md: 768px;
	--bp-sm: 480px;

	/* Motion */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}