/* Pro Terminal colour tokens: ONE source for every page (tape phone + laptop, Traders, Compare, landing).
   Two themes only, LIGHT and DARK (default dark): <html data-theme="light|dark">, set by theme.js (head, before first paint).
   Every colour a page uses comes from here; a stylesheet never hard-codes a theme colour.
   --accent        amber as TEXT / line / glyph colour (dark amber on the light theme so it passes WCAG AA on paper)
   --accent-bg     amber as a FILL (active segment, toast, mark): the same bright amber in both themes, with --on-accent text
   --*-rgb         the same colours as "r, g, b" for translucent washes (rgba(var(--pos-rgb), .2)) */
:root {
  color-scheme: dark;
  --bg: #06080c; --panel: #0b0f15; --panel2: #0f141c; --line: #1b2430; --line2: #26303e;
  --ink: #dbe2ec; --ink2: #a9b4c3; --muted: #8794a6;
  --accent: #ffb52e; --accent2: #ffcf6b; --accent-bg: #ffb52e; --on-accent: #1a1200;
  --up: #42a8ff; --dn: #ff7c4a; --pos: #2fe28c; --neg: #ff5f5f; --warn: #ffb52e; --shadow: #b892ff;
  --bg-rgb: 6, 8, 12; --accent-rgb: 255, 181, 46; --pos-rgb: 47, 226, 140; --neg-rgb: 255, 95, 95;
  --grid-pos-rgb: 47, 226, 140; --grid-neg-rgb: 255, 95, 95;
  --bar: #080b10;          /* phone tab bar */
  --bar2: #090c11;         /* laptop header / status bar / drawer head */
  --glow: 0 0 24px rgba(255, 181, 46, .25);
  --scrim: rgba(0, 0, 0, .55);
  --frozen-op: .55;        /* a panel whose stream went quiet */
  /* charts (read by charts.js from the canvas element) */
  --ch-muted: #8794a6; --ch-grid: #1a222d; --ch-zone: rgba(255, 181, 46, .075); --ch-zone-ink: rgba(255, 181, 46, .8);
  --ch-cl: #eef1f6; --ch-bn: #c99a3e; --ch-base: #5d6878; --ch-now: #ffb52e;
  --ch-tip-bg: rgba(11, 15, 21, .97); --ch-tip-line: #26303e; --ch-bg: #0b0f15;
  /* short names used by the Traders / Compare / landing sheets */
  --p: var(--panel); --p2: var(--panel2); --ln: var(--line); --ln2: var(--line2); --tx: var(--ink); --dim: var(--muted);
  --am: var(--accent); --am2: var(--accent2); --g: var(--pos); --r: var(--neg); --ink-am: var(--on-accent);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3efe6; --panel: #fcfbf7; --panel2: #efebe1; --line: #e0dacb; --line2: #c9c1ae;
  --ink: #12161d; --ink2: #343c49; --muted: #566070;
  --accent: #8a5300; --accent2: #6e4200;       /* dark amber text: >= 5.3:1 on paper, panels and wells */
  --up: #0a5fb8; --dn: #b83a05; --pos: #0b7a3a; --neg: #c4162a; --warn: #8a5300; --shadow: #6a38d0;
  --bg-rgb: 243, 239, 230; --accent-rgb: 217, 140, 0; --pos-rgb: 11, 122, 58; --neg-rgb: 196, 22, 42;
  --grid-pos-rgb: 16, 150, 76; --grid-neg-rgb: 214, 44, 60;
  --bar: #fcfbf7; --bar2: #f7f4ec;
  --glow: none;
  --scrim: rgba(18, 22, 29, .45);
  --frozen-op: .85;        /* still >= 4.5:1 for the blue / green / red values on paper */
  --ch-muted: #566070; --ch-grid: #e6e1d4; --ch-zone: rgba(217, 140, 0, .14); --ch-zone-ink: rgba(122, 74, 0, .95);
  --ch-cl: #1b2230; --ch-bn: #a56a00; --ch-base: #8a93a3; --ch-now: #b36a00;
  --ch-tip-bg: rgba(252, 251, 247, .98); --ch-tip-line: #c9c1ae; --ch-bg: #fcfbf7;
}

/* the Light | Dark switch (one component, used by the tape's ... menu, Traders, Compare and the landing page; wired by theme.js) */
.th-sw { display: inline-flex; flex: none; border: 1px solid var(--line2); border-radius: 3px; background: var(--panel); overflow: hidden; }
.th-sw button { height: 34px; padding: 0 11px; border: 0; background: none; color: var(--muted); font: 700 12px/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.th-sw button + button { border-left: 1px solid var(--line2); }
.th-sw button:hover { color: var(--ink); }
.th-sw button[aria-pressed="true"] { background: var(--accent-bg); color: var(--on-accent); }
.th-sw button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }