:where(:root) {
	color-scheme: dark;

	--palette-hue: 270;
	--palette-hue-rotate-by: -5;
	--palette-chroma: 0.1;

	--link: oklch(90% 80% var(--palette-hue));
	--link-visited: oklch(90% 80% calc(var(--palette-hue) * 1.2));

	--surface-1: var(--color-11);
	--surface-2: var(--color-12);
	--surface-3: var(--color-13);
	--surface-document: var(--color-14);
	--well-1: var(--color-15);
	--well-2: var(--color-16);
	--text-1: var(--color-1);
	--text-2: var(--color-5);

	--scrollthumb-color: var(--text-2);

	& :where(dialog) {
		background-color: var(--surface-2);
	}

	& :where(button, .btn) {
		--_highlight: var(--_highlight-dark);
		--_bg: var(--_bg-dark);
		--_ink-shadow: var(--_ink-shadow-dark);

		&:where([type='reset']) {
			--_text: var(--red-2);
			--_border: var(--surface-3);
		}
	}

	/* &
		:where(
			button,
			.btn,
			input:is([type='button'], [type='submit'], [type='reset'])
		)[disabled] {
		--_text: var(--gray-5);
	} */

	/* &
		:where(
			textarea,
			select,
			input:not([type='button'], [type='submit'], [type='reset'])
		) {
		background-color: hsl(210deg 11% 10%);
	} */

	& :where([type='submit']),
	& :where(form button:not([type='button'])),
	& :where([type='reset']),
	& :where([disabled]) {
		--_bg: var(--surface-1);
	}
}