/* CryptoSense Web — Theme (all tokens defined here, never hardcode hex elsewhere) */

:root {
  /* Background layers */
  --bg-void:       #080910;
  --bg-base:       #0D0E17;
  --bg-elevated:   #12131F;
  --bg-surface:    #191A2E;
  --bg-surface-2:  #1F2035;
  --bg-overlay:    #252640;

  /* Borders */
  --border-subtle:  #1E1F35;
  --border-default: #2A2B45;
  --border-accent:  #3D3F6B;

  /* Signal colors */
  --green:       #00D4A0;
  --green-dim:   rgba(0, 212, 160, 0.12);
  --red:         #FF4B6B;
  --red-dim:     rgba(255, 75, 107, 0.12);
  --amber:       #F0A500;
  --amber-dim:   rgba(240, 165, 0, 0.10);
  --purple:      #7C8CFF;
  --purple-dim:  rgba(124, 140, 255, 0.12);
  --cyan:        #00C8FF;

  /* Text */
  --text-primary:   #E8EAF0;
  --text-secondary: #9B9EC0;
  --text-muted:     #5C5F80;
  --text-ghost:     #3A3D5C;
  --text-amber:     #F0A500;

  /* Typography */
  --font-data: 'JetBrains Mono', 'Fira Code', monospace;
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  overflow: hidden;
  height: 100vh;
}

/* All numbers, prices, timestamps use data font */
.mono { font-family: var(--font-data); }

/* Amber = data labels — Bloomberg convention */
.label {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-amber);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Signal color utilities */
.green  { color: var(--green); }
.red    { color: var(--red); }
.amber  { color: var(--amber); }
.purple { color: var(--purple); }
.muted  { color: var(--text-muted); }

/* Scrollbars */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 2px; }

/* Live dot pulse animation */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.live-pulse { animation: pulse-dot 2s ease-in-out infinite; }

/* Signal border pulse animation */
@keyframes signal-pulse {
  0%   { border-left-color: transparent; }
  33%  { border-left-color: var(--pulse-color, var(--green)); }
  66%  { border-left-color: transparent; }
  100% { border-left-color: var(--pulse-color, var(--green)); }
}
.signal-pulse { animation: signal-pulse 1.5s ease-in-out 3; }

/* Typing dots */
@keyframes bounce-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-4px); opacity: 1; }
}
.typing-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: bounce-dot 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* Price flash animations */
@keyframes flash-green {
  0%   { background: var(--green-dim); }
  100% { background: transparent; }
}
@keyframes flash-red {
  0%   { background: var(--red-dim); }
  100% { background: transparent; }
}
.price-up   { animation: flash-green 0.3s ease-out; }
.price-down { animation: flash-red 0.3s ease-out; }

/* BTC dump banner slide-in */
@keyframes slide-in-top {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.slide-in { animation: slide-in-top 0.4s ease-out; }