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/styles/themes/highContrastTheme.ts

@@ -0,0 +1,127 @@
+'use client';
+
+import { createTheme } from '@mui/material/styles';
+
+// High Contrast Warm Peach theme - Original theme, now accessibility option
+export const highContrastTheme = createTheme({
+  palette: {
+    primary: {
+      main: '#FFB6C1', // Light pink/rose
+      light: '#FFE4E1', // Misty rose
+      dark: '#DB7093', // Pale violet red
+    },
+    secondary: {
+      main: '#FFDAB9', // Peach puff
+      light: '#FFE5CC',
+      dark: '#FFB347', // Deep peach
+    },
+    background: {
+      default: '#FFF9F5', // Warm white
+      paper: '#FFFFFF',
+    },
+    text: {
+      primary: '#2D3748', // Dark gray - 4.5:1+ contrast
+      secondary: '#4A5568', // Darker gray for better contrast (7:1+ on white)
+    },
+  },
+  typography: {
+    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+    h1: {
+      fontSize: '2.15rem', // 7.5% larger for accessibility
+      fontWeight: 600,
+    },
+    h2: {
+      fontSize: '1.88rem',
+      fontWeight: 600,
+    },
+    h3: {
+      fontSize: '1.61rem',
+      fontWeight: 600,
+    },
+    h4: {
+      fontSize: '1.34rem',
+      fontWeight: 600,
+    },
+    h5: {
+      fontSize: '1.21rem',
+      fontWeight: 600,
+    },
+    h6: {
+      fontSize: '1.07rem',
+      fontWeight: 600,
+    },
+    body1: {
+      fontSize: '1.07rem', // Slightly larger for readability
+    },
+    body2: {
+      fontSize: '0.94rem',
+    },
+  },
+  shape: {
+    borderRadius: 16,
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 24,
+          textTransform: 'none',
+          minHeight: 48, // Touch target size
+          fontSize: '1.07rem', // Larger text
+          fontWeight: 600, // Bolder text for high contrast
+          paddingLeft: 24,
+          paddingRight: 24,
+        },
+        sizeLarge: {
+          minHeight: 56,
+          fontSize: '1.21rem',
+        },
+      },
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& .MuiInputBase-root': {
+            minHeight: 48,
+            borderRadius: 16,
+          },
+          '& .MuiInputBase-input': {
+            fontSize: '1.07rem', // Larger input text
+          },
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 20,
+          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.12)', // Stronger shadow for contrast
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          borderRadius: 16,
+        },
+        elevation1: {
+          boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+        },
+        elevation2: {
+          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.12)',
+        },
+        elevation3: {
+          boxShadow: '0 6px 30px rgba(0, 0, 0, 0.15)',
+        },
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 12,
+          fontWeight: 600, // Bolder for high contrast
+        },
+      },
+    },
+  },
+});