:root {
  --bg-dark: #0a0a14;
  --bg-panel: #111122;
  --bg-header: #1a1a2e;
  --bg-toolbar: #16213e;
  --bg-input: #0d0d1a;
  --bg-selected: #1e3a5f;
  --bg-hover: #162040;

  --border-outer: #2a2a4a;
  --border-inner: #0a0a14;
  --border-raised-light: #3a3a5a;
  --border-raised-dark: #0a0a14;

  --text-primary: #c8c8d4;
  --text-dim: #6a6a8a;
  --text-bright: #e8e8f0;
  --text-green: #44cc66;
  --text-cyan: #44cccc;
  --text-yellow: #cccc44;
  --text-red: #cc4444;
  --text-magenta: #cc44cc;
  --text-blue: #4488cc;

  --accent: #4488cc;
  --accent-dim: #2a5a8a;

  --scrollbar-bg: #111122;
  --scrollbar-thumb: #2a2a4a;
  --scrollbar-thumb-hover: #3a3a5a;
}

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-corner { background: var(--scrollbar-bg); }

::selection {
  background: var(--bg-selected);
  color: var(--text-bright);
}