/* ═══════════════════════════════════════════════
   AUTOBOT TRADE — Binance Design System
   Mobile-only · Dark canvas (#0b0e11)
   Yellow accent (#FCD535) · Trading green/red
═══════════════════════════════════════════════ */

:root {
  /* Canvas & Surfaces */
  --canvas:          #0b0e11;
  --surface-card:    #1e2329;
  --surface-elevated:#2b3139;
  --surface-input:   #2b3139;

  /* Borders / Hairlines */
  --hairline:        #2b3139;
  --border-strong:   #3c4149;

  /* Brand Yellow */
  --yellow:          #FCD535;
  --yellow-active:   #f0b90b;
  --yellow-disabled: #3a3a1f;
  --on-yellow:       #181a20;

  /* Text */
  --text-primary:    #eaecef;
  --text-body:       #eaecef;
  --text-muted:      #707a8a;
  --text-muted-strong:#929aa5;
  --text-on-dark:    #ffffff;
  --ink:             #181a20;

  /* Trading Semantics */
  --up:   #0ecb81;
  --down: #f6465d;

  /* Info */
  --info: #3b82f6;

  /* Spacing (4-multiple scale) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* Border Radius */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-pill:9999px;

  /* Topbar / Bottomnav height */
  --topbar-h:  52px;
  --botnav-h:  60px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0,0,0,.4);
  --shadow-up:   0 -2px 12px rgba(0,0,0,.5);
}