/* ──────────────────────────────────────────────────────────────────
   HYVE ALPHA — Friendly theme overlay
   Warmer, softer, more inviting. Loaded after each page's own CSS so
   these rules win via specificity + !important where needed.
   ────────────────────────────────────────────────────────────────── */

:root {
  --hyve-bg: #130f08;
  --hyve-bg-2: #1a140a;
  --hyve-panel: #1f1810;
  --hyve-panel-2: #261d12;
  --hyve-border: rgba(255, 210, 140, 0.12);
  --hyve-border-strong: rgba(255, 210, 140, 0.24);
  --hyve-text: #f2e8d4;
  --hyve-text-dim: #c8b896;
  --hyve-text-mute: #9a8d74;
  --hyve-gold: #f5c542;
  --hyve-gold-soft: #d4af37;
  --hyve-amber: #f59e0b;
  --hyve-teal: #7ed9c7;
  --hyve-rose: #f5a5a5;
  --hyve-green: #7ed98e;
  --hyve-violet: #c8a8ff;
  --hyve-sky: #87cfff;
}

/* ── Warmer page backgrounds — replaces the near-black with a warm
      espresso that still reads as "premium dark" but no longer "dungeon" */
html, body {
  background: radial-gradient(ellipse at top, #1f1608 0%, #120d06 55%, #0a0703 100%) !important;
  color: var(--hyve-text) !important;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle warm scrollbars */
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-track { background: #0f0a04 !important; }
::-webkit-scrollbar-thumb { background: #3a2a10 !important; border-radius: 6px !important; }
::-webkit-scrollbar-thumb:hover { background: #52391a !important; }

/* Selection */
::selection { background: rgba(245, 197, 66, 0.25); color: #fff; }

/* ── Typography — larger, friendlier, more readable */
h1, h2, h3, h4 {
  letter-spacing: -0.01em !important;
}
p, li, label, span {
  line-height: 1.7;
}

/* ── Soften all pure-black panels */
[style*="background:#000"],
[style*="background: #000"],
[style*="background:#030306"],
[style*="background: #030306"] {
  background: var(--hyve-bg) !important;
}

/* Card-like containers get warmed up + slightly lifted */
.card,
.feat-card,
.tier,
.nexus-card,
.path-card,
.book,
.plan-card,
.price-card,
.agent-card,
.mb-card {
  background: linear-gradient(180deg, #221a0e 0%, #181108 100%) !important;
  border: 1px solid var(--hyve-border) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255, 210, 140, 0.04) inset,
    0 10px 30px rgba(0, 0, 0, 0.45) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.card:hover,
.feat-card:hover,
.tier:hover,
.nexus-card:hover,
.path-card:hover,
.book:hover,
.plan-card:hover,
.price-card:hover,
.agent-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--hyve-border-strong) !important;
  box-shadow:
    0 1px 0 rgba(255, 210, 140, 0.08) inset,
    0 20px 50px rgba(245, 158, 11, 0.14) !important;
}

/* ── Buttons — gentler, warmer, friendlier */
.btn,
.buy, .buy-btn,
.plan-btn,
.path-btn,
.dl-btn,
button.primary,
.btn-primary,
.btn-accent,
.nexus-link,
.keys-done,
.cta-primary {
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.btn-accent,
.buy, .buy-btn,
.dl-btn,
.path-btn.primary,
.plan-btn,
.keys-done {
  background: linear-gradient(135deg, #ffd76b 0%, #d4af37 100%) !important;
  color: #1a1004 !important;
  box-shadow: 0 6px 18px rgba(245, 197, 66, 0.28) !important;
  border: none !important;
}
.btn-accent:hover,
.buy:hover, .buy-btn:hover,
.dl-btn:hover,
.plan-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 26px rgba(245, 197, 66, 0.4) !important;
}
.btn-ghost,
.path-btn:not(.primary):not(.green):not(.purple),
.btn.ghost {
  background: rgba(255, 210, 140, 0.06) !important;
  color: var(--hyve-gold) !important;
  border: 1px solid var(--hyve-border-strong) !important;
}
.btn-ghost:hover {
  background: rgba(255, 210, 140, 0.12) !important;
}

/* ── Inputs — friendlier, bigger touch targets */
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=datetime-local],
textarea, select {
  background: #0f0a04 !important;
  border: 1.5px solid var(--hyve-border) !important;
  border-radius: 10px !important;
  color: var(--hyve-text) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--hyve-gold) !important;
  box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.14) !important;
  outline: none !important;
}

/* ── Navigation — friendlier spacing, warmer underline */
nav {
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hyve-border) !important;
}
nav a:hover,
nav .links a:hover,
nav.top a.link:hover {
  color: var(--hyve-gold) !important;
}

/* ── Headings color */
h1 { color: var(--hyve-text) !important; }
h1 span, h1 strong { color: var(--hyve-gold) !important; }

/* ── Warm accent under main CTAs (gentle warm glow frame) */
.hero-btns a.btn-accent,
.buy-btn.primary,
.path-btn.primary {
  position: relative;
}

/* ── Research banner — less alarming, locked to a single line so it
      NEVER overlaps the nav sitting at top:30px. Content ellipses on
      mobile rather than wrapping into the nav. */
.research-banner {
  background: linear-gradient(90deg, rgba(245, 197, 66, 0.08), rgba(90, 196, 90, 0.06)) !important;
  color: var(--hyve-text-dim) !important;
  border-bottom: 1px solid var(--hyve-border) !important;
  font-weight: 500 !important;
  /* Lock to a 30px slot so top:30px nav never overlaps */
  height: 30px !important;
  padding: 7px 16px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10px !important;
}
.research-banner a { color: var(--hyve-gold) !important; }

/* ── Fixed top-right "tier" pills (free & subscriber) — move to the
      LEFT of the user menu area instead of overlapping the topbar
      logo/brand on community & chat. Also ensure they never collide
      with the nav on index. */
#free-tier-bar,
#sub-tier-bar {
  top: auto !important;
  bottom: 18px !important;
  right: 18px !important;
  left: auto !important;
  z-index: 9990 !important;
}

/* Suggest a Feature button lives at the top-middle of every page now — see
   suggest.js for the positioning. Intentionally no override here. */

/* ── Footer — soft */
footer {
  color: var(--hyve-text-mute) !important;
  border-top: 1px solid var(--hyve-border) !important;
}

/* ── Helpful utility: "soft glow" class (apply via JS or inline) */
.hyve-glow {
  box-shadow:
    0 0 0 1px var(--hyve-border-strong),
    0 20px 60px rgba(245, 158, 11, 0.18) !important;
}

/* ── Mission band — softer, warmer green */
[class*="mission"] {
  background: linear-gradient(135deg, #0f2010 0%, #0a180e 100%) !important;
  border: 1px solid rgba(126, 217, 142, 0.2) !important;
  border-radius: 18px !important;
}

/* ── Chips / badges — rounded pill style */
.badge, .eyebrow, .feat-tag, .k-status, .status-pill, .usertype,
.m-eyebrow, .stitle, .hero-eyebrow {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* ── Keep in-body code chips from looking brittle */
code {
  background: rgba(245, 197, 66, 0.08);
  color: var(--hyve-gold);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.9em;
}