feat: Phase 1 Aether Drift — mobile-first grid layout and token migration

Replace Discord flex layout with CSS Grid on desktop (312px sidebar +
1fr main) and overlay drawer on mobile. Migrate all discord-* class
references to Aether Drift design tokens across 15 files (~200 refs).

Layout: ServerSidebar becomes a fixed glass strip (md:glass-strip),
ChannelSidebar gets pl-[72px] offset, bottom bar is a glass-bubble
(z-105), MessageInput floats as absolute glass pill on desktop (z-110).
MemberSidebar/ActivityPanel hidden on mobile via hidden md:block.

Z-index stack: MobileNav backdrop z-35, sidebar z-40, glass strip z-100,
bottom bar z-105, input bubble z-110, hamburger z-120, profile popout
z-145, device panels z-150, modals z-200.

packages/web/src/styles/globals.css

@@ -3,55 +3,176 @@
 @tailwind utilities;
 
 @layer base {
+  :root {
+    /* ── Matte Surfaces ── */
+    --bg-base: #0b0b10;
+    --bg-channel: #1a1a23;
+    --bg-chat: #13131a;
+    --bg-members: #1a1a23;
+    --bg-elevated: #252530;
+    --bg-input: #111118;
+    --bg-overlay: rgba(0, 0, 0, 0.85);
+
+    /* ── Borders ── */
+    --border-hard: #22222c;
+    --border-soft: #2a2a36;
+
+    /* ── Pastel Accents ── */
+    --accent-mint: #86efac;
+    --accent-peach: #fca5a5;
+    --accent-lavender: #c4b5fd;
+    --accent-sky: #7dd3fc;
+    --accent-amber: #fcd34d;
+    --accent-rose: #fda4af;
+    --accent-coral: #fb923c;
+
+    /* ── Primary Action (replaces blurple) ── */
+    --accent-primary: #7c6cf6;
+    --accent-primary-hover: #6b5ce0;
+    --accent-primary-active: #5f4fd0;
+
+    /* ── Text Hierarchy ── */
+    --text-primary: #efefef;
+    --text-secondary: #a0a0aa;
+    --text-tertiary: #5c5c68;
+    --text-message: #d8d8de;
+    --text-link: #7dd3fc;
+    --text-positive: #86efac;
+    --text-warning: #fcd34d;
+    --text-danger: #fca5a5;
+
+    /* ── Interactive ── */
+    --interactive-hover: rgba(255, 255, 255, 0.06);
+    --interactive-active: rgba(255, 255, 255, 0.12);
+    --interactive-selected: rgba(255, 255, 255, 0.16);
+    --interactive-muted: #3a3a44;
+
+    /* ── Status ── */
+    --status-online: #86efac;
+    --status-idle: #fcd34d;
+    --status-dnd: #fca5a5;
+    --status-offline: #3a3a44;
+
+    /* ── Glass Material ── */
+    --glass-bg: rgba(20, 20, 26, 0.52);
+    --glass-border: rgba(255, 255, 255, 0.07);
+    --glass-highlight: rgba(255, 255, 255, 0.05);
+
+    /* ── Notification ── */
+    --notification: #fda4af;
+  }
+
   * {
     @apply border-none;
     outline: none !important;
   }
 
   ::selection {
-    background: rgba(88, 101, 242, 0.3);
+    background: rgba(134, 239, 172, 0.25);
+    color: var(--text-primary);
   }
 
   html, body, #root {
-    @apply h-full w-full overflow-hidden bg-discord-bg-tertiary text-discord-text-normal;
-    font-family: 'Inter', 'gg sans', 'Noto Sans', sans-serif;
+    @apply h-full w-full overflow-hidden bg-surface-base text-txt-message;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
   }
 
-  /* Discord-style thin scrollbar */
+  /* Thin scrollbar */
   ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
   }
 
   ::-webkit-scrollbar-track {
-    @apply bg-transparent;
+    background: transparent;
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply bg-[#111214] rounded-full border-2 border-transparent bg-clip-padding;
+    background-color: var(--bg-input);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    @apply bg-[#1a1b1e];
+    background-color: var(--bg-channel);
   }
 
   .no-scrollbar::-webkit-scrollbar {
     display: none;
   }
 
-  /* For dark theme auto-fill */
+  /* Dark theme auto-fill */
   input:-webkit-autofill,
   input:-webkit-autofill:hover,
   input:-webkit-autofill:focus {
     -webkit-text-fill-color: #ffffff;
-    -webkit-box-shadow: 0 0 0px 1000px #111214 inset;
+    -webkit-box-shadow: 0 0 0px 1000px #111118 inset;
     transition: background-color 5000s ease-in-out 0s;
   }
 }
 
+@layer components {
+  /* Standard glass — popovers, floating elements */
+  .glass {
+    backdrop-filter: blur(20px) saturate(120%);
+    -webkit-backdrop-filter: blur(20px) saturate(120%);
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    box-shadow:
+      0 2px 8px rgba(0, 0, 0, 0.25),
+      0 8px 24px rgba(0, 0, 0, 0.15),
+      inset 0 1px 0 var(--glass-highlight);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  /* Server strip glass — no border-radius, rightward shadow */
+  .glass-strip {
+    backdrop-filter: blur(20px) saturate(120%);
+    -webkit-backdrop-filter: blur(20px) saturate(120%);
+    background: var(--glass-bg);
+    border-right: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.03),
+      2px 0 12px rgba(0, 0, 0, 0.20);
+  }
+
+  /* Floating bubble glass — bottom bar, input pill */
+  .glass-bubble {
+    backdrop-filter: blur(20px) saturate(120%);
+    -webkit-backdrop-filter: blur(20px) saturate(120%);
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    box-shadow:
+      0 2px 8px rgba(0, 0, 0, 0.20),
+      0 8px 24px rgba(0, 0, 0, 0.12),
+      inset 0 1px 0 var(--glass-highlight);
+  }
+}
+
+/* Accessibility: fall back to solid surfaces when transparency is reduced */
+@media (prefers-reduced-transparency: reduce) {
+  .glass {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    background: var(--bg-channel);
+  }
+  .glass-strip {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    background: var(--bg-channel);
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.20);
+  }
+  .glass-bubble {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    background: var(--bg-elevated);
+  }
+}
+
 @layer utilities {
   .rounded-inherit {
     border-radius: inherit;