/* ============================================================
   MarketPulse — Design Tokens
   Semantic color system:
     BLUE   = platform / technology / neutral analytical
     GREEN  = bullish / confirmed / positive
     RED    = bearish / rejected / risk
     AMBER  = attention / processing / important
     GRAY   = neutral / inactive / unavailable
   ============================================================ */

:root {
  /* ---- surfaces ---- */
  --bg-void:      #05070B;
  --bg-canvas:    #080B11;
  --bg-panel:     #0C1017;
  --bg-elev:      #121826;
  --bg-elev-2:    #18202F;
  --bg-input:     #0F141D;

  /* ---- lines ---- */
  --line:         rgba(255,255,255,.065);
  --line-2:       rgba(255,255,255,.11);
  --line-3:       rgba(255,255,255,.18);
  --grid:         rgba(255,255,255,.035);

  /* ---- text ---- */
  --t1: #E9EDF4;
  --t2: #94A1B5;
  --t3: #5B6879;
  --t4: #3A4453;

  /* ---- semantic ---- */
  --bull:      #16C98D;
  --bull-2:    #0E9C6C;
  --bull-dim:  rgba(22,201,141,.13);
  --bull-glow: rgba(22,201,141,.30);

  --bear:      #FF4D62;
  --bear-2:    #D93549;
  --bear-dim:  rgba(255,77,98,.13);
  --bear-glow: rgba(255,77,98,.30);

  --amber:     #FFB020;
  --amber-dim: rgba(255,176,32,.13);
  --amber-glow:rgba(255,176,32,.28);

  --blue:      #3D7DFF;
  --blue-2:    #2A62D8;
  --blue-dim:  rgba(61,125,255,.13);
  --blue-glow: rgba(61,125,255,.28);

  --gray:      #6E7B8F;
  --gray-dim:  rgba(110,123,143,.13);

  /* indicator palette (analytical, not semantic) */
  --ema9:  #3D7DFF;
  --ema21: #9B6BFF;
  --ema50: #E8A33D;
  --bb:    #4D5D78;

  /* ---- type ---- */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  /* ---- motion ---- */
  --d-instant: 90ms;
  --d-fast:    140ms;
  --d-base:    200ms;
  --d-slow:    300ms;
  --d-delib:   460ms;

  --e-standard: cubic-bezier(.2,0,0,1);
  --e-enter:    cubic-bezier(.16,1,.3,1);
  --e-exit:     cubic-bezier(.4,0,1,1);
  --e-sweep:    cubic-bezier(.32,0,.24,1);
  --e-counter:  cubic-bezier(.22,1,.36,1);

  /* ---- layout ---- */
  --h-top: 48px;
  --w-rail: 56px;
  --w-left: 248px;
  --w-right: 344px;
  --h-status: 26px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg-void);
  color: var(--t1);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:active { transform: scale(.98); }
button, input, select { outline: none; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--t3); font-weight: 600;
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.up    { color: var(--bull); }
.down  { color: var(--bear); }
.flat  { color: var(--gray); }
.warn  { color: var(--amber); }
.tech  { color: var(--blue); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.09); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}