/* ============ theme.css ============ */
:root {
  --accent: #7c5cff;
  --accent-2: #23d5ab;
  --accent-rgb: 124, 92, 255;

  /* dark theme (default) */
  --bg: #0e0f1a;
  --surface: rgba(28, 30, 46, 0.72);
  --surface-solid: #1c1e2e;
  --surface-2: rgba(40, 43, 64, 0.85);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #eef0fb;
  --text-dim: #a4a8c4;
  --text-faint: #6f7494;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.4);
  --scroll-thumb: rgba(255, 255, 255, 0.18);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.32);
  --glass-blur: blur(22px) saturate(160%);
  --taskbar-bg: rgba(18, 19, 30, 0.7);
  --hover: rgba(255, 255, 255, 0.07);
  --selected: rgba(var(--accent-rgb), 0.28);
}

[data-theme="light"] {
  --bg: #e9ecf5;
  --surface: rgba(255, 255, 255, 0.74);
  --surface-solid: #f6f7fb;
  --surface-2: rgba(245, 246, 251, 0.92);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --text: #1a1c2b;
  --text-dim: #555a72;
  --text-faint: #8a8fa8;
  --shadow: 0 18px 60px rgba(20, 24, 60, 0.22);
  --shadow-sm: 0 6px 20px rgba(20, 24, 60, 0.14);
  --scroll-thumb: rgba(0, 0, 0, 0.2);
  --scroll-thumb-hover: rgba(0, 0, 0, 0.34);
  --taskbar-bg: rgba(255, 255, 255, 0.66);
  --hover: rgba(0, 0, 0, 0.05);
  --selected: rgba(var(--accent-rgb), 0.2);
}