/* Bitpedia design tokens — single source of truth. See .claud/skills/bitpedia-frontend-design/SKILL.md */
:root {
  /* Brand */
  --bp-blue: #698AE4;
  --bp-blue-2: #6E8CEA;
  --bp-blue-glow: rgba(105, 138, 228, .35);

  /* Surfaces */
  --bg-0: #080B15;
  --bg-1: #0B1020;
  --bg-2: #101731;
  --card: rgba(20, 28, 54, .55);
  --card-brd: rgba(120, 150, 240, .14);
  --card-brd-hi: rgba(120, 150, 240, .40);

  /* Text */
  --txt: #EAF0FF;
  --txt-dim: #93A0C4;
  --txt-faint: #5C6893;

  /* Semantic */
  --up: #2FD37A;
  --up-bg: rgba(47, 211, 122, .12);
  --down: #FF5D6C;
  --down-bg: rgba(255, 93, 108, .12);
  --sell: #FF9F45;
  --buy: #5BC8FF;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  color-scheme: dark;
}

body {
  background: var(--bg-1);
  color: var(--txt);
  font-family: 'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
}

.font-tabular {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.glass {
  background: var(--card);
  border: 1px solid var(--card-brd);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.glass-hi {
  border-color: var(--card-brd-hi);
}

/* Signature gradient-border reveal on hover, via mask-composite */
.gradient-border-hover {
  position: relative;
}
.gradient-border-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--bp-blue), var(--bp-blue-2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s var(--ease-out, ease);
  pointer-events: none;
}
.gradient-border-hover:hover::before {
  opacity: 1;
}

@keyframes bp-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--up-bg); }
  50% { opacity: .6; box-shadow: 0 0 0 4px transparent; }
}
.live-dot {
  animation: bp-pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* scroll-reveal base state, lifted by JS adding .is-visible */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* value-change pop */
@keyframes bp-pop {
  0% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.value-pop {
  animation: bp-pop .25s cubic-bezier(.16,1,.3,1);
}

/* Category tab pills — active state toggled via JS (main.js) */
.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-dim);
  white-space: nowrap;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.tab-btn:hover {
  color: var(--txt);
}
.tab-btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--bp-blue), var(--bp-blue-2));
  box-shadow: 0 6px 20px var(--bp-blue-glow);
}
.tab-btn.is-active:hover {
  color: #fff;
}

/* Number flash — briefly tints a card on value change (diffed across page
   refreshes via localStorage in main.js, since there is no live AJAX push). */
@keyframes bp-flash-up {
  0% { background-color: var(--up-bg); }
  100% { background-color: var(--card); }
}
@keyframes bp-flash-down {
  0% { background-color: var(--down-bg); }
  100% { background-color: var(--card); }
}
.flash-up { animation: bp-flash-up .8s ease; }
.flash-down { animation: bp-flash-down .8s ease; }