/* static/v2/tokens.css — design tokens as CSS custom properties.
 *
 * Ported from design/ui-v2/src/tokens.mjs. Dark is the default (:root);
 * :root[data-theme="light"] overrides for the light workspace. Values here
 * must stay numerically identical to the .mjs source — this file has no
 * other job.
 */

:root {
  /* type */
  --font-sans: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'Cascadia Mono', Consolas, monospace;

  /* radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* dark palette (default) */
  --bg-0: #0B0D10;
  --bg-1: #101317;
  --bg-2: #151920;
  --bg-3: #1B2028;
  --bg-4: #232A34;
  --line: #222932;
  --line-strong: #303A47;
  --text: #E8ECF1;
  --text-2: #A6B0BD;
  --text-3: #808B98;
  --on-light: #0B0D10;
  --accent: #8E9BFF;
  --accent-text: #A9B3FF;
  --accent-bg: rgba(142,155,255,0.13);
  --accent-line: rgba(142,155,255,0.42);
  --buy: #3DD68C;
  --buy-bg: rgba(61,214,140,0.12);
  --buy-line: rgba(61,214,140,0.36);
  --on-buy: #04140C;
  --sell: #FF6B6B;
  --sell-bg: rgba(255,107,107,0.12);
  --sell-line: rgba(255,107,107,0.36);
  --on-sell: #1C0505;
  --warn: #F2B84B;
  --warn-bg: rgba(242,184,75,0.12);
  --warn-line: rgba(242,184,75,0.34);
  --scrim: rgba(5,6,8,0.66);
  --primary-bg: #E8ECF1;
  --primary-text: #0B0D10;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-0: #F4F5F7;
    --bg-1: #FFFFFF;
    --bg-2: #FFFFFF;
    --bg-3: #EEF0F4;
    --bg-4: #E3E7ED;
    --line: #E2E6EC;
    --line-strong: #C9D0DA;
    --text: #11151B;
    --text-2: #465160;
    --text-3: #626D7B;
    --on-light: #11151B;
    --accent: #4656DB;
    --accent-text: #3645C4;
    --accent-bg: rgba(70,86,219,0.09);
    --accent-line: rgba(70,86,219,0.38);
    --buy: #0B8A53;
    --buy-bg: rgba(11,138,83,0.10);
    --buy-line: rgba(11,138,83,0.34);
    --on-buy: #FFFFFF;
    --sell: #CE3029;
    --sell-bg: rgba(206,48,41,0.09);
    --sell-line: rgba(206,48,41,0.32);
    --on-sell: #FFFFFF;
    --warn: #9A6200;
    --warn-bg: rgba(154,98,0,0.10);
    --warn-line: rgba(154,98,0,0.30);
    --scrim: rgba(17,21,27,0.42);
    --primary-bg: #11151B;
    --primary-text: #FFFFFF;
  }
}

:root[data-theme="light"] {
  --bg-0: #F4F5F7;
  --bg-1: #FFFFFF;
  --bg-2: #FFFFFF;
  --bg-3: #EEF0F4;
  --bg-4: #E3E7ED;
  --line: #E2E6EC;
  --line-strong: #C9D0DA;
  --text: #11151B;
  --text-2: #465160;
  --text-3: #626D7B;
  --on-light: #11151B;
  --accent: #4656DB;
  --accent-text: #3645C4;
  --accent-bg: rgba(70,86,219,0.09);
  --accent-line: rgba(70,86,219,0.38);
  --buy: #0B8A53;
  --buy-bg: rgba(11,138,83,0.10);
  --buy-line: rgba(11,138,83,0.34);
  --on-buy: #FFFFFF;
  --sell: #CE3029;
  --sell-bg: rgba(206,48,41,0.09);
  --sell-line: rgba(206,48,41,0.32);
  --on-sell: #FFFFFF;
  --warn: #9A6200;
  --warn-bg: rgba(154,98,0,0.10);
  --warn-line: rgba(154,98,0,0.30);
  --scrim: rgba(17,21,27,0.42);
  --primary-bg: #11151B;
  --primary-text: #FFFFFF;
}

:root[data-theme="dark"] {
  --bg-0: #0B0D10;
  --bg-1: #101317;
  --bg-2: #151920;
  --bg-3: #1B2028;
  --bg-4: #232A34;
  --line: #222932;
  --line-strong: #303A47;
  --text: #E8ECF1;
  --text-2: #A6B0BD;
  --text-3: #808B98;
  --on-light: #0B0D10;
  --accent: #8E9BFF;
  --accent-text: #A9B3FF;
  --accent-bg: rgba(142,155,255,0.13);
  --accent-line: rgba(142,155,255,0.42);
  --buy: #3DD68C;
  --buy-bg: rgba(61,214,140,0.12);
  --buy-line: rgba(61,214,140,0.36);
  --on-buy: #04140C;
  --sell: #FF6B6B;
  --sell-bg: rgba(255,107,107,0.12);
  --sell-line: rgba(255,107,107,0.36);
  --on-sell: #1C0505;
  --warn: #F2B84B;
  --warn-bg: rgba(242,184,75,0.12);
  --warn-line: rgba(242,184,75,0.34);
  --scrim: rgba(5,6,8,0.66);
  --primary-bg: #E8ECF1;
  --primary-text: #0B0D10;
}