/* ── Tokens — extracted from app.html inline <style> in R_11a ── */
:root {
  --bg:        #0B0F14;
  --surface:   #121821;
  --elevated:  #18202C;
  --inset:     #0E141C;
  --card:      #161F2B;   /* modal/card surface (was undefined → .modal-box rendered transparent) */
  --card-bg:   #121821;   /* hover surface for inset buttons (e.g. .hm-tf-btn) */
  --border:    rgba(255,255,255,0.08);
  --border-s:  rgba(255,255,255,0.13);
  --text:      #ECEFF4;
  --muted:     #97A1B3;
  --dim:       #5E6878;
  --up:        #3DDC97;
  --up-soft:   rgba(61,220,151,0.12);
  --up-glow:   rgba(61,220,151,0.3);
  --dn:        #FF6B81;
  --dn-soft:   rgba(255,107,129,0.12);
  --blue:      #5B8DFF;
  --blue-soft: rgba(91,141,255,0.13);
  --violet:    #A78BFA;
  --amber:     #F7B955;
  --amber-soft:rgba(247,185,85,0.12);
  --r:         14px;
  --r-sm:      8px;
  --nav-h:     64px;
  --topbar-h:  54px;
  --mono:      'JetBrains Mono', monospace;
  --sans:      'Space Grotesk', sans-serif;
  /* Type scale — fintech hierarchy */
  --fs-display: 32px;   /* price-int, gauge-val */
  --fs-h1:      24px;   /* pred-price, score num */
  --fs-h2:      19px;   /* stat-val, topbar */
  --fs-body:    14px;   /* buttons, primary text */
  --fs-caption: 13px;   /* plan text, comments */
  --fs-label:   12px;   /* pairs, meta, secondary */
  --fs-tag:     11px;   /* uppercase chips, badges */
  --fs-micro:   10px;   /* live-badge, tiny dots */
}