/* =================================================================
   LIGHT MODE STYLESHEET
   Near-white and near-black design with subtle red accents
   ================================================================= */

/* =================================================================
   CSS VARIABLES - LIGHT MODE
   ================================================================= */
body.light-mode {
  /* Background Colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #fafafa;
  --color-bg-tertiary: #f5f5f5;
  
  /* Surface Colors */
  --color-surface-dark: rgba(0, 0, 0, 0.03);
  --color-surface-medium: rgba(0, 0, 0, 0.05);
  --color-surface-light: rgba(0, 0, 0, 0.02);
  --color-surface-lighter: rgba(0, 0, 0, 0.04);
  
  /* Text Colors */
  --color-text-primary: #0a0a0a;
  --color-text-secondary: #404040;
  --color-text-tertiary: #737373;
  --color-text-muted: #a3a3a3;
  
  /* Red Accent Colors - minimal usage */
  --color-red-primary: #dc2626;
  --color-red-secondary: #b91c1c;
  --color-red-light: rgba(0, 0, 0, 0.05);
  --color-red-subtle: transparent;
  
  /* Border Colors */
  --color-border-primary: rgba(0, 0, 0, 0.12);
  --color-border-secondary: rgba(0, 0, 0, 0.08);
  --color-border-light: rgba(0, 0, 0, 0.06);
  --color-border-red: rgba(0, 0, 0, 0.15);
  
  /* Shadow Definitions - NO RED GLOWS */
  --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.1);
  --shadow-red: transparent;
  --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* =================================================================
   BASE STYLES
   ================================================================= */
body.light-mode {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* =================================================================
   HEADER
   ================================================================= */
body.light-mode header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--color-border-light);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-xs);
}

body.light-mode header nav a {
  color: var(--color-text-secondary);
  transition: color 0.3s ease;
}

body.light-mode header nav a:hover {
  color: var(--color-red-primary);
}

body.light-mode header .logo {
  color: var(--color-text-primary);
}

/* Mobile menu */
body.light-mode [data-mobile-menu] {
  background: rgba(255, 255, 255, 0.98) !important;
  border-left: 1px solid var(--color-border-light) !important;
  backdrop-filter: blur(20px);
}

body.light-mode [data-mobile-menu] .border-b.border-red-900\/20 {
  border-color: var(--color-border-light) !important;
}

body.light-mode [data-mobile-menu] .border-t.border-red-900\/20 {
  border-color: var(--color-border-light) !important;
}

body.light-mode [data-mobile-menu] a {
  color: var(--color-text-secondary) !important;
}

body.light-mode [data-mobile-menu] a:hover {
  color: var(--color-red-primary) !important;
  background: var(--color-surface-light) !important;
}

body.light-mode [data-mobile-menu] .text-white {
  color: var(--color-text-primary) !important;
}

body.light-mode [data-mobile-menu] .text-red-400 {
  color: var(--color-red-primary) !important;
}

body.light-mode [data-mobile-menu] .bg-red-950\/20 {
  background: var(--color-surface-light) !important;
}

/* Mobile menu close button */
body.light-mode [data-mobile-menu-close] {
  color: var(--color-red-primary) !important;
}

/* Mobile menu LEVELZ branding */
body.light-mode [data-mobile-menu] .bg-gradient-to-r.from-red-400.to-rose-500.bg-clip-text.text-transparent {
  background: linear-gradient(to right, var(--color-red-primary), var(--color-red-secondary)) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Mobile menu reserve button */
body.light-mode [data-mobile-menu] .btn {
  background: linear-gradient(to right, var(--color-red-primary), var(--color-red-secondary)) !important;
  color: white !important;
}

/* Mobile menu overlay */
body.light-mode [data-mobile-menu-overlay] {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* =================================================================
   SECTIONS & BACKGROUNDS
   ================================================================= */
body.light-mode section {
  background: var(--color-bg-primary);
}

body.light-mode .bg-black {
  background-color: var(--color-bg-secondary) !important;
}

body.light-mode .bg-gradient-to-b {
  background: linear-gradient(to bottom, #ffffff, #fafafa) !important;
}

/* Animated backgrounds - remove all red/pink effects */
body.light-mode .bg-gradient-radial {
  background: transparent !important;
}

body.light-mode .bg-red-600\/10,
body.light-mode .bg-rose-600\/10 {
  background-color: transparent !important;
}

body.light-mode .bg-red-500\/10,
body.light-mode .bg-rose-500\/10 {
  background-color: rgba(220, 38, 38, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.18) !important;
  color: var(--color-text-secondary) !important;
}

/* Blur effects - remove completely */
body.light-mode .blur-\[120px\],
body.light-mode .blur-\[100px\] {
  display: none;
}

/* =================================================================
   CARDS
   ================================================================= */
body.light-mode .card {
  background: var(--color-bg-primary) !important;
  border: 1px solid var(--color-border-secondary) !important;
  box-shadow: var(--shadow-sm);
  backdrop-filter: none !important;
  transition: all 0.3s ease;
}

body.light-mode .card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-border-primary);
}

body.light-mode .card-elevated {
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-md);
}

body.light-mode .card-elevated:hover {
  box-shadow: var(--shadow-lg);
}

body.light-mode .card-highlight {
  background: var(--color-bg-primary) !important;
  border-color: var(--color-border-primary) !important;
  box-shadow: var(--shadow-md);
}

body.light-mode .card::before {
  display: none;
}

body.light-mode .card:focus-within,
body.light-mode .card-elevated:focus-within {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--color-border-primary) !important;
}

/* Location cards */
body.light-mode .location-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
}

body.light-mode .location-card:hover {
  border-color: var(--color-border-primary);
}

/* Info cards */
body.light-mode .info-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid var(--color-border-secondary) !important;
  box-shadow: var(--shadow-md);
}

/* =================================================================
   TYPOGRAPHY
   ================================================================= */
body.light-mode .text-white {
  color: var(--color-text-primary) !important;
}

body.light-mode .text-gray-400,
body.light-mode .text-gray-300 {
  color: var(--color-text-secondary) !important;
}

body.light-mode .text-gray-500 {
  color: var(--color-text-tertiary) !important;
}

body.light-mode .text-gray-600 {
  color: var(--color-text-tertiary) !important;
}

/* Gradient text - keep red accent */
body.light-mode .bg-gradient-to-br.from-red-400,
body.light-mode .bg-gradient-to-r.from-red-500,
body.light-mode .bg-gradient-to-br.from-red-500 {
  background: linear-gradient(135deg, var(--color-red-primary), var(--color-red-secondary)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Headings */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
  color: var(--color-text-primary);
}

/* =================================================================
   BORDERS
   ================================================================= */
body.light-mode .border-red-900\/20,
body.light-mode .border-red-900\/30,
body.light-mode .border-red-900\/50 {
  border-color: var(--color-border-secondary) !important;
}

body.light-mode .border-white\/10,
body.light-mode .border-white\/20 {
  border-color: var(--color-border-light) !important;
}

/* =================================================================
   BACKGROUNDS WITH TRANSPARENCY
   ================================================================= */
body.light-mode .bg-white\/5 {
  background-color: var(--color-surface-light) !important;
}

body.light-mode .bg-white\/10 {
  background-color: var(--color-surface-lighter) !important;
}

body.light-mode .bg-black\/40,
body.light-mode .bg-black\/50,
body.light-mode .bg-black\/60,
body.light-mode .bg-black\/70 {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

body.light-mode .bg-black\/80,
body.light-mode .bg-black\/90 {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* =================================================================
   BADGES & LABELS
   ================================================================= */
body.light-mode .bg-gradient-to-r.from-red-950\/40,
body.light-mode .bg-gradient-to-br.from-red-950 {
  background: var(--color-surface-medium) !important;
  border-color: var(--color-border-secondary) !important;
}

body.light-mode .badge {
  background: var(--color-surface-medium);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-light);
}

/* =================================================================
   FORMS & INPUTS
   ================================================================= */
body.light-mode .form-field label {
  color: var(--color-text-secondary) !important;
}

body.light-mode .form-field input,
body.light-mode .form-field select,
body.light-mode .form-field textarea {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid var(--color-border-primary) !important;
  color: var(--color-text-primary) !important;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.05) !important;
}

body.light-mode .form-field input:focus,
body.light-mode .form-field select:focus,
body.light-mode .form-field textarea:focus {
  border-color: rgba(220, 38, 38, 0.4) !important;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.06) !important;
}

body.light-mode .form-field input::placeholder,
body.light-mode .form-field textarea::placeholder {
  color: rgba(107, 114, 128, 0.7) !important;
}

body.light-mode .form-error {
  color: var(--color-red-primary) !important;
}

body.light-mode .btn-primary[disabled] {
  background: rgba(220, 38, 38, 0.6) !important;
  color: white !important;
}

/* =================================================================
   BUTTONS
   ================================================================= */
body.light-mode .btn {
  box-shadow: var(--shadow-sm);
}

body.light-mode .btn:hover {
  box-shadow: var(--shadow-md);
}

body.light-mode .btn-secondary {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
}

body.light-mode .btn-secondary:hover {
  background: var(--color-surface-light);
  border-color: var(--color-red-primary);
}

/* Red gradient buttons - keep the red */
body.light-mode .bg-gradient-to-br.from-red-600,
body.light-mode .bg-gradient-to-r.from-red-500.to-rose-600 {
  background: linear-gradient(135deg, var(--color-red-primary), var(--color-red-secondary)) !important;
}

/* =================================================================
   HERO SECTION
   ================================================================= */
body.light-mode .hero-section {
  /* background: var(--color-bg-primary); */
}

/* Mobile hero background */
body.light-mode .hero-section .absolute.inset-0.-z-10 img {
  opacity: 0.12;
  filter: grayscale(0.2);
}

body.light-mode .hero-section .absolute.inset-0.-z-10 .bg-black\/50 {
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.95), 
    rgba(250, 250, 250, 0.9)) !important;
}

/* Hero stats - remove red glow */
body.light-mode .stat-glow {
  background: transparent;
}

body.light-mode .stat-item {
  border-right: 1px solid var(--color-border-light);
}

/* =================================================================
   LOCATION CARDS
   ================================================================= */
body.light-mode .location-card .rounded-2xl {
  border: 1px solid var(--color-border-light);
}

body.light-mode .location-card img {
  filter: brightness(1.05) contrast(1.05);
}

/* =================================================================
   TESTIMONIALS
   ================================================================= */
body.light-mode .testimonial-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  box-shadow: var(--shadow-sm);
}

body.light-mode .testimonial-card:hover {
  box-shadow: var(--shadow-md);
}

/* =================================================================
   FOOTER
   ================================================================= */
body.light-mode footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-light);
}

body.light-mode footer a {
  color: var(--color-text-secondary);
}

body.light-mode footer a:hover {
  color: var(--color-red-primary);
}

body.light-mode footer .text-gray-400 {
  color: var(--color-text-tertiary) !important;
}

/* =================================================================
   FORMS & INPUTS
   ================================================================= */
body.light-mode input,
body.light-mode textarea,
body.light-mode select {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-secondary);
  color: var(--color-text-primary);
}

body.light-mode input:focus,
body.light-mode textarea:focus,
body.light-mode select:focus {
  border-color: var(--color-red-primary);
  box-shadow: 0 0 0 3px var(--color-red-light);
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
  color: var(--color-text-muted);
}

/* =================================================================
   MODALS
   ================================================================= */
body.light-mode .modal {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-xl);
}

body.light-mode .modal-overlay {
  background: rgba(0, 0, 0, 0.4);
}

/* =================================================================
   ICONS & SVG
   ================================================================= */
body.light-mode svg {
  color: currentColor;
}

body.light-mode .icon-red {
  color: var(--color-red-primary);
}

/* =================================================================
   DIVIDERS
   ================================================================= */
body.light-mode hr {
  border-color: var(--color-border-light);
}

body.light-mode .h-1.bg-gradient-to-r {
  background: linear-gradient(to right, var(--color-red-primary), transparent) !important;
}

/* =================================================================
   UTILITY CLASSES
   ================================================================= */
body.light-mode .glass {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-border-light);
  backdrop-filter: blur(12px);
}

body.light-mode .shadow-glow {
  box-shadow: var(--shadow-md);
}

/* =================================================================
   ANIMATIONS - Keep minimal
   ================================================================= */
body.light-mode .luxury-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

body.light-mode .luxury-shine {
  position: relative;
  overflow: hidden;
}

body.light-mode .luxury-shine::before {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent);
}

/* =================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================= */

/* Mobile Menu Light Mode Styles */
body.light-mode .mobile-menu {
  background: rgba(255, 255, 255, 0.98);
  border-left: 1px solid var(--color-border-light);
}

body.light-mode .mobile-menu nav a {
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-light);
}

body.light-mode .mobile-menu nav a:hover {
  color: var(--color-red-primary);
  background: var(--color-surface-light);
}

body.light-mode .mobile-menu .text-red-500 {
  color: var(--color-text-primary) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  body.light-mode header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    height: 80px;
  }
  
  /* Ensure content doesn't overlap header on mobile */
  body.light-mode main, 
  body.light-mode section:first-of-type {
    padding-top: 80px;
  }
  
  body.light-mode .card {
    box-shadow: var(--shadow-xs);
  }
  
  /* Mobile button improvements */
  body.light-mode .btn {
    min-height: 44px;
    touch-action: manipulation;
  }
  
  /* Mobile typography adjustments */
  body.light-mode .heading-primary {
    /* font-size: 2.25rem; */
    line-height: 1.2;
  }
  
  body.light-mode .heading-secondary {
    font-size: 1.875rem;
    line-height: 1.3;
  }
  
  /* Mobile hero section */
  body.light-mode .hero-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  /* Mobile stats grid */
  body.light-mode .stats-grid {
    gap: 1.5rem;
  }
  
  /* Mobile location cards */
  body.light-mode .location-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  body.light-mode .heading-primary {
    /* font-size: 2rem; */
  }
  
  body.light-mode .heading-secondary {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  }
  
  body.light-mode .btn-lg {
    padding: 1rem 2rem;
    min-height: 48px;
  }
}

@media (max-width: 768px) {
  body.light-mode header {
    background: rgba(255, 255, 255, 0.98);
  }
  
  body.light-mode .card {
    box-shadow: var(--shadow-xs);
  }
}

/* =================================================================
   COMPLETE GLOW ELIMINATION - Override all dark mode glows
   ================================================================= */

/* Remove all red/pink glow effects completely */
body.light-mode .shadow-glow,
body.light-mode .glow,
body.light-mode .btn-glow,
body.light-mode .card-glow,
body.light-mode .stat-glow {
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

/* Remove all blur effects that might contain red */
body.light-mode [class*="blur-"],
body.light-mode .blur-sm,
body.light-mode .blur-md,
body.light-mode .blur-lg,
body.light-mode .blur-xl {
  filter: none !important;
  backdrop-filter: none !important;
}

/* Remove all red gradient backgrounds */
body.light-mode [class*="bg-red-"],
body.light-mode [class*="bg-rose-"],
body.light-mode [class*="from-red-"],
body.light-mode [class*="to-red-"],
body.light-mode [class*="via-red-"] {
  background: transparent !important;
}

/* Remove all animations that might contain glow */
body.light-mode .animate-pulse,
body.light-mode .animate-ping,
body.light-mode [class*="animate-glow"],
body.light-mode [class*="animate-pulse"] {
  animation: none !important;
}

/* Override any remaining red shadows */
body.light-mode * {
  box-shadow: none !important;
}

/* Re-apply only clean shadows where needed */
body.light-mode .card {
  box-shadow: var(--shadow-sm) !important;
}

body.light-mode .card:hover {
  box-shadow: var(--shadow-md) !important;
}

body.light-mode header {
  box-shadow: var(--shadow-xs) !important;
}

body.light-mode .btn {
  box-shadow: var(--shadow-sm) !important;
}

body.light-mode .modal {
  box-shadow: var(--shadow-xl) !important;
}

/* =================================================================
   HERO BACKGROUND - LIGHT MODE INVERSION
   ================================================================= */

/* Light mode hero background with inverted effects */
body.light-mode .hero-bg-container::before {
  background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9)), 
                    url('https://images.pexels.com/photos/1319460/pexels-photo-1319460.jpeg?auto=compress&cs=tinysrgb&w=1200');
  filter: blur(1px) brightness(1.11) saturate(0) !important;
  
}