/*-----------------------------------------------------------------------------
 * Theme System
 * All themeable CSS variables are defined here. Themes override these values
 * using [data-theme="name"] selectors.
 *
 * To add a new theme:
 * 1. Add a new [data-theme="themename"] block below
 * 2. Add the theme name to AVAILABLE_THEMES in includes/config.php
 *-----------------------------------------------------------------------------
 */

/*-----------------------------------------------------------------------------
 * Default Theme (Light with purple accent)
 *-----------------------------------------------------------------------------
 */
:root {
   /* Core backgrounds */
   --bg-page: #fafafa;
   --bg-header: #d9d9d9;
   --bg-card: white;
   --bg-card-alt: #f8f8f8;
   --bg-hover: #f2f2f2;
   
   /* Text colors */
   --text-primary: #333;
   --text-secondary: #666;
   --text-muted: #999;
   --text-on-accent: white;
   
   /* Accent colors */
   --accent-color: #6a5acd;
   --accent-color-hover: #5548a4;
   --accent-color-light: #e8e5f7;
   
   /* Borders */
   --border-light: #eee;
   --border-medium: #ddd;
   
   /* Overlays */
   --overlay-backdrop: rgba(0, 0, 0, 0.5);
   --overlay-dark: rgba(0, 0, 0, 0.6);
   --overlay-light: rgba(255, 255, 255, 0.15);
   
   /* Shadows */
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.15);
   
   /* Element Typography - Body/default text */
   --body-font: 'Montserrat', Arial, sans-serif;
   --body-size: 0.875rem;   /* 14px */
   --body-weight: 300;
   
   /* Element Typography - Main menu */
   --menu-font: 'Montserrat', Arial, sans-serif;
   --menu-size: 0.875rem;   /* 14px */
   --menu-weight: 300;
   
   /* Element Typography - Buttons */
   --button-font: inherit;
   --button-size: 1rem;     /* 16px */
   --button-weight: 400;
   --button-sm-size: 0.75rem;  /* 12px */
   
   /* Element Typography - Form inputs */
   --input-font: inherit;
   --input-size: 1rem;      /* 16px */
   --input-weight: 400;
   
   /* Element Typography - Section headers */
   --section-header-font: inherit;
   --section-header-size: 1rem;  /* 16px */
   --section-header-weight: 500;
   
   /* Element Typography - Popups/dropdowns */
   --popup-font: inherit;
   --popup-size: 0.8125rem; /* 13px */
   --popup-weight: 400;
   
   /* Element Typography - Titles */
   --title-font: 'Montserrat', Arial, sans-serif;
   --title-size: 1.25rem;   /* 20px */
   --title-weight: 300;
   
   /* Element Typography - Hero titles */
   --hero-font: 'Montserrat', Arial, sans-serif;
   --hero-size: 1.75rem;    /* 28px */
   --hero-weight: 300;
   
   /* Element Typography - Labels (small text) */
   --label-font: inherit;
   --label-size: 0.75rem;   /* 12px */
   --label-weight: 400;
   
   /* Icon sizes */
   --icon-sm: 1rem;         /* 16px - inline icons */
   --icon-md: 1.25rem;      /* 20px - button icons */
   --icon-lg: 2.5rem;       /* 40px - feature icons */
   
   /* Special colors */
   --like-color: #ef4444;
   --success-color: #28a745;
   --warning-color: #f0ad4e;
   --error-color: #dc3545;
   
   /* Layout (non-themeable but consolidated here) */
   --main-width: 1200px;
   --photo-max-width: 1600px;
   --gallery-gap: 5px;
   --gallery-row-height: 300px;
}

/*-----------------------------------------------------------------------------
 * Ocean Theme (Light with blue accent)
 *-----------------------------------------------------------------------------
 */
[data-theme="ocean"] {
   /* Core backgrounds */
   --bg-page: #f0f7ff;
   --bg-header: #cce5ff;
   --bg-card: white;
   --bg-card-alt: #e8f4ff;
   --bg-hover: #d4e9ff;
   
   /* Accent colors */
   --accent-color: #0077b6;
   --accent-color-hover: #005f8a;
   --accent-color-light: #e0f2fe;
   
   /* Borders */
   --border-light: #d0e8ff;
   --border-medium: #b8d9f5;
}

/*-----------------------------------------------------------------------------
 * Forest Theme (Light with green accent)
 *-----------------------------------------------------------------------------
 */
[data-theme="forest"] {
   /* Core backgrounds */
   --bg-page: #f0f7f4;
   --bg-header: #c8e6c9;
   --bg-card: white;
   --bg-card-alt: #e8f5e9;
   --bg-hover: #d5ead6;
   
   /* Accent colors */
   --accent-color: #2d6a4f;
   --accent-color-hover: #1b4332;
   --accent-color-light: #d8f3dc;
   
   /* Borders */
   --border-light: #c8e6c9;
   --border-medium: #a5d6a7;
}

/*-----------------------------------------------------------------------------
 * Dark Theme
 *-----------------------------------------------------------------------------
 */
[data-theme="dark"] {
   /* Core backgrounds */
   --bg-page: #1a1a1a;
   --bg-header: #2d2d2d;
   --bg-card: #2a2a2a;
   --bg-card-alt: #333;
   --bg-hover: #3a3a3a;
   
   /* Text colors */
   --text-primary: #e0e0e0;
   --text-secondary: #aaa;
   --text-muted: #777;
   --text-on-accent: white;
   
   /* Accent colors - lighter purple for dark mode */
   --accent-color: #8b7fd4;
   --accent-color-hover: #a599e0;
   --accent-color-light: #3d3a5c;
   
   /* Borders */
   --border-light: #3a3a3a;
   --border-medium: #4a4a4a;
   
   /* Overlays */
   --overlay-backdrop: rgba(0, 0, 0, 0.7);
   --overlay-dark: rgba(0, 0, 0, 0.8);
   --overlay-light: rgba(255, 255, 255, 0.1);
   
   /* Shadows - more subtle in dark mode */
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="modern"] {
   /* Modern theme uses Inter font family */
   --body-font: 'Inter', system-ui, sans-serif;
   --body-weight: 400;
   --menu-font: 'Inter', system-ui, sans-serif;
   --menu-weight: 400;
   --title-font: 'Inter', system-ui, sans-serif;
   --title-weight: 500;
   --hero-font: 'Inter', system-ui, sans-serif;
   --hero-weight: 500;
   --button-weight: 500;
   --section-header-weight: 600;
}