/* =============================================
   DARK MODE — [data-theme="dark"] overrides
   ============================================= */

[data-theme="dark"] {
  --color-bg: #0d0d0d;
  --color-surface: #1a1a1a;
  --color-text: #f5f0eb;
  --color-text-muted: #999999;
  --color-border: #2a2a2a;
  --color-nav-bg: rgba(13, 13, 13, 0.85);
  --color-overlay: rgba(0, 0, 0, 0.8);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
}

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

[data-theme="dark"] .timeline__dot {
  background: var(--color-bg);
}

[data-theme="dark"] .contact__map iframe {
  filter: grayscale(1) contrast(1.1) invert(0.9);
}

[data-theme="dark"] .contact__map:hover iframe {
  filter: grayscale(0) contrast(1) invert(0);
}

[data-theme="dark"] .about__image-wrapper {
  filter: brightness(0.9);
}

/* Smooth transition for all color changes */
[data-theme="dark"] body,
[data-theme="dark"] .nav,
[data-theme="dark"] .service-card,
[data-theme="dark"] .testimonials,
[data-theme="dark"] .timeline__dot,
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select {
  transition: background-color var(--duration-slow) ease,
              color var(--duration-slow) ease,
              border-color var(--duration-slow) ease;
}