/* ═══════════════════════════════════════════════════════════════
   HARAZI — Design tokens
   Terminal-dark, crypto-native. All hex codes live here.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ──────────────────────────────────────────── */
  --bg-0:      #07090d;           /* page background */
  --bg-1:      #0c1018;           /* panels */
  --bg-2:      #131824;           /* elevated rows, card headers */
  --bg-3:      #1a2030;           /* hover, selected */
  --bg-4:      #242b3d;           /* active chip, pressed */
  --border:    #1f2533;           /* hairlines */
  --border-hi: #2b3344;           /* card borders, focus outline */

  /* ── Text ──────────────────────────────────────────────── */
  --text-0:    #e8ecf3;           /* primary */
  --text-1:    #9aa3b2;           /* secondary, labels */
  --text-2:    #5b6573;           /* tertiary, captions */
  --text-3:    #38404d;           /* disabled, empty state */

  /* ── Directional semantics ─────────────────────────────── */
  --bull:       #26a69a;          /* TradingView teal */
  --bull-soft:  rgba(38, 166, 154, 0.12);
  --bull-line:  rgba(38, 166, 154, 0.35);
  --bear:       #ef5350;
  --bear-soft:  rgba(239, 83, 80, 0.12);
  --bear-line:  rgba(239, 83, 80, 0.35);
  --win:        #3ed598;
  --win-soft:   rgba(62, 213, 152, 0.14);
  --loss:       #ff5470;
  --loss-soft:  rgba(255, 84, 112, 0.14);
  --warn:       #ffb547;
  --warn-soft:  rgba(255, 181, 71, 0.14);
  --info:       #4d8eff;
  --info-soft:  rgba(77, 142, 255, 0.14);
  --accent:     #b888ff;
  --accent-soft:rgba(184, 136, 255, 0.14);

  /* ── Market-type accents (forward-compat) ──────────────── */
  --mkt-spot:   #4d8eff;
  --mkt-perp:   #b888ff;
  --mkt-fx:     #ffb547;

  /* ── Typography ────────────────────────────────────────── */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', ui-monospace, monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-28: 28px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight: 1.1;
  --lh-base:  1.4;
  --lh-loose: 1.6;

  /* ── Space scale ───────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* ── Structural ────────────────────────────────────────── */
  --h-topbar:    44px;
  --h-statusbar: 28px;
  --h-row:       32px;
  --h-toolbar:   40px;

  --r-1: 3px;
  --r-2: 5px;
  --r-3: 7px;
  --r-4: 10px;

  /* ── Animation ─────────────────────────────────────────── */
  --t-fast:  120ms ease;
  --t-base:  180ms ease;
  --t-slow:  260ms ease;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-1: 0 1px 0 rgba(0,0,0,.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,.45);
  --shadow-3: 0 8px 28px rgba(0,0,0,.55);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.02);
}