/* code-cockpit family — canonical design tokens
 * Anchor: Signal v4 "Terminal Editorial" (2026-05-12)
 *
 * Surfaces, typography, radius, and editorial behaviors are SHARED.
 * Each app keeps its own accent as a channel identifier:
 *   Signal     = fuchsia
 *   Trade Lab  = teal
 *   CLI Cockpit = maize
 *
 * This mirrors Signal v4's own internal pattern (X/green, GitHub/fuchsia,
 * Pulse/gold) — the three apps simply become higher-level channels.
 */

:root {
  /* Surfaces — warm dark, not pure black */
  --bg-0: #0d0e10;   /* page */
  --bg-1: #14161a;   /* section */
  --bg-2: #1b1d22;   /* card */
  --bg-3: #23262d;   /* raised / hover */

  /* Text — warm off-white, never pure */
  --text-0: #f5f1ea; /* primary */
  --text-1: #8c8b86; /* muted */
  --text-2: #5c5b56; /* quiet */

  /* Hairlines */
  --border: rgba(255, 255, 255, 0.06);
  --rule:   rgba(255, 255, 255, 0.04);

  /* Channel accents (per-app identity) */
  --app-signal:     #ff2ec4; /* fuchsia */
  --app-tradelab:   #00e5c7; /* neon teal */
  --app-clicockpit: #ffcb05; /* maize */

  /* Status tints (shared across apps where used) */
  --pos: #16c784;   /* live / bullish / ok */
  --neg: #f23645;   /* error / bearish */
  --warn: #ffd166;  /* flag */

  /* Geometry */
  --radius: 4px;
  --radius-pill: 999px;

  /* Type stack */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale (display) */
  --t-masthead: clamp(64px, 9vw, 120px);
  --t-h1: 36px;
  --t-h2: 24px;
  --t-body: 14px;
  --t-meta: 11px;   /* mono metadata */
}

/* Reset-lite */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--text-0); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* Shared atoms */
.mono { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-1); }
.wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.rule { height: 1px; background: var(--rule); border: 0; }
.hairline-accent { height: 1px; background: var(--accent, var(--app-signal)); opacity: 0.6; border: 0; }

.card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card-raised { background: var(--bg-3); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04); color: var(--text-0);
  border: 1px solid var(--border);
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 8px 14px; border-radius: var(--radius);
  background: var(--accent, var(--app-signal)); color: #0a0a0a;
  border: 0; cursor: pointer; font-weight: 600;
}
.btn-ghost { background: transparent; color: var(--text-0); border: 1px solid var(--border); }

/* Per-app theme classes — set --accent at the app shell */
.theme-signal     { --accent: var(--app-signal); }
.theme-tradelab   { --accent: var(--app-tradelab); }
.theme-clicockpit { --accent: var(--app-clicockpit); }