:root {
  color-scheme: light;
  --gray-0: #fbfaf7;
  --gray-50: #f4f3ef;
  --gray-75: #f0efec;
  --gray-100: #ebe9e3;
  --gray-200: #dcd9d1;
  --gray-300: #c3c0b6;
  --gray-350: #b9b7ad;
  --gray-480: #8a8880;
  --gray-500: #898781;
  --gray-575: #6f6d66;
  --gray-600: #66645e;
  --gray-700: #4a4945;
  --gray-775: #3a3a37;
  --gray-825: #2c2c2a;
  --gray-850: #232321;
  --gray-860: #222220;
  --gray-900: #1b1b1a;
  --gray-925: #171716;
  --gray-950: #141413;
  --gray-1000: #111110;
  --blue-50: #e8f0fb;
  --blue-250: #86b6ef;
  --blue-350: #5598e7;
  --blue-400: #3987e5;
  --blue-450: #2a78d6;
  --blue-500: #256abf;
  --blue-550: #1c5cab;
  --blue-900: #1a2a40;
  --red-250: #eb9890;
  --red-350: #e0665c;
  --red-450: #d9574f;
  --red-500: #c03b33;
  --red-600: #b23f39;
  --red-700: #8a2f2b;
  --green-text-light: #006300;
  --green-text-dark: #3fbf3f;
  --red-text-light: #b3261e;
  --red-text-dark: #ff7a70;
  --orange-500: #d95926;
  --white: #ffffff;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 32px;
  --text-read: 18px;
  --text-primary: var(--gray-1000);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --leading-tight: 1.2;
  --leading-base: 1.45;
  --leading-read: 1.7;
  --duration-fast: 120ms;
  --surface-page: var(--gray-50);
  --surface-panel: var(--gray-0);
  --surface-sunken: var(--gray-50);
  --surface-hover: var(--gray-100);
  --surface-selected: var(--blue-50);
  --border-subtle: var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --accent: var(--orange-500);
  --focus: var(--blue-450);
  --positive: var(--green-text-light);
  --negative: var(--red-text-light);
  --chart-line: var(--blue-450);
  --chart-dot: var(--gray-500);
  --chart-grid: var(--gray-100);
  --chart-axis: var(--gray-300);
  --chart-volume: var(--gray-300);
  --heat-pos-1: var(--blue-250);
  --heat-pos-2: var(--blue-350);
  --heat-pos-3: var(--blue-500);
  --heat-neg-1: var(--red-250);
  --heat-neg-2: var(--red-350);
  --heat-neg-3: var(--red-500);
  --heat-ink-1: var(--gray-1000);
  --heat-ink-3: var(--white);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --row-h: 36px;
  --hairline: 1px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --text-primary: var(--gray-75);
    --text-secondary: var(--gray-350);
    --text-muted: var(--gray-480);
    --surface-page: var(--gray-950);
    --surface-panel: var(--gray-925);
    --surface-sunken: var(--gray-950);
    --surface-hover: var(--gray-850);
    --surface-selected: var(--blue-900);
    --border-subtle: var(--gray-860);
    --border-default: var(--gray-825);
    --border-strong: var(--gray-775);
    --focus: var(--blue-400);
    --positive: var(--green-text-dark);
    --negative: var(--red-text-dark);
    --chart-line: var(--blue-400);
    --chart-dot: var(--gray-575);
    --chart-grid: var(--gray-860);
    --chart-axis: var(--gray-775);
    --chart-volume: var(--gray-775);
    --heat-pos-1: var(--blue-550);
    --heat-pos-2: var(--blue-450);
    --heat-pos-3: var(--blue-350);
    --heat-neg-1: var(--red-700);
    --heat-neg-2: var(--red-600);
    --heat-neg-3: var(--red-450);
    --heat-ink-1: var(--gray-75);
    --heat-ink-3: var(--white);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --text-primary: var(--gray-75);
  --text-secondary: var(--gray-350);
  --text-muted: var(--gray-480);
  --surface-page: var(--gray-950);
  --surface-panel: var(--gray-925);
  --surface-sunken: var(--gray-950);
  --surface-hover: var(--gray-850);
  --surface-selected: var(--blue-900);
  --border-subtle: var(--gray-860);
  --border-default: var(--gray-825);
  --border-strong: var(--gray-775);
  --focus: var(--blue-400);
  --positive: var(--green-text-dark);
  --negative: var(--red-text-dark);
  --chart-line: var(--blue-400);
  --chart-dot: var(--gray-575);
  --chart-grid: var(--gray-860);
  --chart-axis: var(--gray-775);
  --chart-volume: var(--gray-775);
  --heat-pos-1: var(--blue-550);
  --heat-pos-2: var(--blue-450);
  --heat-pos-3: var(--blue-350);
  --heat-neg-1: var(--red-700);
  --heat-neg-2: var(--red-600);
  --heat-neg-3: var(--red-450);
  --heat-ink-1: var(--gray-75);
  --heat-ink-3: var(--white);
}
