:root {
  --bg-main: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-hover: #F1F5F9;
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-tertiary: #94A3B8;
  --border: #E2E8F0;
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-text: #FFFFFF;
  --scrollbar-track: rgba(244, 244, 245, 0.85);
  --scrollbar-thumb: rgba(113, 113, 122, 0.45);
  --scrollbar-thumb-hover: rgba(82, 82, 91, 0.58);
}

.dark {
  --bg-main: #121212;
  --bg-surface: #181818;
  --bg-hover: #27272A;
  --text-primary: #E2E8F0;
  --text-secondary: #A1A1AA;
  --text-tertiary: #71717A;
  --border: #27272A;
  --accent: #3B82F6;
  --accent-hover: #60A5FA;
  --accent-text: #FFFFFF;
  --scrollbar-track: rgba(9, 9, 11, 0.68);
  --scrollbar-thumb: rgba(82, 82, 91, 0.62);
  --scrollbar-thumb-hover: rgba(113, 113, 122, 0.78);
}

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

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

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

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