feat: Email Global Customization Page! 🎨

## 3. Email Global Customization

**Features:**
- Brand Colors (Primary & Secondary)
- Hero Card Gradient (Start & End colors)
- Button Styling (Text color)
- Logo & Branding (Logo URL, Header/Footer text)
- Live color previews
- Reset to defaults

**Settings:**
- `primary_color` - Primary buttons (#7f54b3)
- `secondary_color` - Outline buttons (#7f54b3)
- `hero_gradient_start` - Hero card gradient start (#667eea)
- `hero_gradient_end` - Hero card gradient end (#764ba2)
- `button_text_color` - Button text (#ffffff)
- `logo_url` - Store logo URL
- `header_text` - Email header text
- `footer_text` - Email footer text

**UI Features:**
- Color pickers with hex input
- Live gradient preview
- Live button preview
- Back navigation
- Reset to defaults button
- Save/loading states

**Navigation:**
- Added card to Notifications page
- Route: `/settings/notifications/email-customization`
- API: `/notifications/email-settings`

**Files:**
- `routes/Settings/Notifications.tsx` - Added card
- `routes/Settings/Notifications/EmailCustomization.tsx` - NEW
- `App.tsx` - Added route

Ready to apply these settings to email templates! 🚀

admin-spa/src/routes/Settings/Notifications.tsx

@@ -4,7 +4,7 @@ import { SettingsLayout } from './components/SettingsLayout';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { __ } from '@/lib/i18n';
-import { Bell, Users, ChevronRight, Activity } from 'lucide-react';
+import { Bell, Users, ChevronRight, Activity, Palette } from 'lucide-react';
 
 export default function NotificationsSettings() {
   return (
@@ -80,6 +80,39 @@ export default function NotificationsSettings() {
           </CardContent>
         </Card>
 
+        {/* Email Customization */}
+        <Card className="hover:shadow-md transition-shadow">
+          <CardHeader>
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-green-500/10 rounded-lg">
+                <Palette className="h-6 w-6 text-green-500" />
+              </div>
+              <div>
+                <CardTitle>{__('Email Customization')}</CardTitle>
+                <CardDescription>
+                  {__('Customize email appearance and branding')}
+                </CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              {__('Set your brand colors, logo, and email styling. Customize header, footer, and button colors for all email templates.')}
+            </p>
+            <div className="flex items-center justify-between pt-2">
+              <div className="text-sm text-muted-foreground">
+                {__('Colors, Logo, Styling')}
+              </div>
+              <Link to="/settings/notifications/email-customization">
+                <Button variant="outline" size="sm">
+                  {__('Customize')}
+                  <ChevronRight className="ml-2 h-4 w-4" />
+                </Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+
         {/* Activity Log */}
         <Card className="hover:shadow-md transition-shadow">
           <CardHeader>