:root {
	/* Colors - Primary */
	--color-primary: #003143;
	--color-primary-dark-1: #00293a;
	--color-primary-dark-2: #001e2d;
	--color-primary-light-1: #1a5c73;
	--color-primary-light-2: #4a7a85;
	--color-primary-light-3: #5a7a8a;
	--color-primary-light-4: #5a8a95;

	/* Colors - Secondary & Accent */
	--color-secondary: #82a7af;
	--color-accent: #96f381;
	--color-accent-hover: #7be166;

	/* Colors - Surface */
	--color-surface-white: #ffffff;
	--color-surface-1: #fcfdfe;
	--color-surface-2: #f5f8fa;
	--color-surface-3: #f0f7f8;
	--color-surface-4: #eef6fa;
	--color-surface-5: #ecf4f9;
	--color-surface-medium-1: #e4edf2;
	--color-surface-medium-2: #d0e6ef;

	/* Semantic Text Colors */
	--color-text-subtitle: #82a7af;
	--color-text-body-muted: #5a7a8a;
	--color-hero-accent: #5a8a95;

	/* Colors - Neutral */
	--color-neutral-light: #d9d9d9;
	--color-neutral-dark: #8aa0ac;

	/* Colors - Dark Sections Variant */
	--color-dark-bg: #001e2d;

	/* Typography - Font Families */
	--font-heading: 'Rubik', sans-serif;
	--font-body: 'Open Sans', sans-serif;

	/* Typography - Scale (Desktop) */
	--font-size-h1: 4.5rem; /* 72px */
	--font-size-h2: 3rem; /* 48px */
	--font-size-h3: 2.5rem; /* 40px */
	--font-size-h4: 2.25rem; /* 36px */
	--font-size-h5: 2rem; /* 32px */
	--font-size-h6: 1.75rem; /* 28px */
	--font-size-body-xl: 1.5rem; /* 24px */
	--font-size-body-lg: 1.375rem; /* 22px */
	--font-size-body-md: 1.125rem; /* 18px */
	--font-size-body-sm: 1.0625rem; /* 17px */
	--font-size-body-ms: 0.9375rem; /* 15px */
	--font-size-body-xs: 0.875rem; /* 14px */
	--font-size-body-xxs: 0.75rem; /* 12px */

	/* Spacing System */
	--spacing-1: 0.25rem; /* 4px */
	--spacing-2: 0.5rem; /* 8px */
	--spacing-3: 0.75rem; /* 12px */
	--spacing-4: 1rem; /* 16px */
	--spacing-5: 1.5rem; /* 24px */
	--spacing-6: 2rem; /* 32px */
	--spacing-8: 3rem; /* 48px */
	--spacing-10: 4rem; /* 64px */
	--spacing-12: 5rem; /* 80px */
	--spacing-16: 6rem; /* 96px */
	--spacing-20: 8rem; /* 128px */

	/* Layout */
	--container-max-width: 1231px;
	--container-padding: 1.5rem;
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 16px;
	--border-radius-xl: 24px;
	--border-radius-full: 9999px;
	
	/* Shadows - Depth & Flat */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
	--shadow-md: 0 8px 16px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.03);
	--shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
	--shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.05);
	--shadow-inset-btn: inset 0 -3px 0 rgba(0, 0, 0, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.2);
	--shadow-inset-input: inset 0 2px 4px rgba(0, 0, 0, 0.04);
	--shadow-glass: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);

	/* Transitions */
	--transition-fast: 150ms ease-in-out;
	--transition-normal: 250ms ease-in-out;
	--transition-slow: 350ms ease-in-out;
}

/* Tablet Scale adjustments */
@media (max-width: 1199px) {
	:root {
		--font-size-h1: 3.5rem; /* 56px */
		--font-size-h2: 2.5rem; /* 40px */
		--font-size-h3: 2rem; /* 32px */
	}
}

/* Mobile Scale adjustments */
@media (max-width: 767px) {
	:root {
		--font-size-h1: 2.5rem; /* 40px */
		--font-size-h2: 2rem; /* 32px */
		--font-size-h3: 1.75rem; /* 28px */
		--font-size-h4: 1.5rem; /* 24px */
		--spacing-16: 4rem; /* 64px */
		--spacing-20: 5rem; /* 80px */
	}
}