// Default / Light Mode
@mixin light {
	color-scheme: light;

	--border-normal: #d3dae4;
	--border-normal-alt: #a2b5cd;
	--border-subdued: #f0f4f9;

	--foreground-normal: #4f5464; // Less contrast for improved hierarchy
	--foreground-normal-alt: #172940; // More contrast for titles and labels
	--foreground-subdued: #a2b5cd;
	--foreground-inverted: #fff;

	--background-normal: #f0f4f9;
	--background-normal-alt: #e4eaf1;
	--background-subdued: #f7fafc;
	--background-highlight: #f7f9fd;
	--background-page: #ffffff;
	--background-input: #ffffff;
	--background-page-rgb: 255, 255, 255;
	--background-inverted: #263238;

	--card-face-color: #fafcfd;
	--card-shadow-color: 23, 41, 64;
	--card-shadow: 0px 0px 6px 0px rgba(var(--card-shadow-color), 0.2);
	--overlay-color: rgba(38, 50, 56, 0.8);

	--module-background: #18222f;
	--module-background-alt: var(--background-normal);
	--module-icon: #8196b1;
	--module-icon-alt: var(--foreground-normal-alt);

	// Generate color variations
	@include generate-colors($color-mapping, $light-theme-tint, $light-theme-shade);

	--purple-alt: var(--purple-10);
	--blue-alt: var(--blue-10);
	--green-alt: var(--green-10);
	--yellow-alt: var(--yellow-10);
	--orange-alt: var(--orange-10);
	--red-alt: var(--red-10);
	--primary-alt: var(--purple-10);
	--secondary-alt: var(--pink-10);
	--success-alt: var(--green-10);
	--warning-alt: var(--yellow-10);
	--danger-alt: var(--red-10);

	.alt-colors {
		--background-subdued: var(--background-page);
	}
}
