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

@layer base {
	body {
		@apply bg-slate-100 text-slate-800 antialiased;
		font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	}

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

	::-webkit-scrollbar-track {
		@apply bg-slate-100;
	}

	::-webkit-scrollbar-thumb {
		@apply bg-slate-300 rounded-full;
	}

	::-webkit-scrollbar-thumb:hover {
		@apply bg-slate-400;
	}
}

@layer components {
	.ta-card {
		@apply rounded-2xl border border-slate-200 bg-white shadow-sm;
	}

	.ta-input {
		@apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm outline-none transition;
		@apply focus:border-blue-500 focus:ring-2 focus:ring-blue-200;
	}

	.ta-label {
		@apply mb-1 block text-sm font-medium text-slate-700;
	}

	.ta-btn-primary {
		@apply inline-flex items-center justify-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition;
		@apply hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 disabled:cursor-not-allowed disabled:opacity-50;
	}

	.ta-btn-soft {
		@apply inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition;
		@apply hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-200;
	}
}