/* =========================================================================
   AIDiveForge — Light/Dark Theme Switcher
   Applies when `html[data-theme="light"]` is set. Defaults to dark.

   Design approach: target the major hard-coded dark surfaces in the existing
   theme + flip the custom-property palette used by the loader/mockup so that
   anything using --ring-color, --text-gradient, etc. transitions automatically.
   ========================================================================= */

/* Smooth transition for the flip itself */
html[data-theme] body,
html[data-theme] .adf-tool-section,
html[data-theme] .adf-topbar,
html[data-theme] .adf-route-overlay,
html[data-theme] .adf-footer-legal,
html[data-theme] .adf-theme-toggle {
  transition:
    background-color 380ms cubic-bezier(0.22, 1, 0.36, 1),
    color 380ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================================
   LIGHT mode — custom property overrides first (affects loader/mockup)
   ========================================================================= */
html[data-theme="light"] {
  --ring-color:    #0070d4;
  --text-gradient: linear-gradient(135deg, #0070d4 0%, #0050c0 55%, #5000c8 100%);
}

/* Body */
html[data-theme="light"] body {
  background: #fafbfc !important;
  color: #0a1628 !important;
  background-image:
    radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(0,112,212,0.06), transparent 60%),
    radial-gradient(ellipse 800px 400px at 90% 20%, rgba(80,0,200,0.035), transparent 60%) !important;
}

/* Headings, body text, muted text */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: #0a1628 !important;
}
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] dd,
html[data-theme="light"] td {
  color: #1e2a3d;
}
html[data-theme="light"] a { color: #0070d4; }
html[data-theme="light"] a:hover { color: #0086f0; }

/* Existing theme's adf-tool-section card surface */
html[data-theme="light"] .adf-tool-section {
  background: #ffffff !important;
  color: #0a1628 !important;
  border: 1px solid rgba(10, 34, 64, 0.09) !important;
}
html[data-theme="light"] .adf-tool-section h3 {
  color: #0070d4 !important;
}
html[data-theme="light"] .adf-tool-section dt { color: #5a6779 !important; }
html[data-theme="light"] .adf-tool-section dd { color: #0a1628 !important; }

/* Existing topbar */
html[data-theme="light"] .adf-topbar {
  background: rgba(250, 251, 252, 0.9) !important;
  border-bottom: 1px solid rgba(10, 34, 64, 0.1) !important;
  backdrop-filter: blur(12px);
}
html[data-theme="light"] .adf-topbar__brand {
  color: #0a1628 !important;
}
html[data-theme="light"] .adf-header-nav__search input {
  background: #ffffff !important;
  color: #0a1628 !important;
  border-color: rgba(10, 34, 64, 0.12) !important;
}
html[data-theme="light"] .adf-header-nav__btn {
  color: #1e2a3d !important;
  border-color: rgba(10, 34, 64, 0.1) !important;
}
html[data-theme="light"] .adf-header-nav__btn:hover {
  color: #0070d4 !important;
  border-color: rgba(0, 112, 212, 0.35) !important;
}
html[data-theme="light"] .adf-header-nav__btn--primary {
  background: #0070d4 !important;
  color: #ffffff !important;
  border-color: #0070d4 !important;
}
html[data-theme="light"] .adf-header-nav__btn--primary:hover {
  background: #0086f0 !important;
  color: #ffffff !important;
}

/* HivePress listing cards + content — common hp- prefixed classes */
html[data-theme="light"] .hp-listing,
html[data-theme="light"] .hp-listings,
html[data-theme="light"] .hp-form {
  background: transparent !important;
  color: #0a1628 !important;
}
html[data-theme="light"] .hp-listing__title,
html[data-theme="light"] .hp-listing__description {
  color: #0a1628 !important;
}
html[data-theme="light"] .hp-listing__attribute {
  color: #5a6779 !important;
}

/* Route overlay — adapt to light */
html[data-theme="light"] .adf-route-overlay {
  background: rgba(247, 249, 252, 0.88) !important;
  backdrop-filter: blur(14px);
}
html[data-theme="light"] .adf-route-overlay__label { color: #0a1628 !important; text-shadow: 0 0 20px rgba(0, 112, 212, 0.35) !important; }
html[data-theme="light"] .adf-route-overlay__sub { color: #5a6779 !important; }

/* Brain loader — halo and glows shift to light-blue */
html[data-theme="light"] .brain-loader::before {
  background: radial-gradient(circle, rgba(0, 112, 212, 0.14) 0%, transparent 60%) !important;
}
html[data-theme="light"] .brain-loader__ring {
  box-shadow:
    0 0 calc(var(--size) * 0.06) rgba(0, 112, 212, 0.3),
    inset 0 0 calc(var(--size) * 0.06) rgba(0, 112, 212, 0.14) !important;
}
html[data-theme="light"] .brain-loader__ring--equator {
  box-shadow:
    0 0 calc(var(--size) * 0.08) rgba(0, 112, 212, 0.4),
    inset 0 0 calc(var(--size) * 0.08) rgba(0, 112, 212, 0.2) !important;
}

/* Footer legal strip */
html[data-theme="light"] .adf-footer-legal {
  background: #ffffff !important;
  color: #5a6779 !important;
  border-top-color: rgba(10, 34, 64, 0.09) !important;
}
html[data-theme="light"] .adf-footer-legal a { color: #0070d4 !important; }

/* =========================================================================
   THEME TOGGLE BUTTON — floating pill, bottom-right
   ========================================================================= */
.adf-theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #151a21;
  color: #00c8ff;
  border: 1px solid rgba(0, 200, 255, 0.35);
  cursor: pointer;
  z-index: 9998;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(0, 200, 255, 0.25);
  transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.adf-theme-toggle:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 200, 255, 0.4);
  border-color: rgba(0, 200, 255, 0.7);
}
.adf-theme-toggle:focus-visible {
  outline: 2px solid #00c8ff;
  outline-offset: 3px;
}
.adf-theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.adf-theme-toggle:hover svg {
  transform: rotate(-15deg);
}

/* Icon visibility flip */
.adf-theme-toggle__sun { display: none; }
html[data-theme="light"] .adf-theme-toggle__moon { display: none; }
html[data-theme="light"] .adf-theme-toggle__sun  { display: block; }

/* Light variant of the toggle itself */
html[data-theme="light"] .adf-theme-toggle {
  background: #ffffff;
  color: #0070d4;
  border-color: rgba(0, 112, 212, 0.35);
  box-shadow: 0 4px 18px rgba(10, 34, 64, 0.12);
}
html[data-theme="light"] .adf-theme-toggle:hover {
  box-shadow: 0 6px 24px rgba(10, 34, 64, 0.18), 0 0 24px rgba(0, 112, 212, 0.25);
  border-color: rgba(0, 112, 212, 0.6);
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .adf-theme-toggle,
  .adf-theme-toggle svg {
    transition: none;
  }
  html[data-theme] body,
  html[data-theme] .adf-tool-section,
  html[data-theme] .adf-topbar,
  html[data-theme] .adf-route-overlay,
  html[data-theme] .adf-footer-legal,
  html[data-theme] .adf-theme-toggle {
    transition: none;
  }
}

/* Hide on very small screens where it'd crowd the corner */
@media (max-width: 420px) {
  .adf-theme-toggle { width: 42px; height: 42px; bottom: 1rem; right: 1rem; }
}