/* ─────────────────────────────────────────────────────────────
   Theme tokens — DESK (terminal).
   The only file with colour values. app.css and the JS read these
   by name (static/js/tokens.js); colours are #rrggbb so the JS can
   derive alpha from them.

   Dark: near-black base, one amber accent, exchange-style gain/loss.
   Light: white base, the same amber darkened for contrast.
   The brand lockup is violet and does not follow the theme — see --brand-*.
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg:            #0a0a0a;
  --surface:       #111111;
  --surface-2:     #171717;
  --surface-3:     #1f1f1f;
  --border:        #202020;
  --border-strong: #2e2e2e;
  --text:          #eaecef;
  --text-muted:    #848e9c;
  --text-faint:    #5e6673;
  /* --accent is the terminal: navigation, buttons, focus, tabs, selection,
     prices and every chart — the amber this theme is built around. */
  --accent:        #f0b90b;
  --accent-fg:     #0a0a0a;
  --gain:          #0ecb81;
  --loss:          #f6465d;
  --warn:          #f0b90b;
  --info:          #4a90d9;
  --overlay:       #000000;

  /* Categorical series, for the nine backtest instruments. Ordered by
     contribution, spaced around the hue wheel, and deliberately clear of the
     accent amber and of gain/loss green/red so a series can never be read as
     "good" or "bad". Nine categories is past what colour alone can carry, so
     charts label series directly and use these for fills, not for
     identification. */
  --series-1:      #4ea8de;
  --series-2:      #9b7ede;
  --series-3:      #d67ab1;
  --series-4:      #e0a458;
  --series-5:      #3fb8a5;
  --series-6:      #6d86e0;
  --series-7:      #a3b565;
  --series-8:      #c06fd0;
  --series-9:      #46bfd0;

  /* The brand lockup: prod's violet, mark in white. Declared once and never
     redefined per theme — a logo that changes colour with the interface is
     not a logo. The filled tile is what lets a violet mark sit beside amber
     navigation without reading as a stray highlight. */
  --brand-tile:    #8b5cf6;   /* prod's own violet */
  --brand-edge:    #a78bfa;
  --brand-mark:    #ffffff;

  --radius:        2px;
  --radius-lg:     3px;
  --font-sans:     'Inter Tight', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg:            #f3f4f6;
  --surface:       #ffffff;
  --surface-2:     #f7f7f8;
  --surface-3:     #ededf0;
  --border:        #e4e6ea;
  --border-strong: #cfd3d9;
  --text:          #1e2329;
  --text-muted:    #707a8a;
  --text-faint:    #9aa4b2;
  --accent:        #9a6700;
  --accent-fg:     #ffffff;
  --gain:          #03a66d;
  --loss:          #cf304a;
  --warn:          #9a6700;
  --info:          #2f6fba;
  --overlay:       #0a0a0a;
  /* Same hues, darkened for white surfaces. */
  --series-1:      #1c6fa8;
  --series-2:      #6a45b0;
  --series-3:      #a8437f;
  --series-4:      #a66a21;
  --series-5:      #1b7d6e;
  --series-6:      #3a53ab;
  --series-7:      #6b7d2f;
  --series-8:      #8c3a9b;
  --series-9:      #17879a;
  color-scheme: light;
}