@tailwind base;
@tailwind components;
@tailwind utilities;

@import url(@fontsource/lexend/400.css);
@import url(@fontsource/lexend/500.css);
@import url(@fontsource/azeret-mono/600.css);

:root {
	--font-body: "Lexend", system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
		"Helvetica Neue", sans-serif;
	--font-display: "Azeret Mono", var(--font-body);
	--transition: linear(
		0,
		0.006,
		0.025 2.8%,
		0.101 6.1%,
		0.539 18.9%,
		0.721 25.3%,
		0.849 31.5%,
		0.937 38.1%,
		0.968 41.8%,
		0.991 45.7%,
		1.006 50.1%,
		1.015 55%,
		1.017 63.9%,
		1.001
	);
}

@mixin light {
	--accent-bg: hsl(303, 73%, 81%);
	--accent-fg: hsl(0, 0, 10%);
	--bg: hsl(0, 0%, 100%);
	--bg-transparent: hsla(0, 0%, 100%, 0.6);
	--fg: hsl(0, 0%, 10%);
	--fg-muted: hsl(0, 0%, 50%);
	--fg-muted-alt: hsl(0, 0%, 75%);
	--fg-highlight: hsl(303, 61%, 47%);
	--fg-failure: hsl(0, 67%, 49%);
}

@mixin dark {
	--accent-bg: hsl(304, 41%, 21%);
	--accent-fg: hsl(303, 73%, 81%);
	--bg: hsl(0, 0%, 8%);
	--bg-transparent: hsla(0, 0%, 8%, 0.8);
	--fg: hsl(0, 0%, 90%);
	--fg-muted: hsl(0, 0%, 50%);
	--fg-muted-alt: hsl(0, 0%, 25%);
	--fg-highlight: hsl(303, 64%, 65%);
	--fg-failure: hsl(0, 67%, 80%);
}

@media (prefers-color-scheme: dark) {
	body {
		@include dark;
	}
}

@media (prefers-color-scheme: light) {
	body {
		@include light;
	}
}

body.light {
	@include light;
}

body.dark {
	@include dark;
}

body {
	@apply text-foreground bg-background font-body overflow-x-hidden;
	width: 100vw;
}

@layer components {
	select {
		@apply appearance-none;
	}

	.btn {
		@apply font-display flex items-center justify-center overflow-hidden relative cursor-pointer px-4 border-2 border-solid bg-background border-foreground-muted-alt rounded-xl p-2 focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none;
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			background-color 0.2s ease;
	}

	.btn-highlight {
		@apply bg-accent-background text-accent-foreground border-accent-background;
	}
}
