/* ═══════════════════════════════════════════════════
   Skritka – Design Tokens
   "Vault" aesthetic: deep charcoal + emerald accent
   ═══════════════════════════════════════════════════ */

:root {
  /* ─── Background Scale ─── */
  --bg-darkest:  #0d0f13;
  --bg-dark:     #13161c;
  --bg-mid:      #1a1e27;
  --bg-light:    #222833;
  --bg-lighter:  #2c3340;
  --bg-hover:    #343c4d;
  --bg-active:   #3e4759;

  /* ─── Text Scale ─── */
  --text-primary:   #e2e4ea;
  --text-secondary: #8b919e;
  --text-muted:     #555d6e;
  --text-link:      #34d399;

  /* ─── Brand Palette ─── */
  --accent:       #10b981;
  --accent-hover: #059669;
  --accent-dark:  #047857;
  --accent-glow:  rgba(16, 185, 129, 0.15);

  --green:  #34d399;
  --red:    #f43f5e;
  --yellow: #fbbf24;
  --blue:   #38bdf8;

  /* ─── Gradient ─── */
  --brand-gradient: linear-gradient(135deg, #10b981, #38bdf8);

  /* ─── Dimensions ─── */
  --radius:     8px;
  --radius-sm:  4px;
  --radius-lg:  12px;
  --transition: 150ms ease;

  --server-bar-width:      72px;
  --channel-sidebar-width: 240px;
  --members-sidebar-width: 240px;

  /* ─── Shadows ─── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 20px rgba(16,185,129,0.08);
}