/* =========================
   Light theme foundation background
   ========================= */

html:not([data-theme="dark"]) {
	color-scheme: light;

	--nd-light-bg: #f6fafc;
	--nd-light-bg-deep: #eef5f8;
	--nd-light-grid: rgba(23, 48, 66, 0.06);
	--nd-light-grid-2: rgba(23, 48, 66, 0.05);
	--nd-light-dot: rgba(23, 48, 66, 0.12);
	--nd-light-cyan: rgba(19, 191, 233, 0.10);
	--nd-light-cyan-strong: rgba(19, 191, 233, 0.14);
	--nd-light-glow: rgba(19, 191, 233, 0.06);
	--nd-light-glow-soft: rgba(17, 65, 93, 0.05);
}

html:not([data-theme="dark"]) body {
	background-color: var(--nd-light-bg);
	background-image:
		radial-gradient(circle at 12% 14%, var(--nd-light-glow) 0, transparent 22%),
		radial-gradient(circle at 86% 12%, var(--nd-light-glow-soft) 0, transparent 20%),
		linear-gradient(126deg, transparent 0%, rgba(19, 191, 233, 0.035) 34%, transparent 57%),
		linear-gradient(154deg, transparent 0%, rgba(255, 255, 255, 0.55) 18%, transparent 34%),
		linear-gradient(var(--nd-light-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--nd-light-grid-2) 1px, transparent 1px),
		radial-gradient(circle at 22% 68%, var(--nd-light-dot) 0 1px, transparent 2px),
		radial-gradient(circle at 74% 58%, var(--nd-light-cyan-strong) 0 1px, transparent 2px),
		linear-gradient(180deg, #fbfdff 0%, var(--nd-light-bg) 46%, var(--nd-light-bg-deep) 100%);
	background-size:
		auto,
		auto,
		auto,
		auto,
		118px 118px,
		118px 118px,
		320px 320px,
		360px 360px,
		auto;
	background-attachment: fixed;
}

/* Mobile: проще и легче */
@media (max-width: 991.98px), (hover: none) and (pointer: coarse) {
	html:not([data-theme="dark"]) body {
		background-image:
			radial-gradient(circle at 18% 14%, rgba(19, 191, 233, 0.08) 0, transparent 24%),
			radial-gradient(circle at 82% 18%, rgba(17, 65, 93, 0.05) 0, transparent 22%),
			linear-gradient(rgba(23, 48, 66, 0.045) 1px, transparent 1px),
			linear-gradient(90deg, rgba(23, 48, 66, 0.04) 1px, transparent 1px),
			radial-gradient(circle at 20% 72%, rgba(23, 48, 66, 0.09) 0 1px, transparent 2px),
			radial-gradient(circle at 78% 62%, rgba(19, 191, 233, 0.10) 0 1px, transparent 2px),
			linear-gradient(180deg, #fbfdff 0%, #f6fafc 58%, #eef5f8 100%);
		background-size:
			auto,
			auto,
			96px 96px,
			96px 96px,
			240px 240px,
			280px 280px,
			auto;
		background-attachment: scroll;
	}
}