/* Light theme CSS variable overrides */
.light {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #4b5563;
  --border-color: #e5e7eb;
  --bg-overlay: rgba(0, 0, 0, 0.06);
  --bg-hover: rgba(0, 0, 0, 0.06);
  --navbar-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.93),
    rgba(255, 255, 255, 0.97)
  );
  --navbar-border: #e5e7eb;
  --card-bg: #f9fafb;
  --card-border: #e5e7eb;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  --button-border: rgba(0, 0, 0, 0.1);
  --button-bg: rgba(0, 0, 0, 0.03);
  --button-hover: rgba(0, 0, 0, 0.06);
  --pill-bg: rgba(0, 0, 0, 0.06);
  --pill-border: rgba(0, 0, 0, 0.12);
  --accordion-border: #e5e7eb;
  --accordion-header-bg: rgba(0, 0, 0, 0.03);
  --accordion-content-bg: #ffffff;
  --menu-bg: #ffffff;
  --menu-border: #e5e7eb;
  --menu-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
  --backdrop-bg: rgba(0, 0, 0, 0.2);
  --lang-menu-bg: #ffffff;
  --kpi-bg: rgba(0, 0, 0, 0.03);
  --kpi-border: #e5e7eb;
}

.light #cta-banner {
  color: #ffffff;
}

.light .hero .blob1 {
  opacity: 0.3;
}

.light .hero .blob2 {
  opacity: 0.1;
}

.light .kpi.purple {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.light .kpi.cyan {
  background: rgba(23, 194, 245, 0.1);
  border: 1px solid rgba(23, 194, 245, 0.2);
}

.light .kpi.green {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.light pre {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.light .price.highlighted {
  outline: 1px solid rgba(139, 92, 246, 0.2);
}

.light .benefit-card:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
}

.light .menu-header .close-btn:focus-visible {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.1),
    0 0 0 4px #4397f6;
}

.light .menu-link:focus-visible {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.1),
    0 0 0 4px #4397f6;
}

.light .mobile-menu::backdrop {
  background: rgba(0, 0, 0, 0.2);
}

.light .kpi.purple {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.light .kpi.cyan {
  background: rgba(23, 194, 245, 0.1);
  border: 1px solid rgba(23, 194, 245, 0.2);
}

.light .kpi.green {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

@media (prefers-reduced-transparency: reduce) {
  .light .mobile-menu::backdrop {
    background: rgba(0, 0, 0, 0.3);
  }
}