refactor(frontend): align observability panels with editorial design system

Replace hardcoded gray-* colors with design system tokens:
- border-gray-200 → border-muted
- bg-gray-50 → bg-muted/30
- text-gray-600/700 → text-muted-foreground/foreground
- hover:bg-gray-100 → hover:bg-muted/50

Updated components:
- MetadataDebugPanel: now matches Card aesthetic
- ReasoningChainViewer: now uses warm editorial tones

Benefits:
- Consistent with existing reasoning/summary cards
- Matches warm editorial aesthetic (hsl(42...) palette)
- DRY: reuses design system tokens
- Documented collapsible panel pattern in cookbook

This fixes the cool gray panels that looked out of place among the warm beige editorial UI.

docs/frontend-design-cookbook.md

@@ -83,7 +83,28 @@ Use these wrappers before introducing route-specific structure:
 - `editorial-panel`: primary surface for forms, tables, and ledgers.
 - `editorial-toolbar`: compact action row under hero copy.
 - `editorial-backlink`: standard top-left back navigation style.
-- `editorial-alert`, `editorial-alert--error`, `editorial-alert--success`: feedback banners.
+- `editorial-alert`, `editorial-alert--error`, `editorial-alert--success`, `editorial-alert--warning`, `editorial-alert--info`: feedback banners.
+
+### Collapsible panels
+
+For secondary information (debug data, reasoning chains, metadata), use this pattern:
+
+```svelte
+<div class="border border-muted rounded-lg overflow-hidden">
+  <button class="w-full flex items-center gap-2 px-4 py-3 bg-muted/30 hover:bg-muted/50 transition-colors">
+    <Icon class="size-4 text-muted-foreground" />
+    <span class="text-sm font-medium text-foreground">Panel Title</span>
+    <ChevronIcon class="ml-auto size-4 text-muted-foreground" />
+  </button>
+  {#if expanded}
+    <div class="p-4 bg-card border-t border-muted">
+      <!-- Content -->
+    </div>
+  {/if}
+</div>
+```
+
+This matches the warm editorial aesthetic and maintains visual consistency with Card components.
 
 ## Component rules