/* ============================================================
 * Gradient tokens — the system's signature decorative surfaces.
 * Present across all four files: pastel radial "jelly" glows on
 * icon tiles & feature cards, white frosted sheen on membership
 * cards, and deep slate/navy gradients for dark cards.
 * ============================================================ */
:root {
  /* Pastel radial "jelly" glows — layer over a white/tinted surface;
     each fades to transparent at the edge. Position the center per use. */
  --glow-blue:  radial-gradient(circle at 50% 40%, rgba(160, 189, 255, 0.90), rgba(160, 189, 255, 0) 70%); /* @kind color */
  --glow-cyan:  radial-gradient(circle at 50% 40%, rgba(192, 234, 255, 0.90), rgba(192, 234, 255, 0) 70%); /* @kind color */
  --glow-lilac: radial-gradient(circle at 50% 40%, rgba(227, 215, 255, 0.90), rgba(227, 215, 255, 0) 70%); /* @kind color */

  /* App screen backdrop — the REAL page background across all wallet tabs
     (Me / Home / Wallet). NOT flat gray: a soft cool wash, sky-blue at the
     top-left blending to lilac top-right, feathering down to the neutral
     screen color by ~55%. Apply to the screen root (.app-screen). Dark-theme
     value is overridden in colors.css. */
  --app-backdrop:
      radial-gradient(135% 78% at 10% -10%, rgba(150, 186, 246, 0.66), rgba(150, 186, 246, 0) 52%),
      radial-gradient(130% 72% at 100% -8%, rgba(212, 198, 241, 0.62), rgba(212, 198, 241, 0) 50%),
      linear-gradient(180deg, #E9EFFB 0%, #F2F4F8 42%, #F7F7F7 68%); /* @kind color */

  /* Frosted membership-card surface: pastel glows under a white sheen.
     This recreates the published "白色渐变" treatment. */
  --sheen-white: linear-gradient(180deg, rgba(255, 255, 255, 0.48), #FFFFFF); /* @kind color */
  --card-frosted:
      var(--sheen-white),
      radial-gradient(60% 80% at 18% 12%, rgba(160, 189, 255, 0.55), rgba(160, 189, 255, 0) 60%),
      radial-gradient(55% 75% at 85% 20%, rgba(227, 215, 255, 0.50), rgba(227, 215, 255, 0) 60%),
      radial-gradient(70% 90% at 70% 95%, rgba(192, 234, 255, 0.50), rgba(192, 234, 255, 0) 60%);

  /* Brand button gradient (optional richer filled CTA) */
  --gradient-primary: linear-gradient(180deg, #3392FF, var(--blue-primary));

  /* Coupon / voucher warm gradient */
  --gradient-coupon: linear-gradient(135deg, var(--peach-grad-start), var(--peach-grad-end));

  /* Dark "deep" card / header surfaces (consistent across files) */
  --gradient-card-dark: radial-gradient(120% 120% at 50% 0%, var(--slate-grad-start), var(--slate-grad-end));
  --gradient-card-navy: radial-gradient(120% 120% at 50% 0%, var(--navy-grad-start), var(--navy-grad-end));
  --gradient-card-teal: radial-gradient(120% 120% at 50% 0%, var(--teal-grad-start), var(--teal-grad-end));
}