/* =============================================
   DARK MODE TOGGLE BUTTON - In Header (v2.0)
   Typography and colors now handled by:
   - reading-fonts.css
   - reading-light-mode.css
   - reading-dark-mode.css
   ============================================= */

/* ===== DARK MODE TOGGLE IN HEADER ===== */
.theme-toggle {
  position: relative;
  top: auto;
  right: auto;
  z-index: 2;
  background: var(--bg-primary, #ffffff);
  border: 2px solid var(--border-light, #E5E5E5);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none;
  font-size: 1.1rem;
  user-select: none;
  margin-left: 8px;
  flex-shrink: 0;
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

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

.theme-toggle::before {
  content: "☀️";
}

:root[data-theme="dark"] .theme-toggle::before {
  content: "🌙";
}

/* ===== MOBILE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .theme-toggle {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    margin-left: 6px;
  }
}

/* ===== SMOOTH TRANSITIONS FOR THEME SWITCHING ===== */
* {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease;
}