/* MG Volantes — Sistema de temas (claro/oscuro) */

/* —— Variables tema claro —— */
[data-theme="light"] {
  --color-bg: #f4f5f9;
  --color-bg-elevated: #ffffff;
  --color-surface: #eaecf4;
  --color-surface-2: #dde1ef;
  --color-text: #3d4460;
  --color-text-muted: #6a738f;
  --color-heading: #0d1221;
  --color-accent: #b8860b;
  --color-accent-soft: rgba(184, 134, 11, 0.15);
  --color-accent-hover: #9a7200;
  --color-blue-soft: rgba(43, 63, 146, 0.12);
  --color-line: rgba(0, 0, 0, 0.09);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* —— Overrides específicos para el tema claro —— */
[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -40%, var(--color-blue-soft), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 20%, rgba(108, 64, 146, 0.05), transparent 50%);
}

[data-theme="light"] .hero-carousel__btn {
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-heading);
}

[data-theme="light"] .hero-carousel__btn:hover {
  background: rgba(184, 134, 11, 0.9);
  color: #fff;
}

[data-theme="light"] .gallery-card__media {
  background: radial-gradient(ellipse at center, #cdd2e6 0%, var(--color-bg) 70%);
}

[data-theme="light"] .btn--ghost:hover {
  color: var(--color-blue);
}

[data-theme="light"] .section--brands {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-elevated) 100%);
}

/* —— Grupo de controles del header (tema + hamburger) —— */
.header-end {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* —— Botón toggle de tema —— */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-heading);
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: var(--color-accent);
  transform: scale(1.1);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Iconos: en oscuro se muestra el sol, en claro se muestra la luna */
.theme-toggle__moon {
  display: none;
}

[data-theme="light"] .theme-toggle__sun {
  display: none;
}

[data-theme="light"] .theme-toggle__moon {
  display: block;
}

/* —— Responsive: Desktop —— */
@media (min-width: 48rem) {
  .header-end {
    order: 3;
  }

  .theme-toggle {
    margin-left: var(--space-sm);
  }

  [data-theme="light"] .hero-carousel__viewport {
    background: var(--color-bg-elevated);
  }

  [data-theme="light"] .hero-carousel__track {
    background: linear-gradient(135deg, #e8ebf5 0%, #d0d5e8 100%);
  }

  .site-nav {
    order: 2;
    margin-left: auto;
  }
}