/* Eternal Sailor Jupiter — palette you specified:
 *   #E0F1E7  mint (text + glass)
 *   #467040  forest (structure + depth)
 *   #369751  leaf (accents, CTAs, glow)
 * Dark mode here stays *green-forward* (not OLED-black): bases are tinted from #467040.
 */

:root {
  --jupiter-mint: #e0f1e7;
  --jupiter-forest: #467040;
  --jupiter-leaf: #369751;
  /* Page + surfaces: darkened forest, still clearly green */
  --jupiter-bg: #2a4530;
  --jupiter-bg-deep: #243b2a;
  --jupiter-elevated: #2f4d37;
  --jupiter-glass: rgba(224, 241, 231, 0.07);
  --jupiter-glass-hover: rgba(224, 241, 231, 0.11);
  --jupiter-border-soft: rgba(224, 241, 231, 0.18);
}

/* Canvas + main dark neutrals → forest family */
html.jupiter body,
html.jupiter .dark\:bg-soft-canvas {
  background-color: var(--jupiter-bg) !important;
}

html.jupiter .dark\:bg-neutral-900\/30 {
  background-color: rgba(36, 59, 42, 0.55) !important;
}

html.jupiter .dark\:bg-soft-canvas\/80 {
  background-color: rgba(42, 69, 48, 0.8) !important;
}

html.jupiter .dark\:border-\[\#2d2d2d\] {
  border-color: var(--jupiter-border-soft) !important;
}

html.jupiter .dark\:bg-neutral-800 {
  background-color: var(--jupiter-elevated) !important;
}

/* Cards / chips — mint-tinted glass */
html.jupiter .dark\:bg-white\/\[0\.03\] {
  background-color: var(--jupiter-glass) !important;
}

html.jupiter .dark\:bg-white\/5 {
  background-color: rgba(224, 241, 231, 0.09) !important;
}

html.jupiter .dark\:hover\:bg-white\/\[0\.05\],
html.jupiter .dark\:hover\:bg-white\/\[0\.06\] {
  background-color: var(--jupiter-glass-hover) !important;
}

/* Body copy on green (replaces cold gray) */
html.jupiter .dark\:text-neutral-300 {
  color: rgba(224, 241, 231, 0.92) !important;
}

html.jupiter .dark\:text-neutral-400 {
  color: rgba(224, 241, 231, 0.78) !important;
}

html.jupiter .dark\:text-neutral-500 {
  color: rgba(224, 241, 231, 0.62) !important;
}

html.jupiter .dark\:text-neutral-700 {
  color: rgba(224, 241, 231, 0.4) !important;
}

/* Headings stay bright */
html.jupiter .dark\:text-white {
  color: #f7fbf9 !important;
}

/* Accents: Tailwind emerald → Jupiter leaf */
html.jupiter .text-emerald-500,
html.jupiter .dark\:text-emerald-500,
html.jupiter .group-hover\:text-emerald-500:hover {
  color: var(--jupiter-leaf) !important;
}

html.jupiter .bg-emerald-500,
html.jupiter .dark\:bg-emerald-500,
html.jupiter .group-hover\:bg-emerald-500:hover {
  background-color: var(--jupiter-leaf) !important;
  color: #f7fbf9 !important;
}

html.jupiter .border-emerald-500,
html.jupiter .dark\:border-emerald-500,
html.jupiter .group-hover\:border-emerald-500:hover {
  border-color: var(--jupiter-leaf) !important;
}

html.jupiter .hover\:border-emerald-500\/30:hover {
  border-color: rgba(54, 151, 81, 0.35) !important;
}

html.jupiter .dark\:group-hover\:border-emerald-500\/50:hover {
  border-color: rgba(54, 151, 81, 0.5) !important;
}

html.jupiter .dark\:group-hover\:bg-emerald-500\/20:hover {
  background-color: rgba(54, 151, 81, 0.22) !important;
}

html.jupiter .hover\:bg-emerald-400:hover {
  background-color: #43b062 !important;
}

/* Selection */
html.jupiter .selection\:bg-emerald-500 *::selection,
html.jupiter .selection\:bg-emerald-500::selection {
  background-color: var(--jupiter-leaf) !important;
  color: #f7fbf9 !important;
}

/* Timeline + labels: gradient uses leaf + mint */
html.jupiter .from-emerald-500 {
  --tw-gradient-from: var(--jupiter-leaf) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important;
}

/* Hero title gradient end: soft mint-gray */
html.jupiter .dark\:from-white {
  --tw-gradient-from: #f7fbf9 !important;
}

html.jupiter .dark\:via-white {
  --tw-gradient-stops: var(--tw-gradient-from), var(--jupiter-mint), var(--tw-gradient-to, transparent) !important;
}

html.jupiter .dark\:to-neutral-500 {
  --tw-gradient-to: #a8bdb0 !important;
}

/* Glows — leaf (not gold / pink) */
html.jupiter .shadow-\[0_0_8px_rgba\(16\,185\,129\,0\.8\)\] {
  box-shadow: 0 0 10px rgba(54, 151, 81, 0.65) !important;
}

html.jupiter .shadow-\[0_0_15px_rgba\(16\,185\,129\,0\.5\)\] {
  box-shadow: 0 0 16px rgba(54, 151, 81, 0.45) !important;
}

html.jupiter .shadow-\[0_0_30px_rgba\(16\,185\,129\,0\.3\)\] {
  box-shadow: 0 0 28px rgba(54, 151, 81, 0.3) !important;
}

html.jupiter .hover\:shadow-\[0_0_50px_rgba\(16\,185\,129\,0\.5\)\]:hover {
  box-shadow: 0 0 40px rgba(54, 151, 81, 0.42) !important;
}

html.jupiter .hover\:shadow-\[0_0_30px_rgba\(16\,185\,129\,0\.4\)\]:hover,
html.jupiter .dark\:hover\:shadow-\[0_0_30px_rgba\(16\,185\,129\,0\.4\)\]:hover {
  box-shadow: 0 0 32px rgba(54, 151, 81, 0.38) !important;
}

html.jupiter .dark\:shadow-\[0_0_20px_rgba\(16\,185\,129\,0\.5\)\] {
  box-shadow: 0 0 22px rgba(54, 151, 81, 0.4) !important;
}

html.jupiter .group-hover\:shadow-\[0_0_20px_rgba\(16\,185\,129\,0\.3\)\]:hover,
html.jupiter .dark\:group-hover\:shadow-\[0_0_20px_rgba\(16\,185\,129\,0\.5\)\]:hover {
  box-shadow: 0 0 22px rgba(54, 151, 81, 0.42) !important;
}

/* Ambient blurs — mint + leaf wash */
html.jupiter .dark\:bg-emerald-500\/20 {
  background-color: rgba(54, 151, 81, 0.22) !important;
}

html.jupiter .bg-emerald-500\/10,
html.jupiter .dark\:bg-emerald-500\/10 {
  background-color: rgba(224, 241, 231, 0.12) !important;
}

html.jupiter .bg-emerald-500\/5,
html.jupiter .dark\:bg-emerald-500\/5 {
  background-color: rgba(224, 241, 231, 0.07) !important;
}

html.jupiter .group-hover\:bg-emerald-500\/20:hover {
  background-color: rgba(54, 151, 81, 0.22) !important;
}

/* Default white/5 borders → mint-soft */
html.jupiter .dark\:border-white\/5,
html.jupiter .dark\:border-white\/10 {
  border-color: var(--jupiter-border-soft) !important;
}

html.jupiter .dark\:hover\:border-emerald-500 {
  border-color: var(--jupiter-leaf) !important;
}

/* Theme toggle: forest ring, mint icon hover */
html.jupiter #theme-toggle.dark\:border-neutral-700 {
  border-color: var(--jupiter-border-soft) !important;
}

html.jupiter #theme-toggle.dark\:hover\:border-emerald-500:hover {
  border-color: var(--jupiter-leaf) !important;
}