:root {
	/* Colors */
	--mn-color-primary: #0056b3;
	--mn-color-primary-hover: var(--mn-color-primary);
	--mn-color-secondary: #ff6900;
	--mn-color-text: #1a1a1a;
	--mn-color-text-muted: #6b7280;
	--mn-color-heading: #1a1a1a;
	--mn-color-background: #ffffff; /* Soft Gray */
	--mn-color-surface: #ffffff;
	--mn-color-border: #e5e7eb;
	--mn-color-surface-alt: #f8fafc;
	--mn-color-border-strong: #0a1e3f;
	--mn-color-header-bg: rgba(255, 255, 255, 0.95);
	--mn-header-fade: linear-gradient(to left, rgba(255, 255, 255, 1), transparent);

	/* Header v2 (Portal) nav bar */
	--mn-v2-nav-bg: var(--mn-color-primary);
	--mn-v2-nav-text: #ffffff;
	--mn-v2-nav-hover: rgba(255, 255, 255, 0.14);

	/* Typography */
	--mn-font-heading: 'Poppins', sans-serif;
	--mn-font-body: 'Inter', sans-serif;
	
	/* Font Sizes (fluid scale: smooth scaling between 360px and 1140px
	   viewports via clamp(); no stepped media queries needed) */
	--mn-text-2xs: clamp(0.625rem, 0.602rem + 0.11vw, 0.6875rem);
	--mn-text-xs: clamp(0.6875rem, 0.659rem + 0.13vw, 0.75rem);
	--mn-text-sm: clamp(0.8125rem, 0.784rem + 0.13vw, 0.875rem);
	--mn-text-base: clamp(0.9375rem, 0.909rem + 0.13vw, 1rem);
	--mn-text-lg: clamp(1.0625rem, 1.019rem + 0.21vw, 1.125rem);
	--mn-text-xl: clamp(1.125rem, 1.067rem + 0.26vw, 1.25rem);
	--mn-text-2xl: clamp(1.25rem, 1.134rem + 0.51vw, 1.5rem);
	--mn-text-3xl: clamp(1.5rem, 1.327rem + 0.77vw, 1.875rem);
	--mn-text-4xl: clamp(1.75rem, 1.519rem + 1.03vw, 2.25rem);
	--mn-text-5xl: clamp(2.25rem, 1.904rem + 1.54vw, 3rem);

	/* Spacing */
	--mn-space-1: 0.25rem;
	--mn-space-2: 0.5rem;
	--mn-space-3: 0.75rem;
	--mn-space-4: 1rem;
	--mn-space-5: 1.25rem;
	--mn-space-6: 1.5rem;
	--mn-space-8: 2rem;
	--mn-space-10: 2.5rem;
	--mn-space-12: 3rem;
	--mn-space-16: 4rem;

	/* Container */
	--mn-container-width: 1140px;
	--mn-container-padding: 1rem;
	
	/* Border Radius */
	--mn-radius-sm: 0.25rem;
	--mn-radius: 0.5rem;
	--mn-radius-lg: 1rem;
	
	/* Snapshot aliases for the hero color remapping (components/hero.css).
	   Declared at :root so they always mirror the raw theme tokens of the
	   active mode (light or dark). */
	--mn-src-color-primary: var(--mn-color-primary);
	--mn-src-color-primary-hover: var(--mn-color-primary-hover);
	--mn-src-color-heading: var(--mn-color-heading);

	/* Shadows */
	--mn-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--mn-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--mn-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

	/* Native UI color scheme (scrollbars, form controls) */
	color-scheme: light;
}

/*
 * Dark Mode
 * Activated by the early inline script (inc/setup/dark-mode.php) which sets
 * data-theme="dark" on <html> before the first paint.
 */
html[data-theme="dark"] {
	color-scheme: dark;

	/* Neutrals (Material-style dark palette based on #121212) */
	--mn-color-text: #f5f5f5;
	--mn-color-text-muted: #a3a3a3;
	--mn-color-heading: #f5f5f5;
	--mn-color-background: #121212;
	--mn-color-surface: #1e1e1e;
	--mn-color-border: #333333;
	--mn-color-surface-alt: #2a2a2a;
	--mn-color-border-strong: #454545;
	--mn-color-header-bg: rgba(18, 18, 18, 0.95);
	--mn-header-fade: linear-gradient(to left, rgba(18, 18, 18, 1), transparent);

	/* Header v2 nav bar: solid dark blue instead of the light primary tint
	   so white menu text keeps sufficient contrast in dark mode. */
	--mn-v2-nav-text: #f5f5f5;
	--mn-v2-nav-hover: rgba(255, 255, 255, 0.1);

	/* Shadows */
	--mn-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
	--mn-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
	--mn-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.45);
}