@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
	--bg-primary: #0a0d14;
	--bg-secondary: #0f172a;
	--bg-card: #141e33;
	--bg-card-hover: #192742;
	--bg-input: #0b1322;
	--border-subtle: #1e293b;
	--border-focus: #38bdf8;
	--accent-primary: #38bdf8;
	--accent-hover: #0ea5e9;
	--accent-secondary: #6366f1;
	--accent-gradient: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
	--text-primary: #f8fafc;
	--text-secondary: #94a3b8;
	--text-muted: #64748b;
	--error: #f43f5e;
	--error-bg: rgba(244, 63, 94, 0.12);
	--success: #10b981;
	--success-bg: rgba(16, 185, 129, 0.12);
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'Fira Code', monospace;
	--shadow-glow: 0 0 25px rgba(56, 189, 248, 0.15);
	--shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-subtle);
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	min-height: 100vh;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color-scheme: dark;
	accent-color: var(--accent-primary);
}

a {
	color: var(--accent-primary);
	text-decoration: none;
	transition: color 0.2s ease, text-decoration 0.2s ease;
}

a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

/* Custom modern dark scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
	background: #1e293b;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #334155;
}