/* Trade Monitor — Design Tokens (REDESIGN v2)
 *
 * Direction: cool terminal × modern editorial. Three webfonts:
 *   • Space Grotesk — display / wordmark / hero numbers
 *   • Inter — UI labels, body, card titles
 *   • JetBrains Mono — every price, P&L, points, timestamps, basket IDs
 *
 * Palette pivot: drop lavender, adopt CYAN (#5eead4 mint-cyan) as the
 * primary accent. P&L greens shift cooler; reds stay warm. Surfaces
 * deepen toward black with a faint blue undertone, more terminal-like.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============================================================
 * COLOR
 * ============================================================ */
:root {
  /* Surfaces — pure-black to charcoal ramp, faint cool undertone */
  --tm-bg:        #07080a;   /* canvas — near-black */
  --tm-surface:   #0e1014;   /* card */
  --tm-surface-2: #14171c;   /* nested surface, hover row */
  --tm-surface-3: #1c2026;   /* elevated control, active tab field */
  --tm-border:    #1f242c;   /* hairline */
  --tm-border-strong: #2a3038;

  /* Text */
  --tm-text:       #e8eaed;
  --tm-text-soft:  #b8bcc4;  /* secondary */
  --tm-muted:      #6b7180;
  --tm-faint:      #3a4150;

  /* Accent — cool mint-cyan. Used for active states, equity line,
     focus rings, the wordmark accent dot. */
  --tm-accent:        #5eead4;
  --tm-accent-soft:   rgba(94, 234, 212, 0.12);
  --tm-accent-glow:   rgba(94, 234, 212, 0.35);

  /* P&L semantic — kept distinct from accent so accent never reads as "win" */
  --tm-positive:      #34d399;
  --tm-positive-soft: rgba(52, 211, 153, 0.14);
  --tm-negative:      #ef4444;
  --tm-negative-soft: rgba(239, 68, 68, 0.14);
  --tm-neutral:       #6b7180;

  /* Direction badges — solid stamped, not soft */
  --tm-buy-fg:    #052e1a;
  --tm-buy-bg:    #34d399;
  --tm-sell-fg:   #2b0708;
  --tm-sell-bg:   #ef4444;

  /* Connection / heartbeat dots */
  --tm-dot-live:    #34d399;
  --tm-dot-stale:   #f59e0b;
  --tm-dot-dead:    #ef4444;

  /* Level outcome ramp — diverging, colorblind-tolerant */
  --tm-level-1:    #34d399;  /* L1 — best */
  --tm-level-2:    #84cc16;
  --tm-level-3:    #eab308;
  --tm-level-4:    #f97316;
  --tm-level-5:    #ef4444;
  --tm-level-6:    #991b1b;
  --tm-level-loss: #450a0a;

  /* Pause / warning chip */
  --tm-warn-bg:   rgba(245, 158, 11, 0.14);
  --tm-warn-fg:   #fbbf24;
  --tm-danger-bg: rgba(239, 68, 68, 0.14);
  --tm-danger-fg: #fca5a5;
}

/* ============================================================
 * TYPOGRAPHY
 * ============================================================ */
:root {
  --tm-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --tm-font-ui:      'Inter', ui-sans-serif, system-ui, sans-serif;
  --tm-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — calmer, larger than v1. Display sizes expand for hero P&L. */
  --tm-text-2xs:  10px;
  --tm-text-xs:   11px;
  --tm-text-sm:   12px;
  --tm-text-base: 13px;
  --tm-text-md:   14px;
  --tm-text-lg:   16px;
  --tm-text-xl:   20px;
  --tm-text-2xl:  28px;
  --tm-text-3xl:  44px;   /* hero P&L */
  --tm-text-4xl:  64px;   /* keynote ticker */

  --tm-weight-regular:   400;
  --tm-weight-medium:    500;
  --tm-weight-semibold:  600;
  --tm-weight-bold:      700;

  --tm-tracking-tight:  -0.02em;
  --tm-tracking-normal: 0;
  --tm-tracking-wide:    0.04em;
  --tm-tracking-caps:    0.12em;  /* uppercase chrome labels */
}

/* ============================================================
 * SPACING / RADIUS / BORDERS / SHADOW
 * ============================================================ */
:root {
  --tm-radius-xs:   2px;
  --tm-radius-sm:   4px;
  --tm-radius-md:   8px;
  --tm-radius-lg:   12px;
  --tm-radius-xl:   16px;
  --tm-radius-pill: 999px;

  --tm-border-1: 1px solid var(--tm-border);
  --tm-border-2: 1px solid var(--tm-border-strong);

  /* Faint glow for accent-active controls. The redesign does allow shadow,
     but only as a low-opacity outer glow on lit elements (not as elevation). */
  --tm-glow-accent: 0 0 0 1px var(--tm-accent), 0 0 24px var(--tm-accent-glow);
  --tm-shadow-pop: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.4);

  --tm-pad-xs:  8px;
  --tm-pad-sm: 12px;
  --tm-pad-md: 16px;
  --tm-pad-lg: 20px;
  --tm-pad-xl: 28px;
}

/* ============================================================
 * SEMANTIC ELEMENT CLASSES
 * ============================================================ */
.tm-page {
  background: var(--tm-bg);
  color: var(--tm-text);
  font-family: var(--tm-font-ui);
  font-size: var(--tm-text-md);
  line-height: 1.5;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}

.tm-h1 {
  font-family: var(--tm-font-display);
  font-size: var(--tm-text-xl);
  font-weight: var(--tm-weight-semibold);
  letter-spacing: var(--tm-tracking-tight);
  color: var(--tm-text);
}

.tm-eyebrow {
  font-family: var(--tm-font-ui);
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tm-tracking-caps);
  color: var(--tm-muted);
}

.tm-card-title {
  font-family: var(--tm-font-ui);
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tm-tracking-caps);
  color: var(--tm-muted);
}

.tm-stat-label {
  font-size: var(--tm-text-xs);
  color: var(--tm-muted);
  letter-spacing: var(--tm-tracking-wide);
}

.tm-stat-value {
  font-family: var(--tm-font-mono);
  font-size: var(--tm-text-md);
  font-weight: var(--tm-weight-medium);
  color: var(--tm-text);
}

.tm-pnl-hero {
  font-family: var(--tm-font-display);
  font-size: var(--tm-text-3xl);
  font-weight: var(--tm-weight-semibold);
  letter-spacing: var(--tm-tracking-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.tm-mono { font-family: var(--tm-font-mono); font-variant-numeric: tabular-nums; }

.tm-positive { color: var(--tm-positive); }
.tm-negative { color: var(--tm-negative); }
.tm-neutral  { color: var(--tm-neutral); }
.tm-muted    { color: var(--tm-muted); }
.tm-accent-fg { color: var(--tm-accent); }

.tm-card {
  background: var(--tm-surface);
  border: var(--tm-border-1);
  border-radius: var(--tm-radius-lg);
  padding: var(--tm-pad-md);
}

.tm-card--quiet {
  background: transparent;
  border: var(--tm-border-1);
}

.tm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--tm-radius-sm);
  font-family: var(--tm-font-mono);
  font-weight: var(--tm-weight-bold);
  font-size: var(--tm-text-xs);
  letter-spacing: var(--tm-tracking-wide);
}
.tm-badge--buy  { background: var(--tm-buy-bg);  color: var(--tm-buy-fg); }
.tm-badge--sell { background: var(--tm-sell-bg); color: var(--tm-sell-fg); }
.tm-badge--ghost {
  background: transparent;
  border: 1px solid var(--tm-border-strong);
  color: var(--tm-text-soft);
}

.tm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--tm-border-strong);
  border-radius: var(--tm-radius-pill);
  background: transparent;
  color: var(--tm-text-soft);
  font: var(--tm-weight-medium) var(--tm-text-sm)/1 var(--tm-font-ui);
  padding: 7px 14px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.tm-pill:hover { color: var(--tm-text); border-color: var(--tm-text-soft); }
.tm-pill--active {
  background: var(--tm-accent);
  border-color: var(--tm-accent);
  color: #062118;
}

.tm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--tm-dot-live);
  box-shadow: 0 0 8px currentColor;
}
.tm-dot--stale { background: var(--tm-dot-stale); color: var(--tm-dot-stale); }
.tm-dot--dead  { background: var(--tm-dot-dead);  color: var(--tm-dot-dead); }

.tm-hit-target { min-height: 40px; min-width: 40px; }