/* Design tokens shared by the marketing site and the app. Edit the palette here only. */
:root,
html[data-skin="night"] {
  color-scheme: dark;
  --bg: #0a101c;
  --panel: #121b2c;
  --card: #182234;
  --ink: #f5f7fb;
  --copy: #d7deea;
  --muted: #b4bdd0;
  --line: #2a3650;
  --gold: #d4b45c;
  --gold-2: #efd27a;
  --buy: #3ee08f;
  --watch: #efd27a;
  --wait: #c5cddd;
  --short: #ff7b72;
  --setup: #7dffc2;
  --setup-short: #ff9a90;
  --row-sel: #1c2840;
  --row-hover: #1a2438;
  --nested: #0d1524;
  --chart-bg: #0d1524;
  --accent-line: #5a4a22;
  --grain-a: #243044;
  --grain-b: #3a3018;
  --buy-glow: rgba(62, 224, 143, 0.45);
  --mark-ink: #1a1406;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  --font: "Segoe UI", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Cascadia Mono", "IBM Plex Mono", ui-monospace, monospace;
  --nav: #0c1422;
  --nav-w: 252px;
  --topbar-h: 64px;
  --ema20: #3ee08f;
  --ema50: #5aa6ff;
  --ema200: #ff7b72;
  /* Observation levels, deliberately outside the BUY/SHORT palette: a ceiling and a floor are not a
     trade direction, and colouring them green and red would read as one. */
  --resistance: #b98cff;
  --support: #52cfe0;
}

html[data-skin="ember"] {
  color-scheme: dark;
  --bg: #140c08;
  --panel: #1f1410;
  --card: #2a1b14;
  --ink: #fff4ea;
  --copy: #ead6c4;
  --muted: #c4a992;
  --line: #4a3224;
  --gold: #e2b15a;
  --gold-2: #f3c56a;
  --buy: #f0b429;
  --watch: #f3c56a;
  --wait: #d9c4b0;
  --short: #ef6b4a;
  --setup: #f7d48b;
  --setup-short: #ff9b80;
  --row-sel: #332018;
  --row-hover: #2c1c16;
  --nested: #160e0a;
  --chart-bg: #160e0a;
  --accent-line: #8a5a22;
  --grain-a: #3a2418;
  --grain-b: #5a3010;
  --buy-glow: rgba(240, 177, 41, 0.4);
  --mark-ink: #2a1608;
  --nav: #160e0a;
  --ema20: #f0b429;
  --ema50: #7eb6ff;
  --ema200: #ef6b4a;
  --resistance: #d9a3ff;
  --support: #4fc6d8;
}

html[data-skin="pine"] {
  color-scheme: dark;
  --bg: #07140e;
  --panel: #0d1c14;
  --card: #13261b;
  --ink: #eef8f1;
  --copy: #cfe3d6;
  --muted: #9cb8a8;
  --line: #234233;
  --gold: #c4b07a;
  --gold-2: #dcc98a;
  --buy: #3ecf7a;
  --watch: #dcc98a;
  --wait: #b7cfc2;
  --short: #e07070;
  --setup: #7ae0a8;
  --setup-short: #f0a0a0;
  --row-sel: #173224;
  --row-hover: #142c1f;
  --nested: #091610;
  --chart-bg: #091610;
  --accent-line: #3d5a28;
  --grain-a: #163224;
  --grain-b: #2a3a12;
  --buy-glow: rgba(62, 207, 122, 0.4);
  --mark-ink: #102010;
  --nav: #08140f;
  --ema20: #3ecf7a;
  --ema50: #7eb6ff;
  --ema200: #e07070;
  --resistance: #bf9bf0;
  --support: #4fc4cf;
}

html[data-skin="paper"] {
  color-scheme: light;
  --bg: #f3eee4;
  --panel: #fffaf2;
  --card: #fffdf8;
  --ink: #1c1810;
  --copy: #3a3428;
  --muted: #6a6356;
  --line: #ddd4c4;
  --gold: #8a6a18;
  --gold-2: #7a5c14;
  --buy: #157a45;
  --watch: #8a6a18;
  --wait: #5c5648;
  --short: #c0392b;
  --setup: #1a8f52;
  --setup-short: #c0392b;
  --row-sel: #efe6d4;
  --row-hover: #f6f0e4;
  --nested: #f7f1e6;
  --chart-bg: #fffdf8;
  --accent-line: #c4a24a;
  --grain-a: #e8dcc4;
  --grain-b: #e0d0b0;
  --buy-glow: rgba(21, 122, 69, 0.28);
  --mark-ink: #1a1406;
  --shadow: 0 8px 20px rgba(80, 60, 20, 0.08);
  --nav: #efe6d4;
  --ema20: #157a45;
  --ema50: #1a5fa8;
  --ema200: #c0392b;
  --resistance: #6b3fa0;
  --support: #0f6b7a;
}