/* ══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — single source of truth for colour, type, space and motion.

   Phase 5. The dashboard previously carried 13 separate inline <style> blocks,
   each redeclaring its own hex values and spacing. Anything defined here must
   NOT be redeclared elsewhere; change it once and it changes everywhere.

   Reference points: Bloomberg's information density, TradingView's chart
   ergonomics, Linear's typographic restraint. Not copying any of them.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── surface ─────────────────────────────────────────────────────────── */
  --bg:            #0a0c10;
  --bg-raised:     #0e1116;
  --panel:         #111318;
  --panel-2:       #151821;
  --panel-3:       #1a1e29;
  --border:        #1e2330;
  --border-2:      #2a3142;
  --border-focus:  #3a4560;

  /* ── text ────────────────────────────────────────────────────────────── */
  --text:          #e8eaf0;
  --text-2:        #a8b0c4;
  --muted:         #6b7590;
  --faint:         #444d63;

  /* ── brand ───────────────────────────────────────────────────────────── */
  --gold:          #f5c842;
  --gold-2:        #ffb700;
  --gold-dim:      rgba(245, 200, 66, .13);
  --gold-line:     rgba(245, 200, 66, .32);

  /* ── semantic ────────────────────────────────────────────────────────── */
  --bull:          #00d68f;
  --bull-dim:      rgba(0, 214, 143, .13);
  --bear:          #ff4060;
  --bear-dim:      rgba(255, 64, 96, .13);
  --neutral:       #6b7590;
  --warn:          #ffa726;
  --info:          #3d8bfd;
  --info-dim:      rgba(61, 139, 253, .13);

  /* ── typography ──────────────────────────────────────────────────────── */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Tabular figures matter: without them, live prices jitter horizontally on
     every tick because digit widths differ. */
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:   0.62rem;
  --fs-sm:   0.72rem;
  --fs-base: 0.82rem;
  --fs-md:   0.92rem;
  --fs-lg:   1.05rem;
  --fs-xl:   1.35rem;
  --fs-2xl:  1.9rem;
  --fs-3xl:  2.6rem;
  --fs-hero: clamp(2.1rem, 5.2vw, 3.9rem);

  --fw-normal: 400;
  --fw-med:    600;
  --fw-bold:   700;
  --fw-black:  800;

  --lh-tight: 1.15;
  --lh-base:  1.55;

  /* ── spacing — 4px base ──────────────────────────────────────────────── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ── radius ──────────────────────────────────────────────────────────── */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-full: 999px;

  /* ── elevation ───────────────────────────────────────────────────────── */
  --e-1: 0 1px 3px rgba(0, 0, 0, .3);
  --e-2: 0 6px 20px rgba(0, 0, 0, .35);
  --e-3: 0 18px 50px rgba(0, 0, 0, .5);
  --glow-gold: 0 0 40px rgba(245, 200, 66, .16);

  /* ── motion ──────────────────────────────────────────────────────────── */
  --t-fast: 140ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 220ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 380ms cubic-bezier(.4, 0, .2, 1);

  /* ── layout ──────────────────────────────────────────────────────────── */
  --max-w: 1200px;
  --header-h: 58px;
}

/* Respect the OS setting. Vestibular disorders are real and animation can
   trigger genuine nausea; this is not a nice-to-have. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}