:root {
  --bg-primary: #0f1117;
  --bg-secondary: #161921;
  --bg-tertiary: #1c1f2b;
  --bg-hover: #232736;
  --bg-active: #2a2e3f;
  --bg-input: #12141c;
  --border-color: #262a3a;
  --text-primary: #e4e6f0;
  --text-secondary: #8b8fa3;
  --text-muted: #5c6073;
  --accent: #6c7bff;
  --accent-hover: #5a69e6;
  --accent-bg: rgba(108, 123, 255, 0.12);
  --danger: #f04a5e;
  --success: #3fd97f;
  --warning: #f0b232;
  --online: #3fd97f;
  --idle: #f0b232;
  --offline: #5c6073;
  --scrollbar-thumb: #2a2e3f;
  --scrollbar-track: transparent;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  /* Brand colors — keep these literal even in future themes */
  --brand-spotify: #1db954;
  --brand-discord: #5865f2;
  --brand-youtube: #ff0000;
  --brand-jellyfin: #aa5cc3;
}

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

html, body, #app {
  height: 100%;
}

body {
  overflow: hidden;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3a3f55;
}

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

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

/* Utility */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.flex-1 { flex: 1; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relative { position: relative; }