/* Design tokens — color/theme variables, radius, layout width.
   Dark is the default; [data-theme="light"] overrides the palette. */
:root {
  --bg: #08080f;
  --bg-2: #0d0d1a;
  --surface: #12121f;
  --surface-2: #16162a;
  --border: #22223a;
  --text: #ececf5;
  --muted: #9a9ab5;
  --faint: #6b6b85;
  --brand: #7c5cff;
  --brand-2: #4d8dff;
  --accent: #35e0d4;
  --glow: rgba(124, 92, 255, 0.5);
  --header-bg: rgba(8,8,15,0.6);
  --header-bg-scrolled: rgba(8,8,15,0.82);
  --menu-bg: rgba(8,8,15,0.97);
  --btn-ghost-bg: rgba(255,255,255,0.02);
  --radius: 16px;
  --max: 1160px;
}

/* Light theme (first pass — colors to be refined later) */
:root[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-2: #eef0f7;
  --surface: #ffffff;
  --surface-2: #f2f3fa;
  --border: #e3e4ef;
  --text: #14142a;
  --muted: #55566f;
  --faint: #8687a0;
  --glow: rgba(124, 92, 255, 0.3);
  --header-bg: rgba(255,255,255,0.7);
  --header-bg-scrolled: rgba(255,255,255,0.85);
  --menu-bg: rgba(255,255,255,0.97);
  --btn-ghost-bg: rgba(20,20,42,0.03);
}