/* ========================================
   Royal Dental Whittier - 6 Theme Layouts
   Each theme defines CSS custom properties
   ======================================== */

/* ---- Theme 1: Royal Classic (Default) ---- */
.theme-royal-classic {
  --color-primary: #2577eb;
  --color-primary-dark: #1e50af;
  --color-primary-light: #dbeffe;
  --color-accent: #eab308;
  --color-accent-dark: #ca8a04;
  --color-theme-dark: #172c54;
  --theme-hero-gradient: linear-gradient(135deg, #172c54 0%, #1e50af 50%, #172c54 100%);
  --theme-dark-bg: #172c54;
  --theme-card-radius: 1rem;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.12);
}

.theme-royal-classic .bg-theme-dark { background-color: #172c54; }
.theme-royal-classic .text-accent { color: #eab308; }

/* ---- Theme 2: Ocean Breeze ---- */
.theme-ocean-breeze {
  --color-primary: #0891b2;
  --color-primary-dark: #155e75;
  --color-primary-light: #cffafe;
  --color-accent: #06b6d4;
  --color-accent-dark: #0e7490;
  --color-theme-dark: #164e63;
  --theme-hero-gradient: linear-gradient(135deg, #164e63 0%, #155e75 50%, #083344 100%);
  --theme-dark-bg: #164e63;
  --theme-card-radius: 1.5rem;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.12);
}

.theme-ocean-breeze .bg-theme-dark { background-color: #164e63; }
.theme-ocean-breeze .text-accent { color: #06b6d4; }

/* Override Tailwind utility colors for ocean theme */
.theme-ocean-breeze .bg-gradient-to-r.from-primary { --tw-gradient-from: #0891b2; }
.theme-ocean-breeze .bg-gradient-to-r.to-primary-dark { --tw-gradient-to: #155e75; }

/* ---- Theme 3: Sunset Warmth ---- */
.theme-sunset-warmth {
  --color-primary: #ea580c;
  --color-primary-dark: #9a3412;
  --color-primary-light: #ffedd5;
  --color-accent: #f59e0b;
  --color-accent-dark: #d97706;
  --color-theme-dark: #431407;
  --theme-hero-gradient: linear-gradient(135deg, #431407 0%, #9a3412 50%, #451a03 100%);
  --theme-dark-bg: #431407;
  --theme-card-radius: 0.75rem;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.12);
}

.theme-sunset-warmth .bg-theme-dark { background-color: #431407; }
.theme-sunset-warmth .text-accent { color: #f59e0b; }

/* ---- Theme 4: Forest Calm ---- */
.theme-forest-calm {
  --color-primary: #15803d;
  --color-primary-dark: #14532d;
  --color-primary-light: #dcfce7;
  --color-accent: #84cc16;
  --color-accent-dark: #65a30d;
  --color-theme-dark: #052e16;
  --theme-hero-gradient: linear-gradient(135deg, #052e16 0%, #14532d 50%, #052e16 100%);
  --theme-dark-bg: #052e16;
  --theme-card-radius: 1.25rem;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.12);
}

.theme-forest-calm .bg-theme-dark { background-color: #052e16; }
.theme-forest-calm .text-accent { color: #84cc16; }

/* ---- Theme 5: Elegant Dark ---- */
.theme-elegant-dark {
  --color-primary: #e11d48;
  --color-primary-dark: #9f1239;
  --color-primary-light: #ffe4e6;
  --color-accent: #fb7185;
  --color-accent-dark: #e11d48;
  --color-theme-dark: #0f172a;
  --theme-hero-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  --theme-dark-bg: #0f172a;
  --theme-card-radius: 0.5rem;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.12);
}

.theme-elegant-dark .bg-theme-dark { background-color: #0f172a; }
.theme-elegant-dark .text-accent { color: #fb7185; }

/* ---- Theme 6: Minimalist White ---- */
.theme-minimalist-white {
  --color-primary: #4f46e5;
  --color-primary-dark: #3730a3;
  --color-primary-light: #e0e7ff;
  --color-accent: #818cf8;
  --color-accent-dark: #6366f1;
  --color-theme-dark: #1e1b4b;
  --theme-hero-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
  --theme-dark-bg: #1e1b4b;
  --theme-card-radius: 1rem;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.12);
}

.theme-minimalist-white .bg-theme-dark { background-color: #1e1b4b; }
.theme-minimalist-white .text-accent { color: #818cf8; }

/* ========================================
   Theme-Aware Hero Backgrounds & Overlays
   ======================================== */

/* Royal Classic */
.theme-royal-classic .hero-bg { background-color: #1a56a8; }
.theme-royal-classic .hero-overlay {
  background: linear-gradient(to right, rgba(21,62,136,0.85), rgba(30,80,175,0.65), rgba(37,119,235,0.35));
}

/* Ocean Breeze */
.theme-ocean-breeze .hero-bg { background-color: #155e75; }
.theme-ocean-breeze .hero-overlay {
  background: linear-gradient(to right, rgba(22,78,99,0.85), rgba(21,94,117,0.65), rgba(8,145,178,0.35));
}

/* Sunset Warmth */
.theme-sunset-warmth .hero-bg { background-color: #9a3412; }
.theme-sunset-warmth .hero-overlay {
  background: linear-gradient(to right, rgba(67,20,7,0.85), rgba(154,52,18,0.65), rgba(234,88,12,0.35));
}

/* Forest Calm */
.theme-forest-calm .hero-bg { background-color: #14532d; }
.theme-forest-calm .hero-overlay {
  background: linear-gradient(to right, rgba(5,46,22,0.85), rgba(20,83,45,0.65), rgba(21,128,61,0.35));
}

/* Elegant Dark */
.theme-elegant-dark .hero-bg { background-color: #1e293b; }
.theme-elegant-dark .hero-overlay {
  background: linear-gradient(to right, rgba(15,23,42,0.85), rgba(30,41,59,0.65), rgba(225,29,72,0.25));
}

/* Minimalist White */
.theme-minimalist-white .hero-bg { background-color: #312e81; }
.theme-minimalist-white .hero-overlay {
  background: linear-gradient(to right, rgba(30,27,75,0.85), rgba(49,46,129,0.65), rgba(79,70,229,0.35));
}

/* ========================================
   Dynamic Color Application via CSS vars
   ======================================== */

/* Buttons and interactive elements */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-primary-dark { color: var(--color-primary-dark) !important; }
.text-accent { color: var(--color-accent) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.ring-primary { --tw-ring-color: var(--color-primary) !important; }

/* Gradient overrides */
.from-primary { --tw-gradient-from: var(--color-primary) !important; }
.to-primary-dark { --tw-gradient-to: var(--color-primary-dark) !important; }

/* Hover states */
.hover\:bg-primary:hover { background-color: var(--color-primary) !important; }
.hover\:bg-primary-dark:hover { background-color: var(--color-primary-dark) !important; }
.hover\:text-primary:hover { color: var(--color-primary) !important; }

/* Focus rings */
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary) !important; }

/* Nav link underline */
.nav-link::after {
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)) !important;
}

/* Theme hero section */
.theme-hero {
  background: var(--theme-hero-gradient);
}

/* Card border radius from theme */
.theme-card {
  border-radius: var(--theme-card-radius);
}

/* Service section dark background */
.theme-services-bg {
  background: var(--theme-dark-bg);
}

/* Accent badges */
.badge-accent {
  background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
  color: var(--color-accent-dark);
}