@import '../../media-queries.css';

:where([data-theme='light'], .light, .light-theme) {
	color-scheme: light;

	--link: var(--indigo-7);
	--link-visited: var(--purple-7);

	--text-1: var(--gray-12);
	--text-2: var(--gray-7);

	--surface-1: var(--gray-0);
	--surface-2: var(--gray-2);
	--surface-3: var(--gray-3);
	--surface-4: var(--gray-4);

	--scrollthumb-color: var(--gray-7);
	--shadow-color: 220 3% 15%;
	--shadow-strength: 1%;

	@media (--HDcolor) {
		@supports (color: color(display-p3 0 0 0)) {
			--link: color(display-p3 0.1 0.4 1);
			--link-visited: color(display-p3 0.6 0.2 1);
		}
	}

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

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

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

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

	&
		:where(
			textarea,
			select,
			input:not([type='button'], [type='submit'], [type='reset'])
		) {
		background-color: var(--surface-2);
	}
}