/*
  AyaSend Design System — v1.0
  ════════════════════════════════════════════════════════════════════════
  The single source of truth for every visual decision on AyaSend.
  Import this FIRST, before any other stylesheet.

  Design philosophy:
    "Quietly intelligent." — Apple calm + Wise clarity + Bloomberg depth.

  Token categories:
    Brand · Semantic · Surface · Shadow · Gradient · Radius · Spacing
    Easing · Duration · Typography
  ════════════════════════════════════════════════════════════════════════
*/

/* ── 0. Font-feature optimization for financial data ───────────────── */
@layer base {
  .aya-numeric,
  .rc-amount,
  .aya-amount,
  [class*="rc-amount"],
  [data-animate-amount] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'ss01' 1;
    -webkit-font-smoothing: antialiased;
  }
}

/* ── 1. CSS Custom Properties (Design Tokens) ───────────────────────── */
:root {
  /* ─ Brand ─ */
  --aya-blue-50:   #eff6ff;
  --aya-blue-100:  #dbeafe;
  --aya-blue-200:  #bfdbfe;
  --aya-blue-400:  #60a5fa;
  --aya-blue-500:  #3b82f6;
  --aya-blue-600:  #2563eb;
  --aya-blue-700:  #1d4ed8;
  --aya-blue-800:  #1e40af;
  --aya-blue-900:  #1e3a8a;

  /* ─ Semantic ─ */
  --aya-success-light: rgba(220,252,231,0.7);
  --aya-success:       #22c55e;
  --aya-success-deep:  #15803d;
  --aya-warning-light: rgba(254,243,199,0.8);
  --aya-warning:       #f59e0b;
  --aya-warning-deep:  #92400e;
  --aya-error-light:   rgba(254,226,226,0.7);
  --aya-error:         #ef4444;
  --aya-error-deep:    #b91c1c;

  /* ─ Neutral scale ─ */
  --aya-slate-900: #0f172a;
  --aya-slate-800: #1e293b;
  --aya-slate-700: #334155;
  --aya-slate-600: #475569;
  --aya-slate-500: #64748b;
  --aya-slate-400: #94a3b8;
  --aya-slate-300: #cbd5e1;
  --aya-slate-200: #e2e8f0;
  --aya-slate-100: #f1f5f9;
  --aya-slate-50:  #f8fafc;

  /* ─ Surface ─ */
  --aya-surface-card:       #ffffff;
  --aya-surface-card-hover: rgba(248,250,252,0.98);
  --aya-surface-badge:      rgba(241,245,249,0.9);
  --aya-surface-intel:      linear-gradient(160deg,#0f172a 0%,#1e293b 100%);
  --aya-surface-best:       linear-gradient(160deg,rgba(252,254,255,1) 0%,rgba(239,246,255,0.99) 100%);

  /* ─ Shadow system ─ */
  --aya-shadow-xs:    0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.03);
  --aya-shadow-card:  0 3px 16px rgba(15,23,42,0.07), 0 1px 4px rgba(15,23,42,0.04);
  --aya-shadow-hover: 0 12px 36px rgba(15,23,42,0.10), 0 3px 10px rgba(15,23,42,0.06);
  --aya-shadow-best:  0 8px 32px rgba(37,99,235,0.13), 0 2px 8px rgba(37,99,235,0.07);
  --aya-shadow-glow:  0 0 0 2px rgba(59,130,246,0.35), 0 8px 32px rgba(37,99,235,0.18);
  --aya-shadow-glow-pulse: 0 0 0 3px rgba(59,130,246,0.25), 0 12px 40px rgba(37,99,235,0.22);
  --aya-shadow-cta:   0 4px 14px rgba(37,99,235,0.34), 0 1px 4px rgba(37,99,235,0.18), inset 0 1px 0 rgba(255,255,255,0.14);
  --aya-shadow-cta-hover: 0 8px 24px rgba(37,99,235,0.50), 0 2px 8px rgba(37,99,235,0.24);
  --aya-shadow-logo:  0 1px 4px rgba(15,23,42,0.07), inset 0 1px 0 rgba(255,255,255,0.8);

  /* ─ Gradients ─ */
  --aya-grad-primary:   linear-gradient(160deg, var(--aya-blue-500) 0%, var(--aya-blue-600) 60%, var(--aya-blue-700) 100%);
  --aya-grad-primary-h: linear-gradient(160deg, #60a5fa 0%, var(--aya-blue-500) 60%, var(--aya-blue-600) 100%);
  --aya-grad-success:   linear-gradient(135deg, rgba(220,252,231,0.7), rgba(187,247,208,0.4));
  --aya-grad-intel:     linear-gradient(145deg, #0f172a 0%, #1a2744 100%);
  --aya-grad-card-best: linear-gradient(160deg,rgba(252,254,255,1) 0%,rgba(244,249,255,0.99) 45%,rgba(235,244,255,0.97) 100%);
  --aya-grad-logo-bg:   linear-gradient(145deg, #f8fafc, #f1f5f9);

  /* ─ Border radius ─ */
  --aya-r-card:   20px;
  --aya-r-logo:   14px;
  --aya-r-badge:  20px;
  --aya-r-btn:    14px;
  --aya-r-chip:   8px;
  --aya-r-inner:  12px;

  /* ─ Spacing ─ */
  --aya-card-px: 20px;
  --aya-card-py: 16px;
  --aya-card-gap: 12px;

  /* ─ Easing curves ─ */
  --aya-spring:        cubic-bezier(0.22, 1,    0.36, 1);
  --aya-spring-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --aya-ease-out:      cubic-bezier(0.4,  0,    0.2,  1);
  --aya-ease-in:       cubic-bezier(0.4,  0,    1,    1);
  --aya-ease-sharp:    cubic-bezier(0.12, 0,    0.39, 0);

  /* ─ Duration ─ */
  --aya-t-instant:  60ms;
  --aya-t-fast:     120ms;
  --aya-t-base:     220ms;
  --aya-t-medium:   360ms;
  --aya-t-slow:     500ms;
  --aya-t-xslow:    700ms;
}

/* ── 2. Dark mode token overrides ───────────────────────────────────── */
html.dark, .dark {
  --aya-surface-card:      rgba(15,23,42,0.90);
  --aya-surface-card-hover:rgba(22,32,54,0.95);
  --aya-surface-badge:     rgba(30,41,59,0.7);
  --aya-slate-900: #f8fafc;
  --aya-slate-700: #cbd5e1;
  --aya-slate-500: #94a3b8;
  --aya-shadow-card:  0 3px 16px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.18);
  --aya-shadow-hover: 0 12px 36px rgba(0,0,0,0.35), 0 3px 10px rgba(0,0,0,0.22);
}

/* ── 3. Typography — premium money display ──────────────────────────── */
.aya-money-xl {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--aya-slate-900);
  -webkit-font-smoothing: antialiased;
}
.aya-money-lg {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--aya-slate-900);
  -webkit-font-smoothing: antialiased;
}
.aya-money-md {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--aya-slate-900);
}
.aya-currency-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--aya-slate-500);
  text-transform: uppercase;
}
.aya-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--aya-slate-400);
}
.aya-pct-positive { color: var(--aya-success-deep); font-weight: 700; }
.aya-pct-negative { color: var(--aya-error-deep);   font-weight: 700; }

/* ── 4. Utility animation classes (use via JS add/remove) ───────────── */
.aya-fade-in {
  animation: ayaFadeIn var(--aya-t-base) var(--aya-spring) both;
}
.aya-spring-in {
  animation: ayaSpringIn var(--aya-t-medium) var(--aya-spring) both;
}
.aya-pop {
  animation: ayaPop 300ms var(--aya-spring-bounce) both;
}
.aya-slide-up {
  animation: ayaSlideUp var(--aya-t-base) var(--aya-spring) both;
}

@keyframes ayaFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ayaSpringIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ayaPop {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes ayaSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── 5. Logo container (aya-logo-wrap) ──────────────────────────────── */
.aya-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--aya-r-logo);
  background: var(--aya-grad-logo-bg);
  border: 1px solid rgba(220,230,242,0.90);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--aya-shadow-logo);
  position: relative;
  transition: box-shadow var(--aya-t-base) var(--aya-spring);
}
.aya-logo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}
.rate-card-premium:hover .aya-logo-wrap {
  box-shadow: 0 2px 8px rgba(15,23,42,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ── 6. Trust signal row (reusable) ─────────────────────────────────── */
.aya-trust-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 600;
  color: var(--aya-slate-400);
}
.aya-trust-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* ── 7. Savings bar ─────────────────────────────────────────────────── */
.aya-savings-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--aya-grad-success);
  border: 1px solid rgba(74,222,128,0.25);
}
.aya-savings-bar__amount {
  font-size: 12px;
  font-weight: 800;
  color: var(--aya-success-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.aya-savings-bar__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--aya-success-deep);
  opacity: 0.8;
}

/* ── 8. Intelligence chip ───────────────────────────────────────────── */
.aya-intel-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--aya-r-badge);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.aya-intel-chip--live {
  background: rgba(220,252,231,0.7);
  color: var(--aya-success-deep);
  border-color: rgba(134,239,172,0.5);
}
.aya-intel-chip--checked {
  background: rgba(255,237,213,0.7);
  color: #c2410c;
  border-color: rgba(251,146,60,0.4);
}
.aya-intel-chip--estimated {
  background: rgba(254,243,199,0.6);
  color: var(--aya-warning-deep);
  border-color: rgba(253,211,77,0.5);
}
.aya-intel-chip--indicative {
  background: rgba(241,245,249,0.9);
  color: var(--aya-slate-500);
  border-color: rgba(210,220,232,0.7);
}
.aya-intel-chip__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Reduced motion override ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 9. Mobile density & breathing room ─────────────────────────── */

/* Provider cards: tighter on mobile but not cramped */
@media (max-width: 640px) {
  .rate-card-premium {
    margin-top: 8px !important;
    border-radius: 16px !important;
  }

  /* Inner padding reduction on mobile */
  .rate-card-premium > div:first-child {
    padding: 14px 16px 12px !important;
  }

  /* Footer (badge row + CTA) — stack naturally, reduce pad */
  .rate-card-premium > div:nth-child(2) {
    padding: 0 16px 14px !important;
    gap: 6px !important;
  }

  /* Send Now button — full width on narrow screens */
  .send-now-btn, .aya-cta-btn {
    flex: 1;
    justify-content: center;
  }

  /* Savings message — reduce vertical padding */
  .best-savings-msg {
    margin: 0 16px 10px !important;
    padding: 8px 12px !important;
  }

  /* Intelligence insight cards — slightly narrower on mobile */
  .aya-insight-card {
    flex: 0 0 148px !important;
    min-width: 148px !important;
    padding: 11px 11px 10px 14px !important;
  }

  /* Rank badge — keep same size */
  .provider-rank {
    width: 18px !important;
    height: 18px !important;
  }

  /* Logo container — slightly smaller on mobile */
  .aya-logo-wrap {
    width: 42px !important;
    height: 42px !important;
  }

  /* Provider name — prevent overflow */
  .rate-card-premium span[style*="font-size:15px"] {
    font-size: 14px !important;
  }

  /* Amount display — slightly smaller on mobile */
  .rc-amount.aya-amount {
    font-size: 22px !important;
  }
}

/* Extra small (< 380px) — tighter still */
@media (max-width: 380px) {
  .aya-insight-card {
    flex: 0 0 140px !important;
    min-width: 140px !important;
  }
  .rate-card-premium > div:first-child {
    padding: 12px 14px 10px !important;
  }
}

/* ── 10. Typography precision ───────────────────────────────────── */

/* All numeric financial values — force tabular nums globally */
.rc-amount, .aya-amount, .fee-value,
[data-animate-amount], [data-animate-fee] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
}

/* Currency symbol spacing */
.rc-currency {
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.4px;
}

/* Best-badge receive amount — extra premium treatment */
.rate-card-best .rc-amount {
  color: #0f172a;
  font-size: 28px !important;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* "FREE" fee badge — slightly elevated */
.rate-card-premium [style*="FREE"] {
  letter-spacing: 0.4px;
}

/* Delivery time line — consistent weight */
.rate-card-premium [style*="delivery_line"],
.rate-card-premium [class*="delivery"] {
  font-weight: 500;
  font-size: 11px;
}