:root {
  color-scheme: light;

  /* Neutral foundation — warm off-white app, white surfaces, light sidebar */
  --canvas: #f6f7f8;
  --canvas-deep: #eef0f2;
  --sidebar: #fbfbfc;
  --sidebar-raised: #eef1f4;
  --sidebar-ink: #4a525a;
  --sidebar-ink-strong: #161a1e;
  --sidebar-border: #e7e9ec;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f6f7f8;
  --surface-inset: #f1f3f5;
  --ink: #1f2529;
  --ink-strong: #10151a;
  --muted: #616b74;
  --faint: #8b949c;
  --border: #e6e8eb;
  --border-strong: #d3d7dc;

  /* Semantic color — one restrained blue, muted status hues */
  --accent: #3b5bdb;
  --accent-strong: #2f4bc0;
  --accent-soft: #edf1fd;
  --positive: #157347;
  --positive-soft: #e9f4ee;
  --negative: #b42d3a;
  --negative-soft: #fbeced;
  --warning: #9a6414;
  --warning-soft: #f6eede;
  --critical: #99323a;
  --critical-soft: #f6e3e4;
  --info: #2a7d84;
  --info-soft: #e6f1f2;
  --cyan: var(--info);
  --agent: #5b53a3;
  --agent-soft: #edeaf6;
  --paper: #9a6414;
  --paper-soft: #f6eede;
  --shadow-mode: #5b53a3;
  --shadow-mode-soft: #edeaf6;
  --disconnected: #737b82;
  --stale: #9a6414;
  --live: #157347;

  /* Chart color */
  --chart-portfolio: #3b5bdb;
  --chart-spy: #616b74;
  --chart-btc: #9a6414;
  --chart-drawdown: #b42d3a;
  --chart-grid: #ebedf0;
  --chart-volume: #c4cad0;
  --chart-entry: #157347;
  --chart-exit: #b42d3a;
  --chart-crosshair: #97a0a8;

  /* Typography — modern sans everywhere; mono reserved for IDs/code/timestamps */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --type-display: 600 clamp(30px, 3.2vw, 44px) / 1.08 var(--sans);
  --type-page-title: 600 clamp(26px, 2vw, 30px) / 1.15 var(--sans);
  --type-section: 600 18px / 1.35 var(--sans);
  --type-card-title: 600 15px / 1.4 var(--sans);
  --type-body: 400 14px / 1.6 var(--sans);
  --type-support: 400 13px / 1.55 var(--sans);
  --type-table: 400 13px / 1.5 var(--sans);
  --type-metric: 600 28px / 1.1 var(--sans);
  --type-label: 500 13px / 1.4 var(--sans);
  --type-code: 400 12px / 1.5 var(--mono);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Geometry — 4-8px radii, subtle borders, restrained shadows */
  --radius-xs: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --border-hairline: 1px solid var(--border);
  --border-strong-line: 1px solid var(--border-strong);
  --shadow-float: 0 10px 30px rgba(20, 25, 30, .1), 0 1px 2px rgba(20, 25, 30, .06);
  --shadow-drawer: -14px 0 38px rgba(20, 25, 30, .12);
  --sidebar-width: 236px;

  /* Motion */
  --motion-fast: 120ms;
  --motion-standard: 180ms;
  --motion-slow: 240ms;
  --ease-standard: cubic-bezier(.2, .75, .3, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0f1317;
  --canvas-deep: #0b0e11;
  --sidebar: #12171c;
  --sidebar-raised: #1c242b;
  --sidebar-ink: #9aa4ac;
  --sidebar-ink-strong: #f2f5f7;
  --sidebar-border: #222a31;
  --surface: #161c22;
  --surface-raised: #1a2128;
  --surface-muted: #12171c;
  --surface-inset: #0e1317;
  --ink: #e6eaed;
  --ink-strong: #f6f8fa;
  --muted: #97a1a9;
  --faint: #6b757c;
  --border: #232b32;
  --border-strong: #333d45;
  --accent: #7d97f4;
  --accent-strong: #9fb2f8;
  --accent-soft: #1b2540;
  --positive: #5cbd93;
  --positive-soft: #14312a;
  --negative: #e2777f;
  --negative-soft: #3a1e22;
  --warning: #d1a05c;
  --warning-soft: #34291a;
  --critical: #ec8a90;
  --critical-soft: #3e1d21;
  --info: #5fb2b8;
  --info-soft: #163034;
  --cyan: var(--info);
  --agent: #a89ce4;
  --agent-soft: #262041;
  --paper: #d1a05c;
  --paper-soft: #34291a;
  --shadow-mode: #a89ce4;
  --shadow-mode-soft: #262041;
  --disconnected: #838d94;
  --stale: #d1a05c;
  --live: #5cbd93;
  --chart-portfolio: #7d97f4;
  --chart-spy: #97a1a9;
  --chart-btc: #d1a05c;
  --chart-drawdown: #e2777f;
  --chart-grid: #232b32;
  --chart-volume: #5a646b;
  --chart-entry: #5cbd93;
  --chart-exit: #e2777f;
  --chart-crosshair: #97a1a9;
  --shadow-float: 0 14px 40px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-drawer: -14px 0 42px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-standard: 0ms;
    --motion-slow: 0ms;
  }
}