:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-hero: 30px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-composer: 22px;
  --radius-pill: 999px;
  --sidebar-width: 272px;
  --review-width: 520px;
  --review-min-width: 360px;
  --work-min-width: 480px;
  --header-height: 48px;
  --thread-width: 760px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --duration: 140ms;
  --duration-fast: 120ms;
  --duration-slow: 220ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f6f4;
  --bg-sidebar: #efeee9;
  --bg-elevated: #fffcf9;
  --bg-subtle: #f1f0eb;
  --bg-hover: rgba(28, 27, 24, .05);
  --bg-active: rgba(28, 27, 24, .085);
  --bg-user: #ebeae4;
  --bg-code: #f3f2ed;
  --bg-inverse: #1c1b19;
  --fg: #1c1b19;
  --fg-secondary: #5c5954;
  --fg-tertiary: #7a766f;
  --fg-quaternary: #a39e96;
  --fg-inverse: #f7f6f4;
  --border: rgba(28, 27, 24, .10);
  --border-strong: rgba(28, 27, 24, .18);
  --focus: #1c1b19;
  --accent: #1c1b19;
  --accent-solid: #1c1b19;
  --accent-contrast: #f7f6f4;
  --accent-bg: rgba(28, 27, 25, .06);
  --accent-border: rgba(28, 27, 25, .16);
  --accent-glow: rgba(28, 27, 25, .08);
  --link: #1c1b19;
  --green: #2f8f45;
  --green-bg: rgba(47, 143, 69, .10);
  --red: #b42318;
  --red-bg: rgba(180, 35, 24, .09);
  --yellow: #8a5a00;
  --yellow-bg: rgba(138, 90, 0, .12);
  --blue: #1857b5;
  --blue-bg: rgba(24, 87, 181, .09);
  --diff-add: rgba(47, 143, 69, .09);
  --diff-add-strong: rgba(47, 143, 69, .20);
  --diff-del: rgba(180, 35, 24, .08);
  --diff-del-strong: rgba(180, 35, 24, .18);
  --shadow-sm: 0 1px 2px rgba(28, 27, 24, .05);
  --shadow-md: 0 4px 16px rgba(28, 27, 24, .08), 0 1px 3px rgba(28, 27, 24, .05);
  --shadow-lg: 0 12px 40px rgba(28, 27, 24, .14), 0 2px 6px rgba(28, 27, 24, .06);
  --composer-shadow: 0 8px 32px rgba(28, 27, 24, .07), 0 2px 6px rgba(28, 27, 24, .03);
  --scrim: rgba(28, 27, 24, .22);
  --hl-keyword: #cf222e;
  --hl-string: #0a3069;
  --hl-comment: #7a766f;
  --hl-number: #0550ae;
  --hl-func: #8250df;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121314;
  --bg-sidebar: #0e0f10;
  --bg-elevated: #1c1d21;
  --bg-subtle: #18191d;
  --bg-hover: rgba(236, 234, 230, .06);
  --bg-active: rgba(236, 234, 230, .10);
  --bg-user: #24262c;
  --bg-code: #16171b;
  --bg-inverse: #eceae6;
  --fg: #eceae6;
  --fg-secondary: #b0aea8;
  --fg-tertiary: #8a8882;
  --fg-quaternary: #6e6c67;
  --fg-inverse: #121314;
  --border: rgba(236, 234, 230, .09);
  --border-strong: rgba(236, 234, 230, .16);
  --focus: #eceae6;
  --accent: #eceae6;
  --accent-solid: #eceae6;
  --accent-contrast: #121314;
  --accent-bg: rgba(236, 234, 230, .08);
  --accent-border: rgba(236, 234, 230, .22);
  --accent-glow: rgba(236, 234, 230, .10);
  --link: #eceae6;
  --green: #6dbe62;
  --green-bg: rgba(109, 190, 98, .14);
  --red: #ff7b72;
  --red-bg: rgba(255, 123, 114, .12);
  --yellow: #d4a24a;
  --yellow-bg: rgba(212, 162, 74, .15);
  --blue: #79b8ff;
  --blue-bg: rgba(121, 184, 255, .12);
  --diff-add: rgba(109, 190, 98, .14);
  --diff-add-strong: rgba(109, 190, 98, .30);
  --diff-del: rgba(248, 81, 73, .12);
  --diff-del-strong: rgba(248, 81, 73, .28);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --composer-shadow: 0 8px 32px rgba(0, 0, 0, .24), 0 1px 3px rgba(0, 0, 0, .16);
  --scrim: rgba(0, 0, 0, .5);
  --hl-keyword: #ff7b72;
  --hl-string: #a5d6ff;
  --hl-comment: #8a8882;
  --hl-number: #79c0ff;
  --hl-func: #d2a8ff;
}