Add dark design system with CSS custom properties and refined typography

Establish a cohesive dark UI foundation:

- Define CSS custom properties for surfaces (4-level depth hierarchy),
  borders, foreground text (3-tier), accent colors, and canvas background
- Add Inter (text) and JetBrains Mono (code) font loading via Google Fonts
- Extend Tailwind with semantic color tokens, typography scale (caption/body/
  subheading/heading), box shadows (card, glow), and animations (fade-in,
  slide-in, skeleton shimmer)
- Add component-layer utilities: .btn system (primary/secondary/ghost/danger),
  .glass frosted overlays, .custom-checkbox, .skeleton loaders
- Add .prose-message typographic styles for rendered markdown content
- Add search minimap CSS (tick marks, viewport indicator)
- Restyle scrollbars for thin dark appearance (WebKit + Firefox)
- Replace hardcoded Tailwind color classes in CATEGORY_COLORS with semantic
  tokens (dot/border/text) mapped to the new design system

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/client/lib/constants.ts

@@ -1,13 +1,52 @@
 import type { MessageCategory } from "./types";
 
-export const CATEGORY_COLORS: Record<MessageCategory, { border: string; bg: string }> = {
-  user_message: { border: "border-l-blue-500", bg: "bg-blue-50" },
-  assistant_text: { border: "border-l-emerald-500", bg: "bg-white" },
-  thinking: { border: "border-l-violet-500", bg: "bg-violet-50" },
-  tool_call: { border: "border-l-amber-500", bg: "bg-amber-50" },
-  tool_result: { border: "border-l-indigo-500", bg: "bg-indigo-50" },
-  system_message: { border: "border-l-gray-500", bg: "bg-gray-100" },
-  hook_progress: { border: "border-l-gray-400", bg: "bg-gray-50" },
-  file_snapshot: { border: "border-l-pink-500", bg: "bg-pink-50" },
-  summary: { border: "border-l-teal-500", bg: "bg-teal-50" },
+export const CATEGORY_COLORS: Record<
+  MessageCategory,
+  { dot: string; border: string; text: string }
+> = {
+  user_message: {
+    dot: "bg-category-user",
+    border: "border-category-user-border",
+    text: "text-category-user",
+  },
+  assistant_text: {
+    dot: "bg-category-assistant",
+    border: "border-category-assistant-border",
+    text: "text-category-assistant",
+  },
+  thinking: {
+    dot: "bg-category-thinking",
+    border: "border-category-thinking-border",
+    text: "text-category-thinking",
+  },
+  tool_call: {
+    dot: "bg-category-tool",
+    border: "border-category-tool-border",
+    text: "text-category-tool",
+  },
+  tool_result: {
+    dot: "bg-category-result",
+    border: "border-category-result-border",
+    text: "text-category-result",
+  },
+  system_message: {
+    dot: "bg-category-system",
+    border: "border-category-system-border",
+    text: "text-category-system",
+  },
+  hook_progress: {
+    dot: "bg-category-hook",
+    border: "border-category-hook-border",
+    text: "text-category-hook",
+  },
+  file_snapshot: {
+    dot: "bg-category-snapshot",
+    border: "border-category-snapshot-border",
+    text: "text-category-snapshot",
+  },
+  summary: {
+    dot: "bg-category-summary",
+    border: "border-category-summary-border",
+    text: "text-category-summary",
+  },
 };