@layer base, components, utilities, theme;

@import "./base.css";
@import "./components/button.css";
@import "./components/card.css";
@import "./components/checkbox.css";
@import "./components/content.css";
@import "./components/field.css";
@import "./components/footer.css";
@import "./components/form.css";
@import "./components/header.css";
@import "./components/input.css";
@import "./components/list.css";
@import "./components/modal.css";
@import "./components/navbar.css";
@import "./components/prose.css";
@import "./components/screen.css";
@import "./components/select.css";
@import "./components/toolbar.css";
@import "./components/textarea.css";

@view-transition {
	navigation: auto;
}

:root {
	color-scheme: light dark;

	--primary-hue: 260deg;

	/* Black */
	--color-black-900: hsla(0, 0%, 0%, 1);
	--color-black-800: hsla(0, 0%, 0%, 0.95);
	--color-black-700: hsla(0, 0%, 0%, 0.85);
	--color-black-600: hsla(0, 0%, 0%, 0.65);
	--color-black-500: hsla(0, 0%, 0%, 0.5);
	--color-black-400: hsla(0, 0%, 0%, 0.3);
	--color-black-300: hsla(0, 0%, 0%, 0.2);
	--color-black-200: hsla(0, 0%, 0%, 0.1);
	--color-black-100: hsla(0, 0%, 0%, 0.05);

	/* White */
	--color-white-900: hsla(0, 0%, 100%, 1);
	--color-white-800: hsla(0, 0%, 100%, 0.95);
	--color-white-700: hsla(0, 0%, 100%, 0.9);
	--color-white-600: hsla(0, 0%, 100%, 0.8);
	--color-white-500: hsla(0, 0%, 100%, 0.6);
	--color-white-400: hsla(0, 0%, 100%, 0.4);
	--color-white-300: hsla(0, 0%, 100%, 0.2);
	--color-white-200: hsla(0, 0%, 100%, 0.1);
	--color-white-100: hsla(0, 0%, 100%, 0.05);
}

@layer components {
	html {
		scroll-behavior: smooth;
		overscroll-behavior: none;
	}

	body {
		background-color: oklch(10% 0% 0deg);
		overscroll-behavior: contain;
	}
}