/* Theme tokens, light and dark. Copied from prototype/roi-app.html so the app looks the same. */
:root {
  --bg: #fcf7f2; --surface: #ffffff; --surface-2: #f5eee5; --line: #e7dfd4;
  --ink: #152a1f; --ink-2: #4b5b52; --ink-3: #7a857e;
  --green: #1a402d; --green-2: #2b5a40; --green-3: #e6efe7; --on-green: #ffffff;
  --amber: #c0801f; --amber-2: #8a5c12; --amber-3: #f7e6c8;
  --won: #2f7a4c; --lost: #b3594f; --lost-2: #f6e6e2;
  --chat-bg: #efe7dc; --bubble-in: #ffffff; --bubble-out: #dcebdf; --bar: #cfc4b4;
  --shadow: 0 1px 2px rgba(26,64,45,.06), 0 10px 28px -14px rgba(26,64,45,.22);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1913; --surface: #16231b; --surface-2: #1c2b22; --line: #2a3b31;
  --ink: #edf2ec; --ink-2: #b4c1b8; --ink-3: #8a988f;
  --green: #8fc79d; --green-2: #a9d6b4; --green-3: #1f3628; --on-green: #0d1a12;
  --amber: #e0a54a; --amber-2: #e8b868; --amber-3: #3a2d17;
  --won: #7fcf9a; --lost: #e59a90; --lost-2: #3a2220;
  --chat-bg: #0c1510; --bubble-in: #1a2a20; --bubble-out: #24412f; --bar: #3b4c41;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);

  --gold: #e3b762; --mark-c: var(--gold); --tab-line: var(--gold); --eyebrow-c: #c9a867; --progress-on: var(--gold);
  --hero-bg: #1c3426; --hero-ink: var(--ink); --hero-big: var(--gold); --hero-border: rgba(227,183,98,.35); --meter-c: var(--gold); --dots: block;
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0f1913; --surface: #16231b; --surface-2: #1c2b22; --line: #2a3b31;
  --ink: #edf2ec; --ink-2: #b4c1b8; --ink-3: #8a988f;
  --green: #8fc79d; --green-2: #a9d6b4; --green-3: #1f3628; --on-green: #0d1a12;
  --amber: #e0a54a; --amber-2: #e8b868; --amber-3: #3a2d17;
  --won: #7fcf9a; --lost: #e59a90; --lost-2: #3a2220;
  --chat-bg: #0c1510; --bubble-in: #1a2a20; --bubble-out: #24412f; --bar: #3b4c41;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);

  --gold: #e3b762; --mark-c: var(--gold); --tab-line: var(--gold); --eyebrow-c: #c9a867; --progress-on: var(--gold);
  --hero-bg: #1c3426; --hero-ink: var(--ink); --hero-big: var(--gold); --hero-border: rgba(227,183,98,.35); --meter-c: var(--gold); --dots: block;
  color-scheme: dark; }

:root { --gold: var(--amber); --mark-c: var(--green); --tab-line: var(--green); --eyebrow-c: var(--ink-3); --progress-on: var(--green);
  --hero-bg: var(--green); --hero-ink: var(--on-green); --hero-big: inherit; --hero-border: transparent; --meter-c: var(--green-2); --dots: none; }