:root {
  /* ── Palette ── */
  --bg:           #0A0A0F;
  --surface:      #13131A;
  --surface-2:    #1A1A24;
  --surface-3:    #20202E;
  --border:       #1E1E2E;
  --border-2:     #2A2A3E;

  --primary:      #5B6EF5;
  --primary-h:    #4A5DE4;
  --primary-glow: rgba(91, 110, 245, 0.25);

  --accent:       #00D4FF;
  --accent-dim:   rgba(0, 212, 255, 0.12);

  --text:         #E8E8F0;
  --text-muted:   #6B6B8A;
  --text-faint:   #3A3A54;

  --online:       #00FF94;
  --away:         #FFB800;
  --offline:      #3A3A54;

  --danger:       #FF4757;
  --danger-dim:   rgba(255, 71, 87, 0.12);
  --success:      #00FF94;
  --warning:      #FFB800;

  /* ── Typography ── */
  --font:         'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:         'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:      11px;
  --text-sm:      13px;
  --text-base:    15px;
  --text-md:      17px;
  --text-lg:      20px;
  --text-xl:      24px;
  --text-2xl:     32px;
  --text-3xl:     48px;
  --text-4xl:     64px;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-24: 96px;

  /* ── Radii ── */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.6);
  --glow:       0 0 20px var(--primary-glow);

  /* ── Transitions ── */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --duration:   150ms;
  --duration-md: 250ms;

  /* ── Sidebar ── */
  --sidebar-w: 260px;
}