feat: add Gallery Premium and Gallery Story layouts (Beta)

- Add Gallery Premium layout: elegant light theme with masonry grid,
  hero section, sticky navigation, and integrated lightbox
- Add Gallery Story layout: cinematic dark theme with scene-based
  sections, carousels, and gold accents
- Implement full-page layout support: bypass standard header/footer/
  sidebar for immersive experience
- Add logout button to both layouts for authenticated galleries
- Mark both layouts as (Beta) in theme editor and layout selectors
- Fix hero title color visibility in Gallery Premium layout

frontend/src/types/theme.types.ts

@@ -1,5 +1,5 @@
 // Gallery Layout Types
-export type GalleryLayoutType = 'grid' | 'masonry' | 'carousel' | 'timeline' | 'mosaic';
+export type GalleryLayoutType = 'grid' | 'masonry' | 'carousel' | 'timeline' | 'mosaic' | 'gallery-premium' | 'gallery-story';
 
 // Header Style Types (decoupled from layout)
 export type HeaderStyleType = 'hero' | 'standard' | 'minimal' | 'none';
@@ -55,17 +55,23 @@ export interface ThemeConfig {
   accentColor?: string;
   backgroundColor?: string;
   textColor?: string;
-  
+  surfaceColor?: string;
+  surfaceBorderColor?: string;
+  mutedTextColor?: string;
+
+  // Color Mode
+  colorMode?: 'light' | 'dark' | 'auto';
+
   // Typography
   fontFamily?: string;
   headingFontFamily?: string;
   fontSize?: 'small' | 'normal' | 'large';
-  
+
   // Styling
   borderRadius?: 'none' | 'sm' | 'md' | 'lg';
   buttonStyle?: 'solid' | 'outline' | 'ghost';
   shadowStyle?: 'none' | 'subtle' | 'normal' | 'dramatic';
-  
+
   // Gallery Layout
   galleryLayout?: GalleryLayoutType;
   gallerySettings?: GalleryLayoutSettings;
@@ -74,6 +80,9 @@ export interface ThemeConfig {
   headerStyle?: HeaderStyleType;
   heroDividerStyle?: HeroDividerStyle;
 
+  // Controls Style - sidebar (menu button) vs classic (inline filter bar)
+  controlsStyle?: 'sidebar' | 'classic';
+
   // Legacy Header/Footer (kept for backward compatibility)
   legacyHeaderStyle?: 'minimal' | 'standard' | 'full';
   footerStyle?: 'minimal' | 'standard' | 'full';
@@ -241,5 +250,143 @@ export const GALLERY_THEME_PRESETS: Record<string, EventTheme> = {
       shadowStyle: 'dramatic'
     },
     isPreset: true
+  },
+
+  darkClassic: {
+    name: 'Dark Classic',
+    description: 'Dark theme with green accents',
+    config: {
+      primaryColor: '#5C8762',
+      accentColor: '#22c55e',
+      backgroundColor: '#0f0f0f',
+      textColor: '#e5e5e5',
+      surfaceColor: '#1a1a1a',
+      surfaceBorderColor: '#2e2e2e',
+      mutedTextColor: '#a3a3a3',
+      colorMode: 'dark',
+      borderRadius: 'md',
+      galleryLayout: 'grid',
+      gallerySettings: {
+        spacing: 'normal',
+        photoAnimation: 'fade',
+        gridColumns: { mobile: 2, tablet: 3, desktop: 4 }
+      },
+      headerStyle: 'standard',
+      footerStyle: 'standard',
+      shadowStyle: 'subtle'
+    },
+    isPreset: true
+  },
+
+  darkElegant: {
+    name: 'Dark Elegant',
+    description: 'Dark theme with gold accents',
+    config: {
+      primaryColor: '#c9a961',
+      accentColor: '#e6ddd4',
+      backgroundColor: '#121212',
+      textColor: '#f0ebe5',
+      surfaceColor: '#1e1e1e',
+      surfaceBorderColor: '#333333',
+      mutedTextColor: '#a3a3a3',
+      colorMode: 'dark',
+      fontFamily: 'Playfair Display, serif',
+      headingFontFamily: 'Playfair Display, serif',
+      borderRadius: 'lg',
+      galleryLayout: 'grid',
+      headerStyle: 'hero',
+      heroDividerStyle: 'wave',
+      gallerySettings: {
+        spacing: 'relaxed',
+        photoAnimation: 'scale',
+        photoShape: 'rounded',
+        heroOverlayOpacity: 0.4
+      },
+      footerStyle: 'minimal',
+      shadowStyle: 'subtle'
+    },
+    isPreset: true
+  },
+
+  darkModern: {
+    name: 'Dark Modern',
+    description: 'Dark theme with blue accents',
+    config: {
+      primaryColor: '#3b82f6',
+      accentColor: '#1e40af',
+      backgroundColor: '#0a0a0a',
+      textColor: '#f5f5f5',
+      surfaceColor: '#171717',
+      surfaceBorderColor: '#262626',
+      mutedTextColor: '#a3a3a3',
+      colorMode: 'dark',
+      fontFamily: 'Inter, sans-serif',
+      borderRadius: 'sm',
+      galleryLayout: 'masonry',
+      gallerySettings: {
+        spacing: 'tight',
+        photoAnimation: 'fade',
+        masonryMode: 'columns',
+        masonryGutter: 16
+      },
+      headerStyle: 'minimal',
+      footerStyle: 'minimal',
+      shadowStyle: 'normal'
+    },
+    isPreset: true
+  },
+
+  galleryPremium: {
+    name: 'Gallery Premium (Beta)',
+    description: 'Clean light theme with elegant serif typography and masonry grid',
+    config: {
+      primaryColor: '#18181b',
+      accentColor: '#ef4444',
+      backgroundColor: '#ffffff',
+      textColor: '#18181b',
+      surfaceColor: '#ffffff',
+      surfaceBorderColor: '#f4f4f5',
+      mutedTextColor: '#71717a',
+      colorMode: 'light',
+      fontFamily: 'Inter, sans-serif',
+      headingFontFamily: "'Playfair Display', serif",
+      borderRadius: 'sm',
+      galleryLayout: 'gallery-premium',
+      gallerySettings: {
+        spacing: 'normal',
+        photoAnimation: 'fade'
+      },
+      headerStyle: 'none',
+      footerStyle: 'minimal',
+      shadowStyle: 'subtle'
+    },
+    isPreset: true
+  },
+
+  galleryStory: {
+    name: 'Gallery Story (Beta)',
+    description: 'Dark cinematic theme with gold accents and scene-based sections',
+    config: {
+      primaryColor: '#c9a961',
+      accentColor: '#c9a961',
+      backgroundColor: '#0d0d0d',
+      textColor: '#f2f2f2',
+      surfaceColor: '#1a1a1a',
+      surfaceBorderColor: '#262626',
+      mutedTextColor: '#a3a3a3',
+      colorMode: 'dark',
+      fontFamily: 'Inter, sans-serif',
+      headingFontFamily: "'Playfair Display', serif",
+      borderRadius: 'sm',
+      galleryLayout: 'gallery-story',
+      gallerySettings: {
+        spacing: 'normal',
+        photoAnimation: 'fade'
+      },
+      headerStyle: 'none',
+      footerStyle: 'minimal',
+      shadowStyle: 'subtle'
+    },
+    isPreset: true
   }
 };