/* ─── Theme Switcher ─────────────────────────────────── */
.nav-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  pointer-events: all;
}

.theme-switcher {
  background: none; /* No background as requested */
  color: var(--white); /* White in dark theme, black in light theme */
  border: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  font-size: 18px;
  cursor: none;
  transition: transform .3s ease;
  padding: 0;
}

.theme-switcher:hover {
  transform: scale(1.2);
}

.theme-switcher .fa-sun { display: none; }
.light-theme .theme-switcher .fa-moon { display: none; }
.light-theme .theme-switcher .fa-sun { display: block; }

/* ─── Light Theme ────────────────────────────────────── */
.light-theme {
  --black: #f5f2ee;
  --white: #0a0a0a;
  --mid: #888;
  --border: rgba(0,0,0,0.10);
}

.light-theme .theme-switcher {
  color: var(--white); /* This is black in light theme */
}

.light-theme .cursor {
  background: #ffffff; /* Use literal white for consistent inversion */
  mix-blend-mode: difference; /* This correctly inverts on light backgrounds */
  border: 1px solid rgba(0,0,0,0.05); /* Very subtle border to prevent disappearing */
}

.light-theme .cursor-ring {
  border-color: rgba(0,0,0,0.15); /* Darker ring for light theme */
}

.light-theme .hero-bg-text {
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.06); /* Darker and larger for light theme */
}

.light-theme .hero-title em {
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.8); /* Darker black outline for the "Design" word */
}

.light-theme .about-body p,
.light-theme .work-item-desc p,
.light-theme .footer-brand p,
.light-theme .footer-col a {
  color: #444; /* Darker text for readability in light theme */
}

.light-theme .work-name {
  color: var(--white); /* #0a0a0a */
}

.light-theme .work-tag,
.light-theme .work-year,
.light-theme .work-num {
  color: #666; /* Darker gray for light theme metadata */
}

.light-theme .work-arrow {
  color: var(--white);
}

.light-theme .section-label,
.light-theme .hero-eyebrow,
.light-theme .scroll-pct {
  color: #555;
}

.light-theme .section-label::before {
  background: #555;
}

.light-theme body::before {
  opacity: .2;
}

.light-theme .hamburger span {
  background: var(--white); /* Now black */
}

.light-theme .menu-overlay {
  background: rgba(245, 242, 238, 0.95); /* Light solid background */
}

.light-theme .menu-item {
  color: var(--white); /* Now black */
}

.light-theme .menu-item::after {
  background: var(--white); /* Now black */
}

.light-theme .service-card:hover::before {
  background: var(--white); /* Card becomes black on hover */
}

.light-theme .service-card:hover > * {
  color: var(--black); /* Text becomes white on hover */
}

.light-theme .social-trigger {
  background: var(--white); /* Now black */
  color: var(--black); /* Now white */
}

.light-theme .social-link {
  background: var(--black); /* Now white */
  color: var(--white); /* Now black */
  border-color: var(--border);
}

.light-theme .social-link:hover {
  background: var(--white); /* Now black */
  color: var(--black); /* Now white */
  border-color: var(--white);
}

.light-theme .scroll-progress-fill {
  background: var(--white); /* Now black */
}