/* ═══════════════════════════════════════════════════
   THEMES — Dark/Light Mode Overrides
   ═══════════════════════════════════════════════════ */

/* Default is dark mode */
:root {
  color-scheme: dark;
}

body {
  background-color: var(--c-bg);
  color: var(--c-text);
  transition: background-color 0.5s ease, color 0.4s ease;
}

/* ── Theme toggle button ─────────────────────────── */
.theme-toggle {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: background 0.3s ease;
}

.theme-toggle__track {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-accent);
  transition: transform 0.4s var(--ease-out-expo);
}

[data-theme="dark"] .theme-toggle__track {
  transform: translateX(22px);
}

.theme-toggle__sun,
.theme-toggle__moon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  transition: opacity 0.3s;
}

.theme-toggle__sun {
  left: 6px;
  opacity: 1;
}

.theme-toggle__moon {
  right: 6px;
  opacity: 0.5;
}

[data-theme="dark"] .theme-toggle__sun { opacity: 0.5; }
[data-theme="dark"] .theme-toggle__moon { opacity: 1; }

/* ── Dark mode specific adjustments ──────────────── */
[data-theme="dark"] .work__card {
  background: var(--c-surface);
}

[data-theme="dark"] .service {
  border-color: var(--c-border);
}

[data-theme="dark"] .nav.is-scrolled {
  background: rgba(8,8,8,0.85);
}

/* ── Light mode overrides ────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
}

[data-theme="light"] .hero {
  color: #0A0A0A;
}

[data-theme="light"] .hero__bg-image img {
  filter: grayscale(20%) brightness(0.85);
}

[data-theme="light"] .hero__title,
[data-theme="light"] .hero__title em,
[data-theme="light"] .hero__title .display {
  color: #0A0A0A;
}

[data-theme="light"] .hero__word {
  color: #0A0A0A;
}

[data-theme="light"] .hero__dot {
  color: var(--c-accent-dark);
}

[data-theme="light"] .hero__sub {
  color: #3D3D3D;
}

[data-theme="light"] .hero__sub .text-muted {
  color: #5A5A5A;
}

[data-theme="light"] .hero__bg-vignette {
  background: radial-gradient(ellipse at center, transparent 30%, var(--c-bg) 100%);
}

[data-theme="light"] .hero__bg-orb--1 {
  opacity: 0.15;
}

[data-theme="light"] .hero__bg-orb--2 {
  opacity: 0.1;
}

[data-theme="light"] .hero__stat-label {
  color: #5A5A5A;
}

[data-theme="light"] .hero__scroll-line {
  background: #0A0A0A;
}

[data-theme="light"] .hero__badge {
  background: rgba(10,10,10,0.06);
  border-color: rgba(10,10,10,0.12);
}

[data-theme="light"] .hero__badge-text {
  color: #3D3D3D;
}

[data-theme="light"] .nav__link {
  color: #5A5A5A;
}

[data-theme="light"] .nav__link:hover,
[data-theme="light"] .nav__link.is-active {
  color: #0A0A0A;
}

[data-theme="light"] .nav__logo {
  color: #0A0A0A;
}

[data-theme="light"] .nav.is-scrolled {
  background: rgba(245,243,239,0.90);
}

[data-theme="light"] .marquee__content span {
  color: #7A7A7A;
}

[data-theme="light"] .work__card-title {
  color: #0A0A0A;
}

[data-theme="light"] .work__card-year {
  color: #7A7A7A;
}

[data-theme="light"] .section-header__title {
  color: #0A0A0A;
}

[data-theme="light"] .service__title {
  color: #0A0A0A;
}

[data-theme="light"] .service__num {
  color: #7A7A7A;
}

[data-theme="light"] .service__subtitle {
  color: #7A7A7A;
}

[data-theme="light"] .service__desc {
  color: #3D3D3D;
}

[data-theme="light"] .about__text-side h2 {
  color: #0A0A0A;
}

[data-theme="light"] .about__text-side p {
  color: #3D3D3D;
}

[data-theme="light"] .skill__label {
  color: #0A0A0A;
}

[data-theme="light"] .testimonial__quote {
  color: #0A0A0A;
}

[data-theme="light"] .lab__card {
  background: #FFFFFF;
}

[data-theme="light"] .lab__card-preview {
  background: #EDEAE4;
}

[data-theme="light"] .contact__input {
  color: #0A0A0A;
  border-color: rgba(10,10,10,0.15);
}

[data-theme="light"] .contact__submit-text {
  color: #0A0A0A;
}

[data-theme="light"] .btn--ghost {
  border-color: rgba(10,10,10,0.2);
  color: #0A0A0A;
}

[data-theme="light"] .footer {
  background: var(--c-navy-2);
  color: #F0EDE8;
}

[data-theme="light"] .footer .footer__text,
[data-theme="light"] .footer a {
  color: rgba(240,237,232,0.6);
}

[data-theme="light"] .tag {
  background: rgba(10,10,10,0.05);
  color: #3D3D3D;
  border-color: rgba(10,10,10,0.1);
}

/* ── View transition ─────────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
}