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/Avatar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { User } from '@backspace/shared';
 import { useUIStore } from '../../stores/uiStore';
+import { getAvatarGradient } from '../../utils/gradients';
 
 interface AvatarProps {
   src?: string | null;
@@ -23,6 +24,7 @@ export function Avatar({ src, name, size = 40, status, className = '', onClick,
   const openUserProfile = useUIStore((s) => s.openUserProfile);
   const initials = name.charAt(0).toUpperCase();
   const fontSize = size < 32 ? 'text-xs' : size < 48 ? 'text-sm' : 'text-lg';
+  const gradient = getAvatarGradient(user?.id, name);
 
   const handleClick = (e: React.MouseEvent) => {
     if (onClick) {
@@ -59,8 +61,8 @@ export function Avatar({ src, name, size = 40, status, className = '', onClick,
         />
       ) : null}
       <div
-        className={`avatar-fallback w-full h-full rounded-full bg-accent-primary flex items-center justify-center ${fontSize} font-semibold text-white ${src ? 'hidden' : 'flex'}`}
-        style={src ? { display: 'none' } : undefined}
+        className={`avatar-fallback w-full h-full rounded-full flex items-center justify-center ${fontSize} font-semibold text-white ${src ? 'hidden' : 'flex'}`}
+        style={src ? { display: 'none' } : { background: gradient.gradient }}
       >
         {initials}
       </div>

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>