feat: Add Business theme with professional navy and gray palette

Add a new "Business" theme designed for corporate/professional use cases.
The theme features a sophisticated navy and gray color palette that conveys
trust and professionalism while maintaining excellent readability.

Key characteristics:
- Deep navy primary color for trust and professionalism
- Off-white/charcoal backgrounds (avoiding harsh pure white/black)
- Teal accent for CTAs and highlights
- Soft, professional shadows
- System fonts for native feel
- High contrast ratios (WCAG AA compliant)

Files changed:
- globals.css: Added .theme-business light and dark mode variables
- useTheme.ts: Added 'business' to ThemeId and THEMES array
- ThemeSelector.tsx: Added business theme class handling

ui/src/hooks/useTheme.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 
-export type ThemeId = 'twitter' | 'claude' | 'neo-brutalism' | 'retro-arcade' | 'aurora'
+export type ThemeId = 'twitter' | 'claude' | 'neo-brutalism' | 'retro-arcade' | 'aurora' | 'business'
 
 export interface ThemeOption {
   id: ThemeId
@@ -43,6 +43,12 @@ export const THEMES: ThemeOption[] = [
     name: 'Aurora',
     description: 'Deep violet and teal, like northern lights',
     previewColors: { primary: '#8b5cf6', background: '#faf8ff', accent: '#2dd4bf' }
+  },
+  {
+    id: 'business',
+    name: 'Business',
+    description: 'Professional navy and gray palette',
+    previewColors: { primary: '#1e3a5f', background: '#f8fafc', accent: '#0d9488' }
   }
 ]
 
@@ -61,6 +67,8 @@ function getThemeClass(themeId: ThemeId): string {
       return 'theme-retro-arcade'
     case 'aurora':
       return 'theme-aurora'
+    case 'business':
+      return 'theme-business'
     default:
       return ''
   }
@@ -70,7 +78,7 @@ export function useTheme() {
   const [theme, setThemeState] = useState<ThemeId>(() => {
     try {
       const stored = localStorage.getItem(THEME_STORAGE_KEY)
-      if (stored === 'twitter' || stored === 'claude' || stored === 'neo-brutalism' || stored === 'retro-arcade' || stored === 'aurora') {
+      if (stored === 'twitter' || stored === 'claude' || stored === 'neo-brutalism' || stored === 'retro-arcade' || stored === 'aurora' || stored === 'business') {
         return stored
       }
     } catch {
@@ -92,7 +100,7 @@ export function useTheme() {
     const root = document.documentElement
 
     // Remove all theme classes
-    root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora')
+    root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora', 'theme-business')
 
     // Add current theme class (if not twitter/default)
     const themeClass = getThemeClass(theme)