/**
 * XRPL Home — Phase 1 theme system
 * Premium midnight palette with electric blue, purple, and magenta accents.
 * Legacy Lab tokens (--mint, --teal, etc.) are mapped for backward compatibility.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url("/css/xrpl-home-mobile.css?v=377");

:root {
  /* ── XRPL Home core palette ───────────────────────────── */
  --xh-midnight:       #060818;
  --xh-midnight-2:     #0a0d1a;
  --xh-midnight-3:     #0f1224;
  --xh-surface:        rgba(15, 18, 36, 0.72);
  --xh-surface-solid:  #0f1224;
  --xh-surface-2:      rgba(20, 24, 48, 0.85);
  --xh-glass:          rgba(255, 255, 255, 0.04);
  --xh-glass-border:   rgba(255, 255, 255, 0.08);
  --xh-glass-highlight:rgba(255, 255, 255, 0.12);

  --xh-blue:           #3b82f6;
  --xh-blue-bright:    #60a5fa;
  --xh-blue-dim:       rgba(59, 130, 246, 0.18);
  --xh-purple:         #8b5cf6;
  --xh-purple-dim:     rgba(139, 92, 246, 0.18);
  --xh-magenta:        #d946ef;
  --xh-magenta-dim:    rgba(217, 70, 239, 0.16);
  --xh-accent-gradient:linear-gradient(135deg, #3b82f6 0%, #8b5cf6 52%, #d946ef 100%);
  --xh-accent-gradient-soft:linear-gradient(135deg, rgba(59,130,246,.35), rgba(139,92,246,.28), rgba(217,70,239,.22));

  --xh-ink:            #f4f6ff;
  --xh-ink-2:          #c8d0e8;
  --xh-ink-muted:      #8b95b5;
  --xh-ink-faint:      rgba(200, 208, 232, 0.55);

  /* ── Legacy Lab aliases (homepage + gradual migration) ─ */
  --bg:                var(--xh-midnight);
  --panel:             var(--xh-midnight-2);
  --panel2:            var(--xh-midnight-3);
  --ui:                #141830;
  --border:            rgba(96, 165, 250, 0.28);
  --border2:           rgba(139, 92, 246, 0.45);
  --mint:              #7dd3fc;
  --teal:              #60a5fa;
  --green:             #93c5fd;
  --txt:               var(--xh-ink);
  --muted:             var(--xh-ink-muted);
  --danger:            #f87171;
  --warn:              #fbbf24;
  --gold:              #c4b5fd;
  --gold-soft:         rgba(196, 181, 253, 0.2);
  --shadow:            0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--xh-glass-highlight);
  --shadow2:           0 16px 48px rgba(59, 130, 246, 0.12), inset 0 1px 0 var(--xh-glass-highlight);

  /* ── Typography ───────────────────────────────────────── */
  --xh-font-display:   'Poppins', 'Space Grotesk', system-ui, sans-serif;
  --xh-font-body:      'Poppins', 'Outfit', system-ui, sans-serif;
  --xh-font-accent:    'Poppins', 'Sora', system-ui, sans-serif;

  /* ── Radii & spacing ──────────────────────────────────── */
  --xh-r-sm:   10px;
  --xh-r-md:   14px;
  --xh-r-lg:   18px;
  --xh-r-xl:   24px;
  --xh-r-pill: 999px;

  /* ── Motion ───────────────────────────────────────────── */
  --xh-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --xh-dur:    0.2s;
}

/* Scoped to homepage during Phase 1 */
body.xrpl-home-page {
  font-family: var(--xh-font-body);
  background:
    radial-gradient(ellipse 120% 80% at 20% -10%, rgba(59, 130, 246, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 85% 5%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(217, 70, 239, 0.08) 0%, transparent 45%),
    var(--xh-midnight);
  color: var(--xh-ink);
  min-height: 100dvh;
}

body.xrpl-home-page a {
  color: var(--xh-blue-bright);
  text-decoration: none;
}

body.xrpl-home-page a:hover {
  color: #bfdbfe;
}

/* Glass panel utility */
.xh-glass {
  background: var(--xh-surface);
  border: 1px solid var(--xh-glass-border);
  border-radius: var(--xh-r-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

/* Primary button */
body.xrpl-home-page .btn,
body.xrpl-home-page .xh-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.2rem;
  border: 0;
  border-radius: var(--xh-r-md);
  font-family: var(--xh-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  background: var(--xh-accent-gradient);
  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.35);
  cursor: pointer;
  transition: transform var(--xh-dur) var(--xh-ease), box-shadow var(--xh-dur) var(--xh-ease), filter var(--xh-dur) var(--xh-ease);
  text-decoration: none;
}

body.xrpl-home-page .btn:hover,
body.xrpl-home-page .xh-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
  filter: brightness(1.05);
}

body.xrpl-home-page .btn.secondary,
body.xrpl-home-page .xh-btn-secondary {
  background: transparent;
  color: var(--xh-ink);
  border: 1px solid var(--xh-glass-highlight);
  box-shadow: none;
}

body.xrpl-home-page .btn.secondary:hover,
body.xrpl-home-page .xh-btn-secondary:hover {
  background: var(--xh-glass);
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
}

/* Header overrides on homepage */
body.xrpl-home-page #labGlobalHeader.appbar {
  background: rgba(6, 8, 24, 0.88);
  border-bottom: 1px solid var(--xh-glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.xrpl-home-page #labGlobalHeader .brand span {
  font-family: var(--xh-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--xh-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.xrpl-home-page #labGlobalHeader .btn-ghost {
  color: var(--xh-ink-2);
  border-color: var(--xh-glass-border);
  background: transparent;
  font-family: var(--xh-font-body);
  font-weight: 600;
}

body.xrpl-home-page #labGlobalHeader .btn-ghost:hover,
body.xrpl-home-page #labGlobalHeader .btn-ghost.nav-active {
  color: var(--xh-ink);
  border-color: rgba(139, 92, 246, 0.45);
  background: var(--xh-glass);
}

body.xrpl-home-page #labGlobalHeader .pill {
  border-color: rgba(139, 92, 246, 0.4);
  background: var(--xh-glass);
  color: var(--xh-ink-2);
  font-family: var(--xh-font-body);
}

body.xrpl-home-page #labGlobalHeader .btn-nav-connect,
body.xrpl-home-page #labGlobalHeader .lab-wallet-connect-btn,
body.xrpl-home-page #labGlobalHeader #btnConnectHeader {
  color: var(--xh-ink);
  border-color: rgba(139, 92, 246, 0.5);
  background: var(--xh-glass);
  font-family: var(--xh-font-body);
  font-weight: 600;
}

body.xrpl-home-page #labGlobalHeader .btn-nav-connect:hover,
body.xrpl-home-page #labGlobalHeader .lab-wallet-connect-btn:hover,
body.xrpl-home-page #labGlobalHeader #btnConnectHeader:hover {
  border-color: rgba(59, 130, 246, 0.55);
  background: rgba(139, 92, 246, 0.12);
  color: var(--xh-ink);
}

body.xrpl-home-page .lab-universal-search-input {
  border-color: var(--xh-glass-border) !important;
  background: var(--xh-glass) !important;
  color: var(--xh-ink) !important;
}

body.xrpl-home-page .lab-universal-search-input::placeholder {
  color: var(--xh-ink-muted) !important;
}

/* Mobile drawer + hamburger — override inline nav greens on homepage */
body.xrpl-home-page .lab-nav-drawer,
body.xrpl-home-page .mobile-nav-drawer {
  background: var(--xh-surface-solid) !important;
  border-right-color: var(--xh-glass-border) !important;
}

body.xrpl-home-page .lab-nav-drawer a,
body.xrpl-home-page .lab-nav-drawer-link {
  border-color: var(--xh-glass-border) !important;
  background: var(--xh-glass) !important;
  color: var(--xh-ink-2) !important;
  font-weight: 600 !important;
}

body.xrpl-home-page .lab-nav-drawer a.nav-active,
body.xrpl-home-page .lab-nav-drawer a:hover,
body.xrpl-home-page .lab-nav-drawer-link.nav-active,
body.xrpl-home-page .lab-nav-drawer-link:hover {
  border-color: rgba(139, 92, 246, 0.45) !important;
  background: rgba(139, 92, 246, 0.1) !important;
  color: var(--xh-ink) !important;
  box-shadow: none !important;
}

body.xrpl-home-page .lab-nav-hamburger {
  border-color: var(--xh-glass-border) !important;
  color: var(--xh-ink-2) !important;
  background: var(--xh-glass) !important;
}

body.xrpl-home-page #labNavDrawer > div:first-child {
  color: var(--xh-purple) !important;
  font-family: var(--xh-font-display);
}

/* Text gradient utility */
.xh-text-gradient {
  background: var(--xh-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Supporting brand line */
.xh-powered-by {
  font-size: 0.82rem;
  color: var(--xh-ink-faint);
  font-weight: 500;
}

.xh-powered-by strong {
  color: var(--xh-ink-muted);
  font-weight: 600;
}