@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
	html {
		color-scheme: light;
	}

	html.dark {
		color-scheme: dark;
	}

	.dark input:not([type='checkbox']):not([type='radio']),
	.dark textarea,
	.dark select {
		background-color: var(--color-slate-900);
		color: var(--color-slate-100);
		border-color: var(--color-slate-700);
	}

	body {
		background-color: var(--color-slate-50);
		color: var(--color-slate-900);
		font-family:
			ui-sans-serif,
			system-ui,
			-apple-system,
			'Segoe UI',
			Roboto,
			'Helvetica Neue',
			Arial,
			sans-serif;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	html.dark body {
		background-color: var(--color-slate-950);
		color: var(--color-slate-100);
	}
}