/* Trade Vantage — design tokens shared by the site, sign-in and the app.
   Built on Nocturne (nocturne.css): the blurple accent, indigo section ground and Inter,
   tuned for a presentation finish. Dark is the default; [data-theme="light"] flips it. */

:root {
  color-scheme: dark;

  /* Grounds and lines */
  --ink: #0e0f18;
  --ground: #131420;
  --surface: #1a1c29;
  --surface-2: #212332;
  --surface-3: #2a2c3d;
  --line: rgba(233, 233, 237, .075);
  --line-2: rgba(233, 233, 237, .13);
  --line-3: rgba(233, 233, 237, .22);

  /* Text */
  --text: #ecebf2;
  --muted: #9a9db0;
  --faint: #6f7285;

  /* Accent */
  --accent: #b5abfc;
  --accent-deep: #9184d9;
  --accent-ink: #d2cefd;
  --accent-tint: rgba(145, 132, 217, .14);
  --accent-line: rgba(181, 171, 252, .34);
  --section: #262a60;
  --section-glow: #353b80;
  --section-ghost: #4c5397;

  /* Semantics */
  --pos: #6fbf9a;
  --pos-tint: rgba(111, 191, 154, .13);
  --pos-line: rgba(111, 191, 154, .32);
  --neg: #d97a76;
  --neg-tint: rgba(217, 122, 118, .13);
  --neg-line: rgba(217, 122, 118, .32);
  --amber: #d9b36f;

  /* Primary button */
  --solid-bg: #e4e0ff;
  --solid-bg-hover: #f3f1ff;
  --solid-ink: #141526;

  /* Depth */
  --frame-shadow: 0 0 0 1px var(--line-2), 0 50px 120px -40px rgba(0, 0, 0, .9), 0 20px 50px -24px rgba(0, 0, 0, .6);
  --card-shadow: 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .03);
  --lift-shadow: 0 0 0 1px var(--line-2), 0 14px 34px -18px rgba(0, 0, 0, .7);
  --pop-shadow: 0 0 0 1px var(--line-2), 0 24px 60px -20px rgba(0, 0, 0, .8);
  --aurora-a: rgba(145, 132, 217, .32);
  --aurora-b: rgba(53, 59, 128, .75);
  --aurora-c: rgba(111, 191, 154, .07);
  --grid-dot: rgba(233, 233, 237, .06);
  --nav-bg: rgba(19, 20, 32, .72);
  --scrim: rgba(8, 9, 16, .62);

  /* App: P&L, charts and calendars */
  --pnl-pos: var(--pos);
  --pnl-neg: var(--neg);
  --pnl-flat: var(--muted);
  --pnl-acc: var(--accent);
  --chart-line: var(--accent);
  --chart-fill: var(--accent-deep);
  --chart-pane: #1a1c29;
  --day-green: rgba(111, 191, 154, .2);
  --day-red: rgba(217, 122, 118, .2);
  --day-flat: rgba(233, 233, 237, .08);
  --bar-pos: var(--pos);
  --bar-neg: var(--neg);

  /* Type and motion */
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #e9ebf4;
  --ground: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f8f8fc;
  --surface-3: #eff0f6;
  --line: rgba(28, 30, 43, .075);
  --line-2: rgba(28, 30, 43, .12);
  --line-3: rgba(28, 30, 43, .2);
  --text: #171927;
  --muted: #5d6175;
  --faint: #868a9c;
  --accent: #5b4ec2;
  --accent-deep: #6a5cd0;
  --accent-ink: #35297f;
  --accent-tint: rgba(106, 92, 208, .09);
  --accent-line: rgba(91, 78, 194, .28);
  --pos: #17855a;
  --pos-tint: rgba(23, 133, 90, .1);
  --pos-line: rgba(23, 133, 90, .3);
  --neg: #c4413b;
  --neg-tint: rgba(196, 65, 59, .09);
  --neg-line: rgba(196, 65, 59, .28);
  --amber: #a8701f;
  --solid-bg: #2c2470;
  --solid-bg-hover: #372d88;
  --solid-ink: #ffffff;
  --frame-shadow: 0 0 0 1px var(--line-2), 0 50px 110px -40px rgba(44, 36, 112, .32), 0 16px 36px -20px rgba(44, 36, 112, .2);
  --card-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(20, 22, 40, .04);
  --lift-shadow: 0 0 0 1px var(--line-2), 0 14px 30px -16px rgba(44, 36, 112, .22);
  --pop-shadow: 0 0 0 1px var(--line-2), 0 24px 50px -18px rgba(44, 36, 112, .28);
  --aurora-a: rgba(145, 132, 217, .3);
  --aurora-b: rgba(181, 171, 252, .34);
  --aurora-c: rgba(111, 191, 154, .12);
  --grid-dot: rgba(28, 30, 43, .07);
  --nav-bg: rgba(246, 247, 251, .78);
  --scrim: rgba(24, 26, 44, .28);
  --chart-pane: #ffffff;
  --day-green: rgba(23, 133, 90, .14);
  --day-red: rgba(196, 65, 59, .12);
  --day-flat: rgba(28, 30, 43, .06);
}