/* ═══════════════════════════════════════════════
   TREEHOUSE MISSION CONTROL — Design System
   Industrial dark. Geometric precision. Data-dense.
   ═══════════════════════════════════════════════ */

:root {
	/* ─── Surfaces ─── */
	--bg: #06070b;
	--surface-0: #0a0c12;
	--surface-1: #0f1118;
	--surface-2: #151820;
	--surface-3: #1b1f2a;
	--surface-hover: #1e2233;

	/* ─── Borders ─── */
	--border: #1e2230;
	--border-subtle: #161a24;
	--border-strong: #2a2f40;
	--border-focus: #6366f1;

	/* ─── Text ─── */
	--text: #c8cce0;
	--text-dim: #5c6180;
	--text-muted: #3d4260;
	--text-bright: #eef0ff;
	--text-inverse: #06070b;

	/* ─── Accent ─── */
	--accent: #6366f1;
	--accent-hover: #7577f5;
	--accent-dim: rgba(99, 102, 241, 0.12);
	--accent-glow: rgba(99, 102, 241, 0.25);

	/* ─── Status ─── */
	--emerald: #34d399;
	--emerald-dim: rgba(52, 211, 153, 0.12);
	--amber: #fbbf24;
	--amber-dim: rgba(251, 191, 36, 0.12);
	--rose: #fb7185;
	--rose-dim: rgba(251, 113, 133, 0.12);
	--cyan: #22d3ee;
	--cyan-dim: rgba(34, 211, 238, 0.12);

	/* ─── Spacing ─── */
	--sidebar-width: 220px;
	--navbar-height: 52px;
	--radius-sm: 4px;
	--radius: 6px;
	--radius-lg: 10px;

	/* ─── Typography ─── */
	--font-body: 'Outfit', -apple-system, sans-serif;
	--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
	--font-size-xs: 11px;
	--font-size-sm: 12px;
	--font-size-base: 13px;
	--font-size-md: 14px;
	--font-size-lg: 16px;
	--font-size-xl: 20px;
	--font-size-2xl: 26px;

	/* ─── Transitions ─── */
	--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--duration: 150ms;
}

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

html, body {
	overflow-x: hidden;
}

html {
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	min-height: 100vh;
	line-height: 1.5;
}

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

input, select, textarea, button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--border-strong);
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}

/* ─── Utility ─── */
/* ─── Light Theme ─── */
html[data-theme="light"] {
	--bg: #f0f1f5;
	--surface-0: #ffffff;
	--surface-1: #f7f8fa;
	--surface-2: #edeef2;
	--surface-3: #e2e4ea;
	--surface-hover: #dcdee6;

	--border: #d4d6de;
	--border-subtle: #e4e6ec;
	--border-strong: #b8bbc6;
	--border-focus: #6366f1;

	--text: #3c4055;
	--text-dim: #6b7085;
	--text-muted: #9ca0b0;
	--text-bright: #1a1d2e;
	--text-inverse: #ffffff;

	--accent: #5558e6;
	--accent-hover: #4a4dd4;
	--accent-dim: rgba(85, 88, 230, 0.10);
	--accent-glow: rgba(85, 88, 230, 0.18);

	--emerald: #0d9b68;
	--emerald-dim: rgba(13, 155, 104, 0.10);
	--amber: #c48800;
	--amber-dim: rgba(196, 136, 0, 0.10);
	--rose: #e04060;
	--rose-dim: rgba(224, 64, 96, 0.10);
	--cyan: #0891b2;
	--cyan-dim: rgba(8, 145, 178, 0.10);
}

.mono { font-family: var(--font-mono); }
.dim { color: var(--text-dim); }
.bright { color: var(--text-bright); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
