:root {
  --vsmi-color-canvas: #f4f7f7;
  --vsmi-color-surface: #ffffff;
  --vsmi-color-surface-low: #edf3f2;
  --vsmi-color-surface-high: #e3eceb;
  --vsmi-color-surface-highest: #d7e3e1;
  --vsmi-color-surface-lowest: #ffffff;
  --vsmi-color-border: #cfdddb;
  --vsmi-color-text: #172321;
  --vsmi-color-text-muted: #5e706d;
  --vsmi-color-outline: #758783;
  --vsmi-color-primary: #04978b;
  --vsmi-color-primary-strong: #037a71;
  --vsmi-color-primary-soft: #d9f1ee;
  --vsmi-color-on-primary: #ffffff;
  --vsmi-color-positive: #14845f;
  --vsmi-color-negative: #cf4b52;
  --vsmi-color-warning: #b7791f;
  --vsmi-color-volume-signal: #6f63a8;
  --vsmi-color-secondary-chart: #3f6f8f;
  --vsmi-chart-grid: #e5edec;
  --vsmi-space-1: 4px;
  --vsmi-space-2: 8px;
  --vsmi-space-3: 12px;
  --vsmi-space-4: 16px;
  --vsmi-space-5: 20px;
  --vsmi-space-6: 24px;
  --vsmi-space-8: 32px;
  --vsmi-radius-sm: 2px;
  --vsmi-radius-md: 4px;
  --vsmi-radius-lg: 8px;
  --vsmi-font-ui: "Inter", sans-serif;
  --vsmi-font-number: "JetBrains Mono", monospace;
}

html.dark {
  --vsmi-color-canvas: #020617;
  --vsmi-color-surface: #0f172a;
  --vsmi-color-surface-low: #131b2e;
  --vsmi-color-border: #334155;
  --vsmi-color-text: #dae2fd;
  --vsmi-color-text-muted: #bcc9cd;
  --vsmi-color-surface-high: #222a3d;
  --vsmi-color-surface-highest: #2d3449;
  --vsmi-color-surface-lowest: #060e20;
  --vsmi-color-outline: #869397;
  --vsmi-color-primary: #2bbbad;
  --vsmi-color-primary-strong: #20a396;
  --vsmi-color-primary-soft: #123e3a;
  --vsmi-color-on-primary: #ffffff;
  --vsmi-color-positive: #26a778;
  --vsmi-color-negative: #ef646b;
  --vsmi-color-warning: #d6a04a;
  --vsmi-color-volume-signal: #9a8bd1;
  --vsmi-color-secondary-chart: #78a6c7;
  --vsmi-chart-grid: #1d2939;
}