/* @import MUST be the first thing in the file — a browser discards any
 * @import that follows a rule block, which is what silently happened
 * here and left backtest.html / replay.html rendering in system-ui. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ctx_studio_shim.css — the Family-B → Studio token alias shim (2026-07-19).
 *
 * One <link> converts a legacy "terminal mono" page (--bg:#02040a, cyan-tinted
 * borders, IBM Plex Mono body, #ff1744/#f5a623 accents) to the Studio design
 * language: Studio tokens, Inter for prose, mono PRESERVED where data lives
 * (tables, code, inputs — a scanner tape should stay tabular), and a CSS-only
 * aurora via body pseudo-elements so no page needs HTML edits.
 *
 * Usage: add AFTER the page's own <style> block so these :root values win:
 *     <link rel="stylesheet" href="/static/ctx_studio_shim.css">
 *
 * Deliberately NOT here: gradient-clipped headings (background-clip over an
 * emoji renders it as gradient mush — per-page polish only), radius surgery on
 * unknown classes, and any canvas/JS-drawn color (shim touches DOM chrome only).
 * The UI audit (research/2026-07-18/uiaudit/) is the receipts for the family.
 */

:root {
  /* core palette → Studio */
  --bg: #070b14;
  --bg0: #070b14;
  --panel: #0a101d;
  --panel2: #0c1626;
  --surface: rgba(255, 255, 255, 0.045);
  --card: rgba(255, 255, 255, 0.045);
  --glass: rgba(255, 255, 255, 0.045);
  --glass-2: rgba(255, 255, 255, 0.022);
  --glass-brd: rgba(255, 255, 255, 0.10);
  --border: rgba(255, 255, 255, 0.09);
  --border-h: rgba(0, 234, 255, 0.35);
  --line: rgba(255, 255, 255, 0.09);

  --cyan: #00eaff;
  --cyan-g: rgba(0, 234, 255, 0.25);
  --green: #00e676;
  --green-g: rgba(0, 230, 118, 0.20);
  --red: #ff5252;
  --amber: #ffab00;
  --purple: #7b5cff;
  --violet: #7b5cff;
  --grad: linear-gradient(135deg, var(--cyan), var(--violet));

  --dim: #8ea3c0;
  --dim-2: #5d6f8f;
  --dim2: #5d6f8f;
  --text: #c9d7ea;
  --bright: #eaf1fb;
  --ink: #eaf1fb;

  /* fonts: Inter for prose; the page's --mono stays available for data */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* prose → Inter; letterspacing that suited mono reads gappy in Inter */
body {
  font-family: var(--font) !important;
  letter-spacing: 0 !important;
  background-color: var(--bg) !important;
}
h1, h2, h3, h4, h5, button, .btn, a, label, p, li, span, div {
  font-family: inherit;
}

/* data stays mono — a scanner tape or price column should not proportional-ize */
table, thead, tbody, td, th, pre, code, kbd, samp,
input, select, textarea,
.px, .price, .mono, [class*="tabular"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* the aurora, with zero HTML changes: two fixed glow fields under the content */
body::before,
body::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.16;
}
body::before {
  width: 46vw; height: 46vw;
  top: -18vw; left: -12vw;
  background: var(--cyan);
}
body::after {
  width: 42vw; height: 42vw;
  bottom: -18vw; right: -12vw;
  background: var(--violet);
}
/* content above the glow (legacy pages rarely set stacking on their shells) */
body > * { position: relative; z-index: 1; }

/* scrollbars in the house style */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(123, 92, 255, 0.32); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 234, 255, 0.45); }

/* selection + focus accents */
::selection { background: rgba(0, 234, 255, 0.25); }
input:focus, select:focus, textarea:focus { border-color: var(--cyan) !important; outline: none; }

/* embed mode: no aurora inside workspace iframes */
body.embed::before, body.embed::after,
body.ws-embed::before, body.ws-embed::after,
body.embedded::before, body.embedded::after { display: none; }