/* =========================================================
   GateWallet — design tokens, reset, motion primitives.
   Dark is the default theme; light is a full override set.
   Everything that MOVES is defined here so every module
   (views, sheets, splash, notifications) shares one language.
   ========================================================= */

/* ---------------------------------------------------------
   1. Tokens — dark theme (default)
   --------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg:        #101014;
  --bg-sunk:   #0A0B0E;
  --bg-elev:   #17181D;
  --bg-card:   #1C1D23;
  --bg-hover:  #23242B;
  --bg-raise:  #2A2B33;
  --line:      #26272F;
  --line-soft: #1F2027;

  /* Text */
  --text:      #EAECEF;
  --text-dim:  #8A8F98;
  --text-mute: #5B606A;
  --text-inv:  #0B0C0F;

  /* Brand */
  --brand-1:      #F7A600;             /* gold — primary accent */
  --brand-2:      #7B5BFF;             /* violet — gradients, secondary */
  --brand-1-soft: rgba(247, 166, 0, .14);
  --brand-2-soft: rgba(123, 91, 255, .16);
  --brand-grad:   linear-gradient(135deg, #7B5BFF 0%, #F7A600 100%);
  --brand-grad-r: linear-gradient(135deg, #F7A600 0%, #7B5BFF 100%);

  /* Accent aliases kept for every existing rule/view */
  --accent:      var(--brand-1);
  --accent-ink:  #17181D;
  --accent-soft: var(--brand-1-soft);

  /* Market direction */
  --up:        #20B26C;
  --up-soft:   rgba(32, 178, 108, .14);
  --up-line:   rgba(32, 178, 108, .38);
  --down:      #EF454A;
  --down-soft: rgba(239, 69, 74, .14);
  --down-line: rgba(239, 69, 74, .38);

  /* Translucent / glass */
  --glass-bg:   rgba(28, 29, 35, .72);
  --glass-line: rgba(255, 255, 255, .08);
  --notify-bg:  rgba(26, 27, 33, .95);   /* notifications sit over vivid banners — stay readable */
  --scrim:      rgba(0, 0, 0, .55);
  --sheen:      rgba(255, 255, 255, .07);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .38);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, .52);
  --shadow-card: none;

  /* Shape */
  --radius:     14px;
  --radius-lg:  18px;
  --radius-sm:  10px;
  --radius-xs:  6px;
  --radius-pill: 999px;

  /* Layout */
  --tabbar-h:   58px;
  --topbar-h:   52px;
  --topbar-min: 38px;                        /* collapsed, icons only */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Motion — shared contract */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in:     cubic-bezier(.4, 0, 1, 1);
  --dur-fast: 130ms;
  --dur:      220ms;
  --dur-slow: 380ms;
  --dur-view: 200ms;

  /* Type */
  --ff: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fm: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------
   2. Tokens — light theme
   --------------------------------------------------------- */

/* Surfaces that must feel snappier than the rest (spot / markets). */
.fast-surface,
.view.fast {
  --dur-fast: 100ms;
  --dur:      150ms;
  --dur-slow: 240ms;
  --dur-view: 180ms;
}

/* ---------------------------------------------------------
   3. Reset
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff);
  font-size: 14px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { background: none; border: 0; outline: none; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
ul, li { list-style: none; margin: 0; padding: 0; }
svg { display: block; }
::-webkit-scrollbar { width: 0; height: 0; }
::selection { background: var(--brand-1-soft); }

/* ---------------------------------------------------------
   4. Atomic helpers
   --------------------------------------------------------- */
.num,
.count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.count { transition: color var(--dur) var(--ease-out); }
.mono { font-family: var(--fm); }
.up   { color: var(--up); }
.down { color: var(--down); }
.dim  { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.gold { color: var(--brand-1); }
.violet { color: var(--brand-2); }
.hidden { display: none !important; }
.grad-text {
  background: var(--brand-grad-r);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Translucent blurred surface for overlays. */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-line);
}

/* ---------------------------------------------------------
   5. Keyframe library (shared names — do not rename)
   --------------------------------------------------------- */
@keyframes fadeIn      { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeOut     { from { opacity: 1 } to { opacity: 0 } }

@keyframes slideUp     { from { opacity: 0; transform: translate3d(0, 100%, 0) } to { opacity: 1; transform: none } }
@keyframes slideDown   { from { opacity: 1; transform: none } to { opacity: .4; transform: translate3d(0, 100%, 0) } }

@keyframes slideInRight { from { opacity: 0; transform: translate3d(26px, 0, 0) } to { opacity: 1; transform: none } }
@keyframes slideOutLeft { from { opacity: 1; transform: none } to { opacity: 0; transform: translate3d(-26px, 0, 0) } }

@keyframes popIn  { from { opacity: 0; transform: scale(.86) translate3d(0, 10px, 0) } to { opacity: 1; transform: none } }
@keyframes popOut { from { opacity: 1; transform: none } to { opacity: 0; transform: scale(.94) translate3d(0, 6px, 0) } }

@keyframes rowIn  { from { opacity: 0; transform: translate3d(0, 9px, 0) } to { opacity: 1; transform: none } }

@keyframes shimmer { from { background-position: 100% 50% } to { background-position: 0 50% } }

/* Expanding ring used by .pulse-dot and live badges. */
@keyframes pulse { 0% { transform: scale(1); opacity: .55 } 70%, 100% { transform: scale(2.7); opacity: 0 } }

@keyframes flashUp   { from { background-color: var(--up-soft) }   to { background-color: transparent } }
@keyframes flashDown { from { background-color: var(--down-soft) } to { background-color: transparent } }

/* Track holds two identical copies, so -50% loops seamlessly. */
@keyframes marquee { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(-50%, 0, 0) } }

@keyframes spin { to { transform: rotate(360deg) } }

/* --glow-c lets any element pick the halo colour. */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 16px -6px var(--glow-c, var(--brand-1)) }
  50%      { box-shadow: 0 0 34px 0px var(--glow-c, var(--brand-1)) }
}

/* JS sets --cx/--cy/--cr per piece for a natural scatter. */
@keyframes confetti {
  0%   { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) }
  80%  { opacity: 1 }
  100% { opacity: 0; transform: translate3d(var(--cx, 0px), var(--cy, 160px), 0) rotate(var(--cr, 520deg)) }
}

/* --- supporting keyframes --- */
@keyframes viewEnter  { from { opacity: 0; transform: translate3d(0, 10px, 0) } to { opacity: 1; transform: none } }
@keyframes viewExit   { from { opacity: 1; transform: none } to { opacity: 0; transform: translate3d(0, -6px, 0) } }
@keyframes notifyIn   { from { opacity: 0; transform: translate3d(0, -18px, 0) scale(.94) } to { opacity: 1; transform: none } }
@keyframes notifyOut  { from { opacity: 1; transform: none } to { opacity: 0; transform: translate3d(0, -12px, 0) scale(.96) } }
@keyframes shine      { 0% { transform: translate3d(-140%, 0, 0) skewX(-18deg) } 60%, 100% { transform: translate3d(240%, 0, 0) skewX(-18deg) } }
@keyframes ripple     { from { transform: scale(0); opacity: .34 } to { transform: scale(1); opacity: 0 } }
@keyframes floatY     { 0%, 100% { transform: translate3d(0, 0, 0) } 50% { transform: translate3d(0, -6px, 0) } }
@keyframes drift      { 0%, 100% { transform: translate3d(0, 0, 0) scale(1) } 50% { transform: translate3d(4%, -5%, 0) scale(1.12) } }
@keyframes barGrow    { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* Legacy names still referenced by inline animations in core/ui.js. */
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes up   { from { transform: translateY(100%) } to { transform: none } }
@keyframes sk   { from { background-position: 100% 50% } to { background-position: 0 50% } }

/* ---------------------------------------------------------
   6. Motion utilities
   --------------------------------------------------------- */

/* View transitions driven by the router. */
.view-enter { animation: viewEnter var(--dur-view) var(--ease-out) both; }
.view-exit  { animation: viewExit 110ms var(--ease-out) both; }

/* Staggered list reveal; JS sets --i on each child. */
.stagger > *      { animation: rowIn .34s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 22ms); }
.stagger.fast > * { animation-duration: .24s; animation-delay: calc(var(--i, 0) * 20ms); }

/* Tactile press feedback. */
.press { transition: transform var(--dur-fast) var(--ease-out); }
.press:active { transform: scale(.97); }

/* Value change flashes. */
.flash-up   { animation: flashUp .5s var(--ease-out); }
.flash-down { animation: flashDown .5s var(--ease-out); }

/* Live indicator with an expanding ring. */
.pulse-dot {
  position: relative; display: inline-block; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--up);
}
.pulse-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: pulse 1.9s var(--ease-out) infinite;
}
.pulse-dot.gold { background: var(--brand-1); }
.pulse-dot.off  { background: var(--text-mute); }
.pulse-dot.off::after { animation: none; }

/* Running ticker strip: .ticker-track must contain two copies of the row. */
.ticker-marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-marquee > .ticker-track {
  display: flex; width: max-content; will-change: transform;
  animation: marquee var(--marquee-dur, 34s) linear infinite;
}
.ticker-marquee:active > .ticker-track,
.ticker-marquee.paused > .ticker-track { animation-play-state: paused; }

/* Shimmer placeholder. */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 37%, var(--bg-card) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease infinite;
  border-radius: var(--radius-xs);
}

/* Ripple ink injected by anim.js ripple(). */
.ripple-host { position: relative; overflow: hidden; }
.ripple-ink {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; transform: scale(0);
  animation: ripple .55s var(--ease-out) forwards;
}

/* Confetti pieces injected by anim.js confettiBurst(). */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 220; overflow: hidden; }
.confetti-piece {
  position: absolute; width: 7px; height: 11px; border-radius: 2px;
  will-change: transform, opacity;
  animation: confetti var(--cd, 1100ms) var(--ease-out) forwards;
}

.spin { animation: spin 1s linear infinite; }

/* ---------------------------------------------------------
   7. Reduced motion — keep meaning, drop the movement
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-marquee > .ticker-track { animation: none !important; transform: none !important; }
  .pulse-dot::after,
  .confetti-layer,
  .splash-mesh { display: none !important; }
}