/* ============================================
   🌗 theme.css — Theme toggle and variables
   ============================================ */

/* 🌙 Dark mode variables (overrides defined in base.css) */
body.dark {
  --bg: #121212;
  --text: #e0e0e0;
  --primary: #1e88e5;
  --accent: #bb86fc;
  --button-bg: #1f1f1f;
  --button-text: var(--accent);
}

/* 🌈 Theme toggle switch container */
.theme-switch {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Hide native checkbox */
.theme-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 🔘 Custom switch design */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

/* Background slider track */
.switch::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--accent);
  border-radius: 30px;
  transition: background 0.3s;
}

/* Sliding circle */
.slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.4s;
  z-index: 2;
}

/* Move circle when checked */
input:checked + .switch .slider {
  transform: translateX(30px);
}

/* ☀️ and 🌙 icons inside switch */
.icon {
  position: absolute;
  top: 4px;
  font-size: 18px;
  z-index: 1;
  color: #fff;
}

.sun { left: 8px; }
.moon { right: 8px; }