:root {
	--bg: #0f1115;
	--bg-elev: #161922;
	--bg-elev-2: #1e2230;
	--border: #2a2f3d;
	--text: #e6e8ee;
	--text-dim: #9aa2b3;
	--accent: #6ea8ff;
	--accent-strong: #4a8cff;
	--danger: #ff6e6e;
	--success: #58d68d;
	--warn: #f5b14d;
	--radius: 8px;
	--mono: ui-monospace, "JetBrains Mono", Menlo, monospace;
	--sans: system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
	font-family: var(--sans);
	color-scheme: dark;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #fafbfc;
		--bg-elev: #fff;
		--bg-elev-2: #f1f3f7;
		--border: #d8dde6;
		--text: #1a1d23;
		--text-dim: #5a6273;
		color-scheme: light;
	}
}

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

html, body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
}

body {
	font: 14px/1.5 var(--sans);
}

button {
	font: inherit;
	background: var(--bg-elev-2);
	color: var(--text);
	border: 1px solid var(--border);
	padding: 6px 12px;
	border-radius: var(--radius);
	cursor: pointer;

	&:hover { background: color-mix(in srgb, var(--bg-elev-2), var(--accent) 12%); }
	&:disabled { opacity: 0.5; cursor: not-allowed; }
	&.primary {
		background: var(--accent-strong);
		border-color: var(--accent-strong);
		color: white;
		&:hover { background: color-mix(in srgb, var(--accent-strong), white 10%); }
	}
	&.danger {
		color: var(--danger);
		&:hover { background: color-mix(in srgb, var(--bg-elev-2), var(--danger) 10%); }
	}
	&.ghost {
		background: transparent;
		border-color: transparent;
		&:hover { background: var(--bg-elev-2); }
	}
}

input, textarea, select {
	font: inherit;
	background: var(--bg);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 6px 10px;
	width: 100%;
	&:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
}

textarea { resize: vertical; min-height: 80px; font-family: var(--mono); }

label { display: block; color: var(--text-dim); margin-bottom: 4px; font-size: 13px; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.spacer { flex: 1; }
.muted { color: var(--text-dim); }
.mono { font-family: var(--mono); font-size: 12px; }

.card {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px 14px;
}