/**
 * MMMenu - Accent Colors & Theming System
 * CSS Custom Properties for dynamic theming
 */

/* ============================================================================
   DEFAULT THEME - Purple (Brand Kit)
   ============================================================================ */

:root {
  /* Primary colors */
  --primary-color: #7e42a7;
  --primary-dark: #4a1873;
  --primary-light: #9b59b6;
  --primary-lighter: #b07cc5;
  --primary-contrast: #ffffff;

  /* Secondary colors */
  --secondary-color: #6d527a;
  --secondary-dark: #3d2748;
  --secondary-light: #876993;
  --secondary-lighter: #a183ab;
  --secondary-contrast: #ffffff;

  /* Accent variations (opacity-based) */
  --primary-rgb: 126, 66, 167;
  --primary-rgb-space: 126 66 167;
  --secondary-rgb: 109, 82, 122;
  --primary-alpha-10: rgba(var(--primary-rgb), 0.1);
  --primary-alpha-20: rgba(var(--primary-rgb), 0.2);
  --primary-alpha-30: rgba(var(--primary-rgb), 0.3);
  --primary-alpha-50: rgba(var(--primary-rgb), 0.5);

  /* Hero section controls */
  --hero-overlay-opacity: 0.4;
  --hero-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  --hero-overlay-color: rgba(0, 0, 0, var(--hero-overlay-opacity));

  /* Gradient backgrounds */
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  --gradient-overlay: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  --gradient-subtle: linear-gradient(180deg, var(--background-color) 0%, rgba(var(--primary-rgb), 0.03) 100%);
  --gradient-section: linear-gradient(135deg, rgba(var(--primary-rgb), 0.02) 0%, rgba(var(--secondary-rgb), 0.02) 100%);

  /* Enhanced interaction colors */
  --hover-overlay: rgba(var(--primary-rgb), 0.08);
  --active-overlay: rgba(var(--primary-rgb), 0.15);
  --focus-overlay: rgba(var(--primary-rgb), 0.12);
}

/* ============================================================================
   DARK THEME OVERRIDES
   ============================================================================ */

.dark-theme {
  /* Adjust primary colors for dark mode */
  --primary-color: #b07cc5;
  --primary-dark: #9b59b6;
  --primary-light: #c49fd4;

  /* Adjust secondary colors for dark mode */
  --secondary-color: #a183ab;
  --secondary-dark: #876993;

  /* Hero overlay (lighter in dark mode) */
  --hero-overlay-opacity: 0.6;
  --hero-overlay-color: rgba(0, 0, 0, var(--hero-overlay-opacity));
}

/* ============================================================================
   DARK THEME - IMPROVED CONTRAST
   ============================================================================ */

.dark-theme {
  --primary-rgb-space: 176 124 197;

  /* Enhanced contrast for better readability */
  --primary-alpha-10: rgba(var(--primary-rgb), 0.15);
  --primary-alpha-20: rgba(var(--primary-rgb), 0.25);
  --primary-alpha-30: rgba(var(--primary-rgb), 0.35);

  /* Improved hover states for dark mode */
  --hover-overlay: rgba(var(--primary-rgb), 0.12);
  --active-overlay: rgba(var(--primary-rgb), 0.2);
  --focus-overlay: rgba(var(--primary-rgb), 0.16);

  /* Subtle gradient for dark theme */
  --gradient-subtle: linear-gradient(180deg, var(--background-color) 0%, rgba(var(--primary-rgb), 0.05) 100%);
  --gradient-section: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0%, rgba(var(--secondary-rgb), 0.05) 100%);
}

/* ============================================================================
   DYNAMIC THEME APPLICATION
   Use JavaScript to apply custom colors from restaurant data:

   document.documentElement.style.setProperty('--primary-color', '#custom-color');
   document.documentElement.style.setProperty('--secondary-color', '#custom-color');
   ============================================================================ */