/* White-Label Theme Variables - Easy Customization */
:root {
  /* Brand Colors - Easily customizable */
  --primary-color: #4F46E5;
  --primary-dark: #3730A3;
  --secondary-color: #10B981;
  --accent-color: #F59E0B;

  /* Text Colors */
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-light: #9CA3AF;
  --text-white: #FFFFFF;

  /* Background Colors - Soft and Neutral */
  --bg-primary: #FFFFFF;
  --bg-secondary: hsl(120 30% 92%);
  --bg-tertiary: hsl(120 20% 95%);
  --bg-quaternary: hsl(120 15% 90%);
  --bg-dark: #1F2937;
  --bg-gradient: linear-gradient(135deg, hsl(103 89% 29%), hsl(103 89% 35%));
  --bg-gradient-subtle: linear-gradient(135deg, hsl(103 89% 29% / 0.03), hsl(120 55% 55% / 0.02));
  --bg-gradient-reverse: linear-gradient(135deg, hsl(103 89% 35%), hsl(103 89% 29%));

  /* Section Backgrounds - Light and Clean */
  --bg-section-1: #FFFFFF;
  --bg-section-2: hsl(120 30% 96%);
  --bg-section-3: hsl(48 38% 98%);
  --bg-section-4: hsl(120 20% 97%);
  --bg-section-5: #FFFFFF;

  /* Feature section background for contrast - Softer */
  --bg-features: linear-gradient(135deg, hsl(120 30% 96%), hsl(48 38% 98%));

  /* Card gradient backgrounds - clean header-style gradients */
  --card-gradient-testimonial: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  --card-gradient-pricing: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  --card-gradient-premium: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
  --card-gradient-feature: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  /* Individual section backgrounds now controlled per-section via editor */

  /* Professional Gradients - Soft and Premium */
  --bg-hero: linear-gradient(135deg, hsl(48 38% 97%), hsl(145 40% 88%));
  --bg-cta: linear-gradient(135deg, hsl(103 89% 29%), hsl(103 89% 35%));
  --bg-footer: linear-gradient(135deg, hsl(152 88% 15%), hsl(103 89% 29%));
  --bg-testimonial: linear-gradient(135deg, hsl(120 30% 92%), hsl(120 20% 95%));
  --bg-pricing: linear-gradient(135deg, hsl(48 38% 97%), hsl(120 30% 92%));

  /* Modern Gradient Collection */
  --bg-ocean: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --bg-sunset: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
  --bg-forest: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
  --bg-galaxy: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  --bg-coral: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
  --bg-mint: linear-gradient(135deg, #48c9b0 0%, #96e6a1 100%);
  --bg-lavender: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --bg-royal: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --bg-peach: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  --bg-cosmic: linear-gradient(135deg, #ff0099 0%, #493240 100%);
  --bg-dawn: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --bg-arctic: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  --bg-emerald: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --bg-flame: linear-gradient(135deg, #ee5a24 0%, #feca57 100%);
  --bg-violet: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* Additional gradients for new themes */
  --bg-neon: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  --bg-golden: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  --bg-earth: linear-gradient(135deg, #8B4513 0%, #D2691E 100%);
  --bg-watercolor: linear-gradient(135deg, #B19CD9 0%, #FFB3BA 100%);
  --bg-cyber: linear-gradient(135deg, #667eea 0%, #4ecdc4 100%);

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
}

/* Dark Mode Support - DISABLED for consistent light theme */
/* Funnel pages should always use light, clean backgrounds for better readability */
/* @media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --bg-primary: #1F2937;
    --bg-secondary: #111827;
    --bg-tertiary: #0F172A;
    --bg-quaternary: #020617;
  }
} */

/* Utility Classes for Background Variations */
/* Individual section backgrounds are now controlled via the editor */

/* Professional Backgrounds */
.bg-hero { background: var(--bg-hero) !important; color: white; }
.bg-cta { background: var(--bg-cta) !important; color: white; }
.bg-footer { background: var(--bg-footer) !important; color: white; }
.bg-testimonial { background: var(--bg-testimonial) !important; color: white; }
.bg-pricing { background: var(--bg-pricing) !important; color: white; }

/* Modern Gradient Backgrounds */
.bg-ocean { background: var(--bg-ocean) !important; color: white; }
.bg-sunset { background: var(--bg-sunset) !important; color: #333; }
.bg-forest { background: var(--bg-forest) !important; color: white; }
.bg-galaxy { background: var(--bg-galaxy) !important; color: white; }
.bg-coral { background: var(--bg-coral) !important; color: white; }
.bg-mint { background: var(--bg-mint) !important; color: #333; }
.bg-lavender { background: var(--bg-lavender) !important; color: #333; }
.bg-royal { background: var(--bg-royal) !important; color: white; }
.bg-peach { background: var(--bg-peach) !important; color: #333; }
.bg-cosmic { background: var(--bg-cosmic) !important; color: white; }
.bg-dawn { background: var(--bg-dawn) !important; color: white; }
.bg-arctic { background: var(--bg-arctic) !important; color: white; }
.bg-emerald { background: var(--bg-emerald) !important; color: white; }
.bg-flame { background: var(--bg-flame) !important; color: white; }
.bg-violet { background: var(--bg-violet) !important; color: white; }

/* New Theme Gradient Backgrounds */
.bg-neon { background: var(--bg-neon) !important; color: white; }
.bg-golden { background: var(--bg-golden) !important; color: #8B4513; }
.bg-earth { background: var(--bg-earth) !important; color: white; }
.bg-watercolor { background: var(--bg-watercolor) !important; color: #4A4A4A; }
.bg-cyber { background: var(--bg-cyber) !important; color: white; }