feat: Phase 7 Aether Drift — typography, spacing & detail alignment

Align all component typography to the design prototype's exact measurements:
- Message author: 16px bold → 15px semibold
- Message text: 16px → 15px, line-height 1.5
- Timestamps: 12px → 11px
- Category headers: 12px bold → 11px medium, #484854 color
- Member/activity names: 15px → 13.5px with tighter line-height
- Member activity text: 12px → 11px
- Section headers: 12px → 10.5px
- Channel header names: 15px with -0.02em tracking
- Channel topic: 12px → 13px
- Header padding: 16px → 20px
- User area avatar: 32px → 34px

packages/web/src/components/chat/Message.tsx

@@ -199,12 +199,12 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
           <div className="flex items-baseline gap-2 mb-0.5">
             <span 
               onClick={handleUsernameClick}
-              className="font-bold cursor-pointer hover:underline text-[16px] leading-tight"
+              className="font-semibold cursor-pointer hover:underline text-[15px] leading-tight"
               style={roleColor}
             >
               {displayName}
             </span>
-            <span className="text-[12px] text-txt-tertiary leading-tight font-medium hover:cursor-default">
+            <span className="text-[11px] text-txt-tertiary leading-tight font-medium hover:cursor-default">
               {formatTime(message.createdAt)}
             </span>
           </div>
@@ -216,7 +216,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
               value={editContent}
               onChange={(e) => setEditContent(e.target.value)}
               onKeyDown={handleEditSubmit}
-              className="w-full p-3 bg-surface-input rounded-lg text-txt-primary outline-none resize-none text-[16px] leading-[1.375rem] shadow-inner"
+              className="w-full p-3 bg-surface-input rounded-lg text-txt-primary outline-none resize-none text-[15px] leading-[1.5] shadow-inner"
               rows={2}
               autoFocus
             />
@@ -233,7 +233,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
         ) : (
           <div className="flex flex-col gap-1">
             {message.content && (
-              <div className="text-txt-message text-[16px] leading-[1.375rem] break-words whitespace-pre-wrap selection:bg-accent-primary/30">
+              <div className="text-txt-message text-[15px] leading-[1.5] break-words whitespace-pre-wrap selection:bg-accent-primary/30">
                 <MarkdownRenderer content={message.content} />
                 {message.editedAt && (
                   <span className="text-[10px] text-txt-tertiary ml-1 select-none font-medium">(edited)</span>