/* ==============================================
   Theme — Transition helpers for theme switching
   ============================================== */

body,
.header,
.announcement-bar,
.hero,
.highlights,
.products-section,
.video-section,
.collections-section,
.reviews-section,
.footer,
.product-card,
.review-card,
.collection-card {
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

/* Theme toggle button */
.theme-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
  cursor: pointer;
}

.theme-toggle:hover {
  background-color: var(--bg-elevated);
  transform: rotate(15deg);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

/* Dark theme: show moon */
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg); }
.theme-toggle .icon-sun  { opacity: 0; transform: rotate(-90deg); }

/* Light theme: show sun */
[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg); }
[data-theme="light"] .theme-toggle .icon-sun  { opacity: 1; transform: rotate(0deg); }