/* ═══════════════════════════════════════════════════════════════
   AyaSend Brand System 2026
   Indigo Night · Marigold · Emerald Pulse · Sandstone · Berry
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --aya-indigo:    #1B1F3B;
  --aya-marigold:  #F0A202;
  --aya-emerald:   #0F9D7C;
  --aya-emerald2:  #0a7c62;
  --aya-sandstone: #FAF3E7;
  --aya-berry:     #B33B62;
  --aya-ink:       #1C1B1F;
}

/* ── Page Background — Warm Sandstone ──────────────────────── */
body {
  background-color: #FAF3E7;
}
html.dark body {
  background-color: #0b1120;
}

/* ── Typography — Fraunces for emotional headlines ──────────── */
.aya-headline {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Connection Glow — AyaSend signature visual motif ──────── */
@keyframes aya-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0   rgba(240,162,2,0.00),
      0 4px 18px rgba(15,157,124,0.28),
      0 2px 6px  rgba(0,0,0,0.10);
  }
  50% {
    box-shadow:
      0 0 0 9px rgba(240,162,2,0.14),
      0 6px 26px rgba(15,157,124,0.44),
      0 2px 6px  rgba(0,0,0,0.08);
  }
}
.aya-connection-glow {
  background: radial-gradient(circle, #F0A202 0%, #F0A202 78%, #0F9D7C 96%);
  border-radius: 50%;
  animation: aya-glow-pulse 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .aya-connection-glow {
    animation: none;
    box-shadow: 0 4px 20px rgba(15,157,124,0.30);
  }
}

/* ── "Find Top-Up Options" button — Emerald Pulse when enabled ─ */
#find-btn:not([disabled]) {
  background: linear-gradient(135deg, #0F9D7C 0%, #0a7c62 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(15,157,124,0.30), 0 2px 6px rgba(0,0,0,0.08) !important;
  border: none !important;
}

/* ── Recharge — trust badge "Secure" → Emerald Pulse tint ───── */
.rchg-badge-g {
  background: rgba(15,157,124,0.09) !important;
  color: #0a7c62 !important;
}
html.dark .rchg-badge-g {
  background: rgba(15,157,124,0.15) !important;
  color: #34d4b4 !important;
}

/* ── Recharge background glow — Emerald + Marigold warmth ───── */
#_rchg-glow {
  background:
    radial-gradient(ellipse 80% 55% at 50% -8%,
      rgba(15,157,124,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 88% 95%,
      rgba(240,162,2,0.05) 0%, transparent 60%) !important;
}
html.dark #_rchg-glow {
  background:
    radial-gradient(ellipse 80% 55% at 50% -8%,
      rgba(15,157,124,0.11) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 88% 95%,
      rgba(240,162,2,0.07) 0%, transparent 60%) !important;
}

/* ── Phone field focus ring — Emerald Pulse ─────────────────── */
#phone-field:focus-within {
  border-color: #0F9D7C !important;
  box-shadow: 0 0 0 3px rgba(15,157,124,0.13), 0 2px 8px rgba(15,157,124,0.08) !important;
}

/* ── Cards over Sandstone background stay crisp white ──────── */
.bg-white {
  background-color: #ffffff !important;
}

/* ── Bottom navigation — Emerald Pulse active pill ──────────── */
.bottom-nav-active {
  color: #0F9D7C !important;
  background: rgba(15,157,124,0.10) !important;
  border-radius: 14px !important;
}
html.dark .bottom-nav-active {
  color: #34d4b4 !important;
  background: rgba(15,157,124,0.13) !important;
}