/* ===========================
   Theme Variables & Base Reset
   =========================== */

:root {
  --bg: #0f1117;
  --bg2: #1a1d27;
  --bg3: #242833;
  --bg4: #2d3244;
  --border: #2e3345;
  --border-light: #3a4058;
  --text: #e4e6ed;
  --text2: #8b90a0;
  --text3: #5a5f72;
  --accent: #6c5ce7;
  --accent2: #a29bfe;
  --accent-dim: rgba(108, 92, 231, 0.15);
  --green: #00b894;
  --green-dim: rgba(0, 184, 148, 0.15);
  --red: #e17055;
  --red-dim: rgba(225, 112, 85, 0.15);
  --orange: #fdcb6e;
  --orange-dim: rgba(253, 203, 110, 0.15);
  --blue: #74b9ff;
  --blue-dim: rgba(116, 185, 255, 0.15);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --transition: 0.2s ease;
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace;
  --sidebar-width: 260px;
  --sidebar-collapsed: 60px;
  --topbar-height: 56px;
}

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

/* Light theme */
[data-theme="light"] {
  --bg: #f5f6fa;
  --bg2: #ffffff;
  --bg3: #e8eaf0;
  --bg4: #dcdfe8;
  --border: #d1d5e0;
  --border-light: #c0c5d4;
  --text: #1a1d27;
  --text2: #5a5f72;
  --text3: #8b90a0;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .terminal {
  background: #1e2030;
  color: #e4e6ed;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text2);
}