/* ============================================================
   InferHub Landing — Aurora Theme
   Override layer for styles.css. Activates via [data-theme="aurora"]
   on <html>. Honors prefers-color-scheme for light/dark.
   ============================================================ */

/* mesh lives on a fixed pseudo layer so Tailwind's .bg-white can't paint over it */
html[data-theme='aurora'] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34% 40% at 8% 4%, rgba(139, 92, 246, .42) 0%, transparent 62%),
    radial-gradient(30% 36% at 94% 0%, rgba(34, 211, 238, .34) 0%, transparent 60%),
    radial-gradient(42% 48% at 78% 100%, rgba(236, 72, 153, .26) 0%, transparent 64%),
    radial-gradient(36% 40% at 0% 98%, rgba(52, 211, 153, .24) 0%, transparent 62%),
    #f4f3fb;
}
@media (prefers-color-scheme: dark) {
  html[data-theme='aurora'] body::after {
    background:
      radial-gradient(36% 42% at 8% 4%, rgba(139, 92, 246, .40) 0%, transparent 64%),
      radial-gradient(32% 38% at 94% 0%, rgba(34, 211, 238, .30) 0%, transparent 62%),
      radial-gradient(44% 50% at 78% 100%, rgba(236, 72, 153, .26) 0%, transparent 66%),
      radial-gradient(38% 42% at 0% 98%, rgba(52, 211, 153, .22) 0%, transparent 64%),
      #07070d;
  }
}

/* body transparent so the fixed mesh layer shows through at full strength */
html[data-theme='aurora'] body,
html[data-theme='aurora'] body.min-h-full,
html[data-theme='aurora'] body[class*='min-h-full'],
html[data-theme='aurora'] body > div > div[class*='min-h-full'] {
  background: transparent !important;
}

/* ---------- LIGHT: Aurora Dawn ---------- */
html[data-theme='aurora'] body {
  background:
    radial-gradient(34% 40% at 8% 4%, rgba(139, 92, 246, .42) 0%, transparent 62%),
    radial-gradient(30% 36% at 94% 0%, rgba(34, 211, 238, .34) 0%, transparent 60%),
    radial-gradient(42% 48% at 78% 100%, rgba(236, 72, 153, .26) 0%, transparent 64%),
    radial-gradient(36% 40% at 0% 98%, rgba(52, 211, 153, .24) 0%, transparent 62%),
    #f4f3fb !important;
  background-attachment: fixed;
  min-height: 100vh;
}

html[data-theme='aurora'] header {
  background: rgba(255, 255, 255, .62) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, .8) !important;
}

/* glass surfaces */
html[data-theme='aurora'] .rounded-xl,
html[data-theme='aurora'] .rounded-2xl,
html[data-theme='aurora'] .rounded-3xl,
html[data-theme='aurora'] .codecard,
html[data-theme='aurora'] .border {
  background: rgba(255, 255, 255, .58) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-color: rgba(255, 255, 255, .85) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 12px 34px -14px rgba(80, 70, 200, .25) !important;
}
html[data-theme='aurora'] .codecard { background: rgba(255, 255, 255, .72) !important; }

html[data-theme='aurora'] .bg-zinc-50,
html[data-theme='aurora'] .bg-white\/5 { background: rgba(255, 255, 255, .45) !important; }

/* primary buttons → aurora gradient + glow */
html[data-theme='aurora'] .btn-primary,
html[data-theme='aurora'] .btn-primary-xs,
html[data-theme='aurora'] .btn-primary-sm {
  background-image: linear-gradient(135deg, #7c3aed, #6d28d9 55%, #4f46e5) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px -8px rgba(124, 58, 237, .7) !important;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
}
html[data-theme='aurora'] .btn-primary:hover,
html[data-theme='aurora'] .btn-primary-xs:hover,
html[data-theme='aurora'] .btn-primary-sm:hover {
  transform: translateY(-1px) scale(1.015);
  box-shadow: 0 12px 30px -8px rgba(124, 58, 237, .9) !important;
}

html[data-theme='aurora'] .btn-outline,
html[data-theme='aurora'] .btn-outline-xs,
html[data-theme='aurora'] .btn-outline-sm {
  border-color: rgba(139, 92, 246, .38) !important;
  backdrop-filter: blur(8px);
}
html[data-theme='aurora'] .btn-outline:hover,
html[data-theme='aurora'] .btn-outline-xs:hover,
html[data-theme='aurora'] .btn-outline-sm:hover {
  background: rgba(139, 92, 246, .12) !important;
  border-color: rgba(139, 92, 246, .6) !important;
}

/* badges */
html[data-theme='aurora'] .badge-blue {
  background: linear-gradient(120deg, rgba(139, 92, 246, .16), rgba(34, 211, 238, .14)) !important;
  border: 1px solid rgba(139, 92, 246, .3) !important;
  backdrop-filter: blur(8px);
}

/* headings gradient */
html[data-theme='aurora'] h1,
html[data-theme='aurora'] h2 {
  background-image: linear-gradient(96deg, #1e1b4b 0%, #6d28d9 42%, #0e7490 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* logo glow */
html[data-theme='aurora'] header a.logo svg {
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, .6));
}

/* status dots */
html[data-theme='aurora'] .bg-emerald-500,
html[data-theme='aurora'] .bg-green-500 {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18), 0 0 10px rgba(16, 185, 129, .6);
}

/* hero entrance */
html[data-theme='aurora'] header + div,
html[data-theme='aurora'] main,
html[data-theme='aurora'] body > div > div {
  animation: ih-aurora-in .5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ih-aurora-in {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme='aurora'] header + div,
  html[data-theme='aurora'] main,
  html[data-theme='aurora'] body > div > div { animation: none; }
}

/* drifting aurora layer */
html[data-theme='aurora'] body::before {
  content: '';
  position: fixed;
  inset: -30vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(30% 32% at 28% 28%, rgba(139, 92, 246, .11), transparent 70%),
    radial-gradient(28% 30% at 72% 62%, rgba(34, 211, 238, .10), transparent 70%);
  animation: ih-aurora-drift 24s ease-in-out infinite alternate;
}
@keyframes ih-aurora-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(3vmax, -2vmax, 0) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme='aurora'] body::before { animation: none; }
}

/* ---------- DARK: Aurora Night ---------- */
@media (prefers-color-scheme: dark) {
  html[data-theme='aurora'] body {
    background:
      radial-gradient(44% 52% at 6% 4%, rgba(139, 92, 246, .30) 0%, transparent 64%),
      radial-gradient(40% 46% at 96% 0%, rgba(34, 211, 238, .22) 0%, transparent 62%),
      radial-gradient(52% 58% at 80% 102%, rgba(236, 72, 153, .18) 0%, transparent 66%),
      radial-gradient(46% 50% at 0% 100%, rgba(52, 211, 153, .15) 0%, transparent 64%),
      #07070d;
  }
  html[data-theme='aurora'] header {
    background: rgba(10, 10, 18, .6) !important;
    border-bottom-color: rgba(255, 255, 255, .08) !important;
  }
  html[data-theme='aurora'] .rounded-xl,
  html[data-theme='aurora'] .rounded-2xl,
  html[data-theme='aurora'] .rounded-3xl,
  html[data-theme='aurora'] .codecard,
  html[data-theme='aurora'] .border {
    background: rgba(20, 20, 34, .55) !important;
    border-color: rgba(255, 255, 255, .09) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 16px 44px -18px rgba(0, 0, 0, .85) !important;
  }
  html[data-theme='aurora'] .codecard { background: rgba(14, 14, 26, .8) !important; }
  html[data-theme='aurora'] h1,
  html[data-theme='aurora'] h2 {
    background-image: linear-gradient(96deg, #f5f3ff 0%, #c4b5fd 42%, #67e8f9 100%);
  }
  html[data-theme='aurora'] .btn-outline,
  html[data-theme='aurora'] .btn-outline-xs,
  html[data-theme='aurora'] .btn-outline-sm { border-color: rgba(167, 139, 250, .4) !important; }
  html[data-theme='aurora'] .btn-outline:hover,
  html[data-theme='aurora'] .btn-outline-xs:hover,
  html[data-theme='aurora'] .btn-outline-sm:hover {
    background: rgba(167, 139, 250, .16) !important;
    border-color: rgba(167, 139, 250, .7) !important;
  }
  html[data-theme='aurora'] .badge-blue {
    background: linear-gradient(120deg, rgba(139, 92, 246, .3), rgba(34, 211, 238, .22)) !important;
    border-color: rgba(167, 139, 250, .45) !important;
  }
}

/* ---------- theme switcher (shared widget) ---------- */
#aurora-switch {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, .35);
  background: linear-gradient(120deg, rgba(139, 92, 246, .16), rgba(34, 211, 238, .12));
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: inherit;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
}
#aurora-switch:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .18), 0 4px 14px -4px rgba(139, 92, 246, .6);
}
html[data-theme='aurora'] #aurora-switch {
  background: linear-gradient(120deg, #8b5cf6, #22d3ee);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .22), 0 6px 18px -4px rgba(139, 92, 246, .75);
  color: #fff;
}
#aurora-menu {
  position: fixed; z-index: 80;
  min-width: 232px; padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, .28);
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 22px 55px -16px rgba(80, 60, 220, .4);
}
@media (prefers-color-scheme: dark) {
  #aurora-menu {
    background: rgba(14, 14, 26, .9);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 22px 55px -16px rgba(0, 0, 0, .9);
  }
}
#aurora-menu button {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  font-size: 13px; font-weight: 500;
  background: transparent; border: 0; cursor: pointer; color: inherit;
}
#aurora-menu button:hover { background: rgba(139, 92, 246, .12); }
@media (prefers-color-scheme: dark) {
  #aurora-menu button:hover { background: rgba(255, 255, 255, .07); }
}
#aurora-menu button[aria-current='true'] {
  background: linear-gradient(120deg, rgba(139, 92, 246, .22), rgba(34, 211, 238, .16));
  border: 1px solid rgba(139, 92, 246, .3);
}
#aurora-menu .swatch {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  border: 1px solid rgba(0, 0, 0, .12);
}
@media (prefers-color-scheme: dark) {
  #aurora-menu .swatch { border-color: rgba(255, 255, 255, .18); }
}
#aurora-menu .ih-menu-hint {
  padding: 7px 10px 2px; font-size: 11px; opacity: .6; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 600;
}