/* ===== Dark mode ===== */
html[data-theme="dark"] {
  --color-bg: #05070B;
  --color-bg-alt: #0B0E13;
  --color-surface: rgba(16, 22, 34, .9);
  --color-ink: #EAF0F8;
  --color-ink-soft: #A9B4C6;
  --color-ink-faint: #7F8CA0;
  --color-blue: #4C8DE8;
  --color-blue-dark: #2456A5;
  --color-blue-tint: rgba(76, 141, 232, .26);
  --color-lavender: #A78BFA;
  --color-lavender-dark: #7C5CD6;
  --color-lavender-tint: rgba(167, 139, 250, .24);
  --color-shadow: 0, 0, 0;
  --color-nav-bg: #0B0E13;
  --color-nav-text: #EAF0F8;
}
html[data-theme="dark"] body { background: #05070B; }

html[data-theme="dark"] .site-header {
  background: linear-gradient(to bottom, rgba(6, 9, 14, .55) 60%, transparent);
}
html[data-theme="dark"] .glass-nav__list {
  background: rgba(16, 22, 34, .55);
  border-color: rgba(120, 150, 190, .22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-theme="dark"] .glass-dropdown {
  background: rgba(14, 19, 30, .86);
  border-color: rgba(120, 150, 190, .22);
}
html[data-theme="dark"] .nav-toggle-mobile {
  background: rgba(16, 22, 34, .55);
  border-color: rgba(120, 150, 190, .22);
}
html[data-theme="dark"] .nav-toggle-mobile__bars span { background: var(--color-ink); }
html[data-theme="dark"] .mobile-nav {
  background: rgba(12, 17, 27, .92);
  border-color: rgba(120, 150, 190, .22);
}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea { color: var(--color-ink); }
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .field textarea:focus { background: rgba(20, 28, 42, .85); }
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .projects-grid__item,
html[data-theme="dark"] .device-mock,
html[data-theme="dark"] .team-card { border-color: rgba(120, 150, 190, .16); }
html[data-theme="dark"] .projects-grid__item img { filter: grayscale(1) brightness(1.6); }
html[data-theme="dark"] .projects-grid__item:hover img { filter: none; }
html[data-theme="dark"] .security-log__list li,
html[data-theme="dark"] .device-mock__screen { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .section.is-alt { background: transparent; }

/* badges/pills/active-nav use blue-dark or lavender-dark as TEXT on a tint
   background; in dark mode that token is still a fairly dark blue and
   nearly disappears into its own tinted pill, so give these a bright
   readable color instead of reusing the (intentionally darker) token. */
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .vendor-chip,
html[data-theme="dark"] .capability-item__icon,
html[data-theme="dark"] .team-card__badge,
html[data-theme="dark"] .glass-nav__link[aria-current="page"],
html[data-theme="dark"] .has-dropdown.is-active-group > .glass-nav__link,
html[data-theme="dark"] .glass-dropdown a:hover,
html[data-theme="dark"] .glass-dropdown a:focus-visible {
  color: #BFDBFF;
}
html[data-theme="dark"] .eyebrow.is-lavender,
html[data-theme="dark"] .vendor-chip.is-lavender,
html[data-theme="dark"] .is-lavender-theme .capability-item__icon,
html[data-theme="dark"] .team-card.accent-lavender .team-card__badge {
  color: #DCCEFC;
}

/* ---- ambient navy background (smooth gradient, darkest at the top) ---- */
.motion-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  background: linear-gradient(180deg, #05070B 0%, #070A11 45%, #090D16 100%);
  transform: translateZ(0);
  will-change: opacity;
}
html[data-theme="dark"] .motion-bg { opacity: 1; }
.motion-bg::before, .motion-bg::after {
  content: ""; position: absolute; border-radius: 50%;
  opacity: .16;
}
.motion-bg::before {
  width: 46vw; height: 46vw; left: -12vw; top: -18vw;
  background: radial-gradient(circle, #1E3FAE 0%, transparent 62%);
}
.motion-bg::after {
  width: 40vw; height: 40vw; right: -10vw; top: 26vh;
  background: radial-gradient(circle, #2456A5 0%, transparent 62%);
  opacity: .11;
}
.motion-bg__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 20%, transparent 40%, rgba(0,0,0,.5) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .motion-bg { transition: none; }
}