/* ===========================
   Dark Theme Overrides
   =========================== */
[data-theme="dark"] {
  --color-text: #b0b0b0;
  --color-text-dark: #e0e0e0;
  --color-text-light: rgba(255, 255, 255, 0.9);
  --color-text-light-hover: #fff;
  --color-bg: #1a1a1a;
  --color-bg-dark: #111;
  --color-nav-bg: rgba(26, 26, 26, 0.95);
  --color-nav-hover: rgba(255, 255, 255, 0.08);
  --color-btn-bg: #3a3a3a;
  --color-btn-bg-hover: #4a4a4a;
  --color-card-bg: #242424;
  --color-tag-bg: #333;
  --color-skill-bar-bg: #333;
  --color-modal-backdrop: #1a1a1a;
  --color-detail-backdrop: rgba(0, 0, 0, 0.85);
}

/* ===========================
   Theme Transitions
   =========================== */
body,
.site-nav,
.nav-links.is-open,
.btn,
.skill-bar,
.tech-tag,
.detail-card,
.detail-image-container,
.modal-backdrop,
.footer-top-btn,
.contact-details i {
  transition: background-color 0.3s, color 0.3s;
}

/* ===========================
   Dark Mode: Section Backgrounds
   =========================== */
[data-theme="dark"] .about,
[data-theme="dark"] .portfolio {
  background: var(--color-bg);
}

/* ===========================
   Dark Mode: Hero
   =========================== */
[data-theme="dark"] .hero::before {
  opacity: 0.2;
}

[data-theme="dark"] .hero {
  background-color: #2a2a2a;
}

[data-theme="dark"] .hero-title {
  background: #fff;
  color: #333;
}

/* ===========================
   Dark Mode: Navigation
   =========================== */
[data-theme="dark"] .nav-toggle {
  color: var(--color-text-light-hover);
}

[data-theme="dark"] .nav-links a {
  color: var(--color-text-light);
}

[data-theme="dark"] .nav-links a:hover {
  color: var(--color-text-light-hover);
}

[data-theme="dark"] .site-nav.scrolled .nav-links a {
  color: var(--color-text-light);
}

[data-theme="dark"] .site-nav.scrolled .nav-links a:hover {
  color: var(--color-text-light-hover);
}

/* ===========================
   Dark Mode: Hero Arrow
   =========================== */
[data-theme="dark"] .hero-arrow {
  color: var(--color-text-light);
  background: none;
}

[data-theme="dark"] .hero-arrow:hover {
  color: var(--color-text-light-hover);
  background: none;
}

/* ===========================
   Dark Mode: Modal Gallery
   =========================== */
[data-theme="dark"] .modal-close {
  color: var(--color-text-dark);
}

[data-theme="dark"] .modal-close:hover {
  color: var(--color-text-light-hover);
}

[data-theme="dark"] .modal-title {
  color: var(--color-text-dark);
}

[data-theme="dark"] .modal-description {
  color: var(--color-text);
}


/* ===========================
   Dark Mode: Links
   =========================== */
[data-theme="dark"] a {
  color: var(--color-text);
}

[data-theme="dark"] a:hover {
  color: var(--color-text-dark);
}

[data-theme="dark"] a.btn {
  color: var(--color-text-dark);
}

[data-theme="dark"] a.btn:hover {
  color: var(--color-text-light-hover);
}

/* ===========================
   Theme Toggle Button
   =========================== */
.theme-toggle {
  background: none;
  border: none;
  color: var(--color-text-dark);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-speed);
}

.theme-toggle:hover {
  color: var(--color-text-dark);
}

@media (min-width: 768px) {
  .theme-toggle {
    padding: 0 1rem;
    height: 100%;
    color: var(--color-text);
    order: 1;
  }
}

[data-theme="dark"] .theme-toggle {
  color: var(--color-text-light);
}

[data-theme="dark"] .theme-toggle:hover {
  color: var(--color-text-light-hover);
}

[data-theme="dark"] .site-nav.scrolled .theme-toggle {
  color: var(--color-text-light);
}