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


@layer base {
	@font-face {
		font-family: 'Karrik';
		src: url('/fonts/Karrik.woff2');
	}

	@font-face {
		font-family: 'Fira Code';
		src: url('/fonts/FiraCode.woff2');
	}

	:root {
		--gradient: linear-gradient(to top left, hsl(258 85% 67%), hsl(258 60% 40%));

		--background: 255 14.81% 10.59%;
		--foreground: 284 4.7% 97.05%;

		--muted: 258 15% 17%;
		--muted-foreground: 284 4.7% 54.1%;

		--popover: 256.36 14.29% 15.1%;
		--popover-foreground: 284 4.7% 97.05%;

		--card: 256.36 14.29% 15.1%;
		--card-foreground: 284 4.7% 97.05%;

		--border: 258 15% 17%;
		--input: 258 15% 17%;

		--primary: 258 85% 67%;
		--primary-foreground: 284 4.7% 97.05%;

		--secondary: 258 60% 40%;
		--secondary-foreground: 284 4.7% 97.05%;

		--accent: 258 60% 40%;
		--accent-foreground: 284 4.7% 97.05%;

		--destructive: 7 100% 67%;
		--destructive-foreground: 284 4.7% 97.05%;

		--ring: 258 85% 67%;

		--radius: 0.5rem;
	}
}

@layer base {
	* {
		@apply border-border;
	}

	body {
		@apply bg-background text-foreground;
	}

	::selection {
		background-color: hsl(var(--primary));
		color: hsl(var(--primary-foreground));
	}

	::-webkit-scrollbar {
		@apply w-2;
		@apply h-2;
	}

	::-webkit-scrollbar-track {
		@apply !bg-muted;
	}

	::-webkit-scrollbar-thumb {
		@apply rounded-sm !bg-muted-foreground/30;
	}

	/* Firefox */
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
	html {
		scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
	}

	.hide-scrollbar::-webkit-scrollbar {
		display: none;
	}

	.hide-scrollbar {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.antialised {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

@layer components {
	.bg-gradient {
		background: var(--gradient);
	}
}