@layer _ {
	:where(:root) {
		color-scheme: dark;

		--foreground-1: var(--gray-900);
		--foreground-2: var(--gray-800);
		--foreground-3: var(--zinc-600);
		--background-1: var(--gray-50);
		--accent-1: var(--purple-200);
		--accent-2: var(--purple-300);

		*::selection {
			background-color: var(--accent-1);
		}

		*::target-text {
			background-color: var(--accent-2);
		}

		.reverse {
			--foreground-1: var(--gray-50);
			--foreground-2: var(--gray-100);
			--foreground-3: var(--zinc-400);
			--background-1: var(--zinc-900);
		}

		svg [href*="#sun"] {
			display: none;
		}
	}
}