/* ViewCoin — design tokens
   Palette: indigo/slate/blue, green/red trend badges (per brief)
   Display: Space Grotesk / Body: Inter / Data: JetBrains Mono (tabular nums)
   Signature: trading-terminal "live" ticker treatment + mono tabular data
*/

:root {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --ink: #1E293B;
  --ink-dim: #64748B;
  --border: #E2E8F0;
  --indigo: #4F46E5;
  --indigo-dim: #EEF2FF;
  --sky: #0EA5E9;
  --up: #16A34A;
  --up-bg: #F0FDF4;
  --down: #DC2626;
  --down-bg: #FEF2F2;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.10);
}

html.dark {
  --bg: #0B1120;
  --surface: #111A2E;
  --surface-2: #16213A;
  --ink: #E2E8F0;
  --ink-dim: #94A3B8;
  --border: #223049;
  --indigo: #818CF8;
  --indigo-dim: #1E2544;
  --sky: #38BDF8;
  --up: #4ADE80;
  --up-bg: #0F2A1B;
  --down: #F87171;
  --down-bg: #2C1414;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, sans-serif;
  transition: background .2s ease, color .2s ease;
}

.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.vc-surface { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.vc-border { border-color: var(--border); }
.vc-bg { background: var(--bg); }
.vc-bg-2 { background: var(--surface-2); }
.vc-ink { color: var(--ink); }
.vc-ink-dim { color: var(--ink-dim); }
.vc-indigo { color: var(--indigo); }
.vc-bg-indigo { background: var(--indigo); }
.vc-bg-indigo-dim { background: var(--indigo-dim); }

.vc-up { color: var(--up); }
.vc-down { color: var(--down); }
.vc-badge-up { background: var(--up-bg); color: var(--up); }
.vc-badge-down { background: var(--down-bg); color: var(--down); }

/* live pulse dot — signature element */
.live-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--up);
  position: relative;
  display: inline-block;
}
.live-dot::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--up);
  opacity: .6;
  animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(.5); opacity: .7; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* swap button rotation */
.swap-btn { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.swap-btn.spin { transform: rotate(180deg); }

/* accordion */
.faq-item[open] > summary .faq-chevron { transform: rotate(180deg); }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }

/* row trend accent border instead of generic pill-only badge */
.trend-row-up { border-left: 3px solid var(--up); }
.trend-row-down { border-left: 3px solid var(--down); }

@media (prefers-reduced-motion: reduce) {
  .live-dot::after, .swap-btn { animation: none !important; transition: none !important; }
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}