feat: Implement dual theme system with purple/pink and high contrast modes

Added comprehensive theme switching system with two color palettes:

**New Default Theme: Purple/Pink Gradient**
- Primary: #8b52ff (vibrant purple) → #d194e6 (light purple)
- Secondary: #ff7094 (pink) → #ffb3e4 (light pink)
- Modern, energetic gradient aesthetic
- Created purpleTheme.ts with full MUI theme configuration

**High Contrast Theme: Warm Peach (Original)**
- Renamed maternalTheme to highContrastTheme
- Larger text sizes (7.5% increase for accessibility)
- Stronger shadows and bolder fonts
- Optimized for readability and accessibility

**Theme Infrastructure:**
1. **ThemeContext** (contexts/ThemeContext.tsx)
   - Created theme context provider with useThemeContext hook
   - Theme modes: 'standard' (purple) | 'highContrast' (peach)
   - localStorage persistence with key: maternal_theme_preference
   - Prevents flash of wrong theme on load

2. **ThemeRegistry Updates** (components/ThemeRegistry.tsx)
   - Wrapped with ThemeContextProvider
   - Dynamic theme switching via useThemeContext
   - Maintains backward compatibility

3. **Settings Page Toggle** (app/settings/page.tsx)
   - Added theme switcher in Preferences section
   - Switch control with descriptive labels
   - Explains High Contrast benefits
   - Instant theme switching without reload

4. **CSS Variables** (app/globals.css)
   - Added --color-1 through --color-5 for purple gradient
   - Added --warm-1 through --warm-5 for peach palette
   - Available for custom styling

**Features:**
✅ Instant theme switching (no page reload)
✅ Persistent preference across sessions
✅ Accessibility-focused high contrast mode
✅ Modern purple/pink gradient as default
✅ Smooth transitions between themes
✅ All existing components work with both themes

**Files Created:**
- contexts/ThemeContext.tsx
- styles/themes/purpleTheme.ts
- styles/themes/highContrastTheme.ts

**Files Modified:**
- components/ThemeRegistry.tsx
- app/settings/page.tsx
- app/globals.css

Resolves: High Priority Feature #12 - Secondary Color Palette & Accessibility Toggle

🎉 Generated with [Claude Code](https://claude.com/claude-code)

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

maternal-web/app/globals.css

@@ -6,6 +6,20 @@
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
+
+  /* Purple/Pink Gradient Theme (Default) */
+  --color-1: #8b52ff;
+  --color-2: #d194e6;
+  --color-3: #f2a6f2;
+  --color-4: #ffb3e4;
+  --color-5: #ff7094;
+
+  /* Warm Peach Theme (High Contrast) */
+  --warm-1: #FFB6C1;
+  --warm-2: #FFDAB9;
+  --warm-3: #FFE4E1;
+  --warm-4: #FFD4CC;
+  --warm-5: #FF8B7D;
 }
 
 @media (prefers-color-scheme: dark) {

maternal-web/app/settings/page.tsx

@@ -20,10 +20,12 @@ import { TimeFormatSelector } from '@/components/settings/TimeFormatSelector';
 import { PhotoUpload } from '@/components/common/PhotoUpload';
 import { motion } from 'framer-motion';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useThemeContext } from '@/contexts/ThemeContext';
 
 export default function SettingsPage() {
   const { t } = useTranslation('settings');
   const { user, logout, refreshUser } = useAuth();
+  const { themeMode, setThemeMode } = useThemeContext();
   const [name, setName] = useState(user?.name || '');
   const [photoUrl, setPhotoUrl] = useState(user?.photoUrl || '');
   const [timezone, setTimezone] = useState(user?.timezone || 'UTC');
@@ -194,6 +196,25 @@ export default function SettingsPage() {
               <TimeZoneSelector value={timezone} onChange={setTimezone} />
               <Divider />
               <TimeFormatSelector value={timeFormat} onChange={setTimeFormat} />
+              <Divider />
+              <Box>
+                <Typography variant="subtitle1" fontWeight="600" gutterBottom>
+                  Theme Mode
+                </Typography>
+                <Typography variant="body2" color="text.secondary" gutterBottom>
+                  High Contrast mode uses larger text and stronger colors for better readability
+                </Typography>
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={themeMode === 'highContrast'}
+                      onChange={(e) => setThemeMode(e.target.checked ? 'highContrast' : 'standard')}
+                      disabled={isLoading}
+                    />
+                  }
+                  label={themeMode === 'highContrast' ? 'High Contrast Mode' : 'Standard Mode'}
+                />
+              </Box>
             </Box>
           </CardContent>
         </Card>