feat: Phase 5+6 Aether Drift — legacy token removal, colorful avatars & Backspace branding

Phase 5: Remove all 54 legacy Discord token definitions from tailwind.config.js,
migrate body classes in index.html to Aether Drift tokens, update ARCHITECTURE_AUDIT.md.

Phase 6: Replace flat purple fallback avatars with deterministic colorful gradients
(mint, sky, lavender, coral, rose, teal, amber) based on user/server ID hash.
Replace Discord logo SVG with Backspace "B" in server strip. Add per-server gradient
icons with hover glow. Update profile popout banner and incoming call modal to match.

packages/web/src/components/ui/UserProfilePopout.tsx

@@ -5,6 +5,7 @@ import { Avatar } from '../ui/Avatar';
 import { api } from '../../api/client';
 import { useServerStore } from '../../stores/serverStore';
 import { useUIStore } from '../../stores/uiStore';
+import { getAvatarGradient } from '../../utils/gradients';
 
 interface UserProfilePopoutProps {
   user: User;
@@ -35,16 +36,17 @@ export function UserProfilePopout({ user, onClose, position }: UserProfilePopout
       style={position ? { top: position.top, left: position.left } : { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
     >
       {/* Banner */}
-      <div className="h-[60px] bg-accent-primary" />
+      <div className="h-[60px]" style={{ background: getAvatarGradient(user.id, displayName).gradient }} />
       
       {/* Avatar Container */}
       <div className="px-4 pb-4 relative">
         <div className="absolute -top-8 left-4 rounded-full border-[6px] border-surface-elevated bg-surface-elevated">
-          <Avatar 
-            src={user.avatar} 
-            name={displayName} 
-            size={80} 
-            status={user.status as any} 
+          <Avatar
+            src={user.avatar}
+            name={displayName}
+            size={80}
+            status={user.status as any}
+            user={user}
           />
         </div>