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/pages/account/BrandingSettingsPage.tsx

@@ -11,7 +11,7 @@ interface AccountBranding {
   company_name: string | null
 }
 
-const DEFAULT_COLOR = '#06b6d4'
+const DEFAULT_COLOR = '#ea580c'
 
 export function BrandingSettingsPage() {
   const [branding, setBranding] = useState<AccountBranding | null>(null)
@@ -137,7 +137,7 @@ export function BrandingSettingsPage() {
                   className={cn(
                     'mt-1 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm',
                     'text-foreground placeholder:text-muted-foreground',
-                    'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
+                    'focus:border-[rgba(249,115,22,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
                   )}
                 />
                 <p className="mt-1 text-xs text-muted-foreground">
@@ -163,7 +163,7 @@ export function BrandingSettingsPage() {
                   className={cn(
                     'mt-1 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm',
                     'text-foreground placeholder:text-muted-foreground font-mono',
-                    'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
+                    'focus:border-[rgba(249,115,22,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
                   )}
                 />
                 <p className="mt-1 text-xs text-muted-foreground">
@@ -207,12 +207,12 @@ export function BrandingSettingsPage() {
                       const val = e.target.value
                       setPrimaryColor(val)
                     }}
-                    placeholder="#06b6d4"
+                    placeholder="#ea580c"
                     maxLength={7}
                     className={cn(
                       'w-32 rounded-lg border border-border bg-card px-3 py-2 text-sm',
                       'text-foreground placeholder:text-muted-foreground font-mono',
-                      'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
+                      'focus:border-[rgba(249,115,22,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
                     )}
                   />
                   <button
@@ -224,7 +224,7 @@ export function BrandingSettingsPage() {
                   </button>
                 </div>
                 <p className="mt-1 text-xs text-muted-foreground">
-                  Hex color code for the primary accent color (e.g. #06b6d4).
+                  Hex color code for the primary accent color (e.g. #ea580c).
                 </p>
               </div>
             </div>