/* The one colour palette (dark) for every page: the replay page, the library, and the chart (chart.js reads these
   with getComputedStyle). Colours live only here; every other rule uses var(--...). Ratios = contrast measured. */
:root {
  color-scheme: dark;
  --color-bg: #0e1014;              /* page + chart background */
  --color-surface: #161a21;         /* bars, side panel */
  --color-surface-2: #1f2430;       /* inputs, chips, ALL on-chart labels */
  --color-border: #262b36;
  --color-border-strong: #363c4a;   /* also the crosshair label background */
  --color-fg: #e6e9ef;              /* 15.7:1 on bg, 12.8:1 on surface-2 */
  --color-fg-muted: #a3abbd;        /* 8.3:1 on bg, 7.6:1 on surface */
  --color-fg-subtle: #7d869a;       /* 5.2:1 on bg, 4.8:1 on surface (not on surface-2: 4.25) */
  --color-accent: #2563eb;          /* white on it 5.2:1 */
  --color-accent-fg: #ffffff;
  --color-accent-soft: rgba(37, 99, 235, .18);
  --color-accent-text: #8ab4ff;     /* accent TEXT (selected timeframe, links): 8.6:1 on bg */
  --color-grid: #1a1e27;
  --color-candle-up: #26a69a;       /* candles only, never a text background */
  --color-candle-down: #ef5350;
  --color-up: #2fbfa9;              /* green TEXT: 8.3:1 on bg, 6.8:1 on surface-2 */
  --color-down: #ff6b6b;            /* red TEXT: 6.9:1 on bg, 5.6:1 on surface-2 */
  --color-buy: #0f7a70;             /* BUY fill + TP / up price tag: white on it 5.2:1 */
  --color-sell: #c4302f;            /* SELL fill + SL / down price tag: white on it 5.5:1 */
  --color-on-fill: #ffffff;
  --color-mine: #c4a3ff;            /* my trades TEXT: 7.4:1 on surface-2 */
  --color-mine-fill: #6d42d6;       /* my entry price tag: white on it 6.2:1 */
  --color-warn: #f5a524;            /* 8.6:1 on surface */
  --color-warn-soft: rgba(245, 165, 36, .16);
  --color-up-soft: rgba(38, 166, 154, .12);
  --color-down-soft: rgba(239, 83, 80, .12);
  --color-bot: #8fa3c7;             /* bot pills / ticks on the timeline: 7.6:1 on bg */
  --color-flag: #ff8a8a;            /* a flagged bot trade (text + mark) */
  --color-info-bg: #1c2638; --color-info-border: #2c3d5c;
  --color-bad-bg: #3a1a1a; --color-bad-border: #6a2a2a; --color-bad-fg: #ffb3b0;
  --color-float: rgba(22, 26, 33, .97);   /* floating bars over the chart */
  --color-float-soft: rgba(14, 16, 20, .78);   /* behind the chart legend (chart bg, see-through) */
  --color-scrim: rgba(0, 0, 0, .55);
  --shadow: 0 8px 24px rgba(0, 0, 0, .45);
  --sess-asia: #6aa1ff; --sess-london: #e3a83b; --sess-ny: #f08a4b;   /* 7.4 / 9.0 / 7.7 on bg */
  --sess-asia-soft: rgba(106, 161, 255, .16); --sess-london-soft: rgba(227, 168, 59, .16); --sess-ny-soft: rgba(240, 138, 75, .16);
  /* chart lines of the bot (dark enough for white text on their price tags) */
  --chart-bot-entry: #4f5c78; --chart-bot-stop: #7a3434; --chart-bot-target: #23605a; --chart-level: #4d5566;
  /* MT5-style trade view (M12h): arrows + dotted entry -> exit line (blue = a buy deal, red = a sell deal), the
     stop / target marks over the trade's time. Shapes and lines only (no text on them): 3:1 on bg is enough. */
  --trade-buy: #3d8bfd;             /* 5.7:1 on bg */
  --trade-sell: #ff5a4e;            /* 6.1:1 on bg */
  --trade-sl: #ff6b6b;              /* = --color-down */
  --trade-tp: #2fbfa9;              /* = --color-up */
  /* drawing colours people can pick (saved with each drawing: keep these values) */
  --draw-1: #a77bff; --draw-2: #2f7cf6; --draw-3: #26a69a; --draw-4: #ef5350; --draw-5: #f5a524; --draw-6: #e3e6ec;
  --font-ui: system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}