:root {
	/* Header & navy blues */
	--color-primary: #1e3a5f;
	--color-primary-hover: #274a73;
	--color-primary-dark: #152238;

	/* Accent & interactive blue */
	--color-brand: #3b82f6;
	--color-brand-hover: #2563eb;
	--color-brand-soft: #dbeafe;
	--color-accent: #3b82f6;
	--color-accent-hover: #2563eb;

	/* Surfaces */
	--color-bg: #ffffff;
	--color-bg-muted: #f8fafc;
	--color-bg-subtle: #f1f5f9;
	--color-border: #e2e8f0;

	/* Text */
	--color-text: #1e293b;
	--color-text-muted: #475569;
	--color-text-light: #94a3b8;

	/* Semantic */
	--color-sale: #d51e0b;
	--color-price: #d51e0b;
	--color-badge: #6e2594;
	--color-section-bg: #f2f4f8;
	--color-success: #047857;

	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-full: 9999px;
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--shadow-md: 0 4px 16px rgba(15, 23, 42, 0.1);
	--shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
	--shadow-nav: 0 5px 5px rgba(15, 23, 42, 0.06), 0 10px 20px rgba(15, 23, 42, 0.08);
	--container-side: clamp(12px, 1.5vw, 28px);
	--container-max: min(1920px, 100vw);
	--header-height: 72px;
	--nav-height: 52px;
	--banner-ratio: 982 / 500;
	--banner-max-height: 500px;
	--banner-radius: 10px;
	--banner-dot-active: #ef4a23;
}

@media (min-width: 1400px) {
	:root {
		--container-side: clamp(16px, 1.75vw, 32px);
	}
}

@media (min-width: 1920px) {
	:root {
		--container-side: 24px;
		--container-max: 1920px;
	}
}

@media (max-width: 991px) {
	:root {
		--header-height: 108px;
		--container-side: 14px;
	}
}

@media (max-width: 575px) {
	:root {
		--header-height: 108px;
	}
}