/* ==========================================================================
   DARK MODE — Premium theme polish
   Uses the existing design tokens from base.css and enhances surface contrast,
   focus states, and section-specific visual depth for the dark/light theme.
   ========================================================================== */

[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.08), transparent 30%),
    var(--bg-primary);
}

[data-theme="dark"] .site-header,
[data-theme="dark"] .site-footer,
[data-theme="dark"] .card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .timeline-item,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .testimonial-highlight,
[data-theme="dark"] .contact-detail-card,
[data-theme="dark"] .contact-form-shell,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .footer-column {
  background-color: rgba(17, 24, 39, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.28);
}

[data-theme="dark"] .site-header,
[data-theme="dark"] .site-footer {
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

[data-theme="dark"] .code-card,
[data-theme="dark"] .btn--primary,
[data-theme="dark"] .btn--secondary,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .nav-toggle {
  box-shadow: 0 14px 38px rgba(2, 6, 23, 0.28);
}

[data-theme="dark"] .btn--primary {
  box-shadow: 0 10px 32px rgba(37, 99, 235, 0.32);
}

[data-theme="dark"] .nav-links a,
[data-theme="dark"] .logo,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .nav-toggle,
[data-theme="dark"] .footer-links a,
[data-theme="dark"] .footer-social-link,
[data-theme="dark"] .contact-detail-card a {
  color: var(--text-primary);
}

[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a:focus-visible,
[data-theme="dark"] .footer-links a:hover,
[data-theme="dark"] .footer-links a:focus-visible,
[data-theme="dark"] .contact-detail-card a:hover,
[data-theme="dark"] .contact-detail-card a:focus-visible {
  color: #60a5fa;
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form select,
[data-theme="dark"] .contact-form textarea {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
  color: rgba(248, 250, 252, 0.56);
}

[data-theme="dark"] .pill,
[data-theme="dark"] .badge,
[data-theme="dark"] .chip {
  background-color: rgba(37, 99, 235, 0.16);
  color: #dbeafe;
  border-color: rgba(96, 165, 250, 0.24);
}

[data-theme="dark"] .hero::after {
  opacity: 0.5;
}

[data-theme="dark"] ::selection {
  background: rgba(37, 99, 235, 0.4);
  color: #ffffff;
}

[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.42);
  border-radius: var(--radius-full);
}

:root ::-webkit-scrollbar {
  width: 10px;
}

:root ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

:root ::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
  border-radius: var(--radius-full);
}

body,
.site-header,
.site-footer,
.card,
.btn,
.nav-links a,
.logo,
.theme-toggle,
.nav-toggle,
.service-card,
.project-card,
.timeline-item,
.blog-card,
.testimonial-highlight,
.contact-detail-card,
.contact-form-shell,
.contact-form input,
.contact-form select,
.contact-form textarea,
.accordion-item,
.accordion-trigger,
.footer-column,
.pill {
  transition: background-color var(--transition-slow), color var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow);
}