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

@layer base {
	html {
		-webkit-tap-highlight-color: transparent;
	}

	body {
		@apply antialiased;
	}

	::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	::-webkit-scrollbar-track {
		@apply bg-zinc-800;
	}

	::-webkit-scrollbar-thumb {
		@apply bg-zinc-600 rounded-full;
	}

	::-webkit-scrollbar-thumb:hover {
		@apply bg-zinc-500;
	}
}

@layer components {
	.btn {
		@apply px-4 py-2 rounded-lg font-medium transition-colors;
	}

	.btn-primary {
		@apply bg-spice-500 hover:bg-spice-600 text-white;
	}

	.btn-secondary {
		@apply bg-zinc-700 hover:bg-zinc-600 text-zinc-100;
	}

	.card {
		@apply bg-zinc-800 rounded-xl p-4 border border-zinc-700;
	}

	.input {
		@apply w-full px-4 py-3 bg-zinc-800 border border-zinc-700 rounded-lg
			   text-zinc-100 placeholder:text-zinc-500
			   focus:outline-none focus:ring-2 focus:ring-spice-500 focus:border-transparent;
	}
}

@layer utilities {
	.safe-bottom {
		padding-bottom: env(safe-area-inset-bottom, 1rem);
	}

	.safe-top {
		padding-top: env(safe-area-inset-top, 0);
	}
}