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

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

		*::selection {
			color: var(--gray-900);
			background-color: var(--accent-1);
		}
		
		*::target-text {
			color: var(--gray-900);
			background-color: var(--accent-2);
		}

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

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