@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@theme {
	/* Colors - Dark theme */
	--color-dark: #0a0a0f;
	--color-surface: #14141f;
	--color-light: #f0f0f5;

	/* Brand */
	--color-primary: #6366f1;
	--color-primary-hover: #4f46e5;

	/* Status */
	--color-success: #22c55e;
	--color-warning: #f59e0b;
	--color-error: #ef4444;
	--color-info: #3b82f6;

	/* Font */
	--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Base styles */
body {
	background-color: var(--color-dark);
	color: var(--color-light);
	font-family: var(--font-sans);
}

/* Scrollbar styling */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--color-dark);
}

::-webkit-scrollbar-thumb {
	background: var(--color-light) / 0.2;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-light) / 0.3;
}