refactor: replace cyan accent with ember orange across entire frontend

Swap accent color from cyan (#22d3ee) to ember orange (#f97316) site-wide.
Cyan caused contrast issues and felt generic — orange brings warmth and
urgency fitting for a troubleshooting tool.

Changes:
- CSS variables: accent, accent-hover, accent-dim, accent-text, primary, ring
- Warning color shifted from amber (#fbbf24) to yellow (#eab308) for
  semantic separation from orange accent
- Brand SVGs: logo gradient updated to orange
- 50+ component files: all hardcoded cyan hex values, Tailwind cyan-*
  classes, and rgba(34,211,238,...) glow values replaced
- landing.css: all 45+ cyan references + 5 old border color fixes
- DESIGN-SYSTEM.md bumped to v5 with decisions log
- CLAUDE.md: all color references synced to charcoal palette + orange accent
- PWA theme-color meta tag updated to match sidebar (#10121a)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/index.css

@@ -28,17 +28,17 @@
   --color-border-default: #2e3240;
   --color-border-hover: #3d4252;
 
-  /* ── Accent (cyan) ─────────────────────────────── */
-  --color-accent: #22d3ee;
-  --color-accent-hover: #06b6d4;
-  --color-accent-dim: rgba(34,211,238,0.10);
-  --color-accent-text: #67e8f9;
+  /* ── Accent (ember orange) ─────────────────────── */
+  --color-accent: #f97316;
+  --color-accent-hover: #ea580c;
+  --color-accent-dim: rgba(249,115,22,0.10);
+  --color-accent-text: #fdba74;
 
   /* ── Semantic colors ───────────────────────────── */
   --color-success: #34d399;
   --color-success-dim: rgba(52,211,153,0.10);
-  --color-warning: #fbbf24;
-  --color-warning-dim: rgba(251,191,36,0.10);
+  --color-warning: #eab308;
+  --color-warning-dim: rgba(234,179,8,0.10);
   --color-danger: #f87171;
   --color-danger-dim: rgba(248,113,113,0.10);
 
@@ -49,7 +49,7 @@
   --color-card-foreground: #e2e5eb;
   --color-popover: #22252e;
   --color-popover-foreground: #e2e5eb;
-  --color-primary: #22d3ee;
+  --color-primary: #f97316;
   --color-primary-foreground: #ffffff;
   --color-secondary: #2e3140;
   --color-secondary-foreground: #e2e5eb;
@@ -61,7 +61,7 @@
   --color-destructive-foreground: #ffffff;
   --color-border: #2e3240;
   --color-input: #282b35;
-  --color-ring: #22d3ee;
+  --color-ring: #f97316;
 
   /* ── Radii ─────────────────────────────────────── */
   --radius-sm: 5px;
@@ -191,11 +191,11 @@
   transition: filter 150ms ease, box-shadow 150ms ease, transform 150ms ease;
   &:hover {
     filter: brightness(1.1);
-    box-shadow: 0 2px 10px rgba(34, 211, 238, 0.2);
+    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.2);
     transform: translateY(-1px);
   }
   &:active {
-    box-shadow: 0 0 4px rgba(34, 211, 238, 0.1);
+    box-shadow: 0 0 4px rgba(249, 115, 22, 0.1);
     transform: translateY(0);
   }
 }
@@ -221,12 +221,12 @@
 
 /* ── Interactive shadow patterns (dark-mode aware) ── */
 /* On dark backgrounds, use brighter surfaces + faint accent glow
-   instead of black shadows (which are invisible on #0c0d10) */
+   instead of black shadows (which are invisible on #1a1c23) */
 
 /* Tab/toggle group: active item gets elevated surface + faint accent glow */
 @utility tab-active-shadow {
   background: var(--color-bg-elevated);
-  box-shadow: 0 1px 4px rgba(34, 211, 238, 0.08);
+  box-shadow: 0 1px 4px rgba(249, 115, 22, 0.08);
 }
 
 /* Card hover lift — brighter border + subtle accent glow */
@@ -234,7 +234,7 @@
   transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
   &:hover {
     border-color: var(--color-border-hover);
-    box-shadow: 0 2px 8px rgba(34, 211, 238, 0.06);
+    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.06);
     transform: translateY(-2px);
   }
   &:active {