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

@theme {
	--color-surface-900: #000000;
	--color-surface-800: #1a1a1a;
	--color-surface-700: #242424;
	--color-surface-600: #2e2e2e;
	--color-accent: #ffffff;
	--color-accent-hover: #e0e0e0;
	--color-accent-dim: #ffffff1a;
	--color-text-primary: #f0f0f0;
	--color-text-secondary: #888888;
	--color-border: #2a2a2a;
	--font-display: 'Geist', system-ui, sans-serif;
	--font-body: 'Geist', system-ui, sans-serif;
	--font-mono: 'Geist Mono', ui-monospace, monospace;
}

html {
	background-color: var(--color-surface-900);
	color: var(--color-text-primary);
	font-family: var(--font-body);
}

body {
	min-height: 100dvh;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 6px;
}
::-webkit-scrollbar-track {
	background: var(--color-surface-900);
}
::-webkit-scrollbar-thumb {
	background: var(--color-surface-600);
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--color-accent);
}