/* ============================================
   ATAMAP ASSOCIATES — Theme Toggle (Light/Dark)
   Default is now LIGHT; dark is the override
   ============================================ */

/* Toggle Button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(55, 65, 81, 0.4);
  border-radius: 50%;
  color: #9ca3af;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-spring-settle);
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-normal) var(--ease-spring-1);
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* Default (light) theme: show moon icon (to switch TO dark) */
.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

/* ── Dark Theme Overrides ── */
[data-theme="dark"] {
  --color-navy-900: #0d1117;
  --color-navy-800: #141b2d;
  --color-navy-700: #1a2234;
  --color-navy-600: #243049;
  --color-graphite-500: #374151;
  --color-steel-400: #6b7280;
  --color-steel-300: #9ca3af;
  --color-silver-200: #e5e7eb;
  --color-silver-100: #f3f4f6;
  --color-white: #f9fafb;
  --color-pure-white: #ffffff;

  /* Shadows for dark bg */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5), 0 8px 10px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(212, 175, 55, 0.2);
  --shadow-glow-lg: 0 0 40px rgba(212, 175, 55, 0.25), 0 0 80px rgba(212, 175, 55, 0.1);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);

  /* Accent stays gold */
  --color-accent: #d4af37;
  --color-accent-hover: #e0c04a;
  --color-accent-dim: rgba(212, 175, 55, 0.12);

  /* Border adjustments */
  --border-color: #374151;
}

/* Dark theme: body background */
[data-theme="dark"] body {
  background: linear-gradient(180deg, #141b2d 0%, #1a2234 50%, #141b2d 100%);
  background-attachment: fixed;
}

/* Dark theme: show sun icon (to switch TO light) */
[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* Dark theme: toggle border */
[data-theme="dark"] .theme-toggle {
  border-color: rgba(55, 65, 81, 0.5);
  color: #9ca3af;
}

/* Smooth transitions for theme switch */
[data-theme-transition] body,
[data-theme-transition] header,
[data-theme-transition] main,
[data-theme-transition] footer,
[data-theme-transition] section,
[data-theme-transition] div,
[data-theme-transition] nav,
[data-theme-transition] a,
[data-theme-transition] p,
[data-theme-transition] h1,
[data-theme-transition] h2,
[data-theme-transition] h3,
[data-theme-transition] h4,
[data-theme-transition] span,
[data-theme-transition] .site-header,
[data-theme-transition] .site-footer,
[data-theme-transition] .page-hero,
[data-theme-transition] .newsletter-banner,
[data-theme-transition] .cta-banner {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark theme specific overrides */
[data-theme="dark"] .page-hero {
  background: #0d1117;
}

[data-theme="dark"] .cta-banner {
  background: linear-gradient(135deg, #1a2234 0%, #243049 100%);
}

[data-theme="dark"] .newsletter-banner {
  background: #0d1117;
}

[data-theme="dark"] .site-header {
  background: rgba(10, 14, 26, 0.92);
  border-bottom-color: rgba(55, 65, 81, 0.3);
}

[data-theme="dark"] .site-footer {
  background: #0d1117;
  border-top-color: rgba(55, 65, 81, 0.3);
}

[data-theme="dark"] .skip-link {
  background: var(--color-navy-700);
}

/* Fix img/logo for dark theme */
[data-theme="dark"] .site-header__logo-img {
  filter: none;
}

/* Fix the chatbot button for dark theme */
[data-theme="dark"] .chatbot-toggle {
  background: var(--color-navy-700);
  border-color: var(--color-accent);
}

/* Fix video card overlay for dark theme */
[data-theme="dark"] .video-card__play {
  background: rgba(26, 34, 52, 0.4);
}

[data-theme="dark"] .video-modal {
  background: rgba(13, 17, 23, 0.95);
}

/* Fix gradient bg for dark theme */
[data-theme="dark"] .home-hero {
  background: #0d1117;
}

/* Button adjustments for dark theme */
[data-theme="dark"] .btn--primary {
  color: #0d1117;
}

[data-theme="dark"] .btn--secondary {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Fix product-item dot for dark */
[data-theme="dark"] .product-item::before {
  background: var(--color-accent);
}

/* Ensure input fields look good in dark */
[data-theme="dark"] .form-input {
  background: var(--color-navy-700);
  color: var(--color-white);
  border-color: var(--color-graphite-500);
}

/* Mobile nav adjustments for dark */
[data-theme="dark"] .mobile-nav {
  background: rgba(13, 17, 23, 0.97);
}

[data-theme="dark"] .mobile-nav a {
  color: var(--color-steel-300);
  border-bottom-color: rgba(55, 65, 81, 0.4);
}

[data-theme="dark"] .mobile-nav a:hover {
  color: var(--color-white);
}

/* Search overlay for dark */
[data-theme="dark"] .site-search-overlay {
  background: rgba(13, 17, 23, 0.98);
}

/* Card adjustments for dark */
[data-theme="dark"] .card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .value-card {
  background: var(--color-navy-700);
  border-color: var(--color-graphite-500);
  box-shadow: none;
}