/* ============================================================
   DARK MODE TOGGLE BUTTON
   ============================================================ */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast),
              border-color var(--duration-fast),
              color var(--duration-fast),
              transform var(--duration-fast);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--color-hover-bg);
  border-color: var(--color-border-strong);
  transform: scale(1.05);
}

.theme-toggle:active { transform: scale(0.95); }

.theme-toggle__icon {
  display: block;
  width: 18px;
  height: 18px;
  transition: opacity var(--duration-fast),
              transform var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1);
  position: absolute;
  color: var(--color-text-primary);
}

/* Moon icon — shown in light mode */
.theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Sun icon — shown in dark mode */
.theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.7);
}

[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.7);
}

/* ============================================================
   GLOBAL THEME TRANSITIONS
   ============================================================ */
body,
.nav,
.footer,
.project-card,
.beh-card,
.stat-card,
.skill-item,
.tool-tag,
.tag,
.btn,
.filter-btn,
.form-input,
.form-textarea,
.contact-link,
.process-step,
.timeline-card,
.cs-stat,
.toc__item,
.award-item,
.about-stat-v2 {
  transition: var(--theme-transition);
}

/* ============================================================
   GLOBAL BACK-TO-TOP BUTTON
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              background-color var(--duration-fast),
              border-color var(--duration-fast),
              color var(--duration-fast),
              box-shadow var(--duration-fast);
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.back-to-top:hover {
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.back-to-top:active {
  transform: translateY(0);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}