packages/ui/src/tokens.css

:root {
  color-scheme: light;
  --color-bg: #f8f8f8;
  --color-window-bg: #ececee;
  --color-window-bg-mac: color-mix(in oklab, var(--color-bg) 70%, transparent);
  --color-input: #ffffff;
  --color-fill: rgba(13, 13, 13, 0.03);
  --color-fill-hover: rgba(13, 13, 13, 0.05);
  --color-surface: #ffffff;
  --color-card: var(--color-input);
  --color-popover: #ffffff;
  --color-hover: rgba(13, 13, 13, 0.05);
  --color-menu-hover: rgba(13, 13, 13, 0.05);
  --color-accent: #ebf4ff;
  --color-surface-muted: #f0f0f0;
  --color-tooltip: #f0f0f0;
  --color-tooltip-foreground: #0d0d0d;
  --color-tooltip-tag: #e6e6e6;
  --color-tooltip-tag-foreground: #5c5c5c;
  --color-text: var(--color-neutral-800);
  --color-text-muted: color-mix(in oklab, var(--color-foreground) 60%, transparent);
  --color-foreground: var(--color-text);
  --color-text-subtle: color-mix(in oklab, var(--color-foreground) 60%, transparent);
  --color-text-subtlest: color-mix(in oklab, var(--color-foreground) 40%, transparent);
  --color-process-subtle: var(--color-text-subtle);
  --color-process-subtlest: var(--color-text-subtlest);
  --brand-blue: #4f9fc3;
  --brand-coral: #ef857a;
  --brand-amber: #f2be4d;
  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-secondary: #e6e6e6;
  --color-active: rgba(13, 13, 13, 0.05);
  --color-running: #28627e;
  --color-danger: var(--brand-coral);
  --color-error: #914037;
  --color-danger-surface: #f8e9e5;
  --color-warning: var(--brand-amber);
  --color-waiting: #765716;
  --color-warning-surface: #f7eed5;
  --color-link: #28627e;
  --color-file-reference: #1a70b8;
  --color-file-link: #0066dd;
  --color-skill-reference: #7453b0;
  --color-session-reference: #14807a;
  --color-command-reference: #566270;
  --color-subagent-reference: #6f7a2f;
  --color-border: rgba(13, 13, 13, 0.1);
  --color-diff-added: #34754b;
  --color-diff-removed: #a14e44;
  --color-focus: rgba(13, 13, 13, 0.15);
  --color-find-highlight: #fff4eb;
  --color-find-highlight-active: #ffb26b;
  --color-border-strong: rgba(13, 13, 13, 0.15);
  --color-usage-bar: #28627e;
  --color-terminal-selection: #28627e38;
  --color-overlay: #26323840;
  /* Match ZCode's Tailwind 4.2 sans stack; an explicit PingFang fallback changes Chinese glyph metrics. */
  --font-body:
    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-code:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", monospace;
  --ui-font-size: 14px;
  --text-xs: calc(var(--ui-font-size) - 4px);
  --text-small: calc(var(--ui-font-size) - 2px);
  --text-caption: calc(var(--ui-font-size) - 1px);
  --text-body: var(--ui-font-size);
  --text-heading: calc(var(--ui-font-size) + 2px);
  --text-title: calc(var(--ui-font-size) + 4px);
  --line-body: 1.5;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-small: 4px;
  --radius-control: 6px;
  --radius-nested: 8px;
  --radius-panel: 12px;
  --radius-dialog: 16px;
  --radius-full: 9999px;
  --shadow-popover: 0 4px 20px #26323812;
  --shadow-menu: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --layer-overlay: 10;
  --layer-dialog: 11;
  --layer-popover: 12;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #161616;
  --color-window-bg: #2b2b2b;
  --color-window-bg-mac: color-mix(in oklab, var(--color-window-bg) 60%, transparent);
  --color-input: #2b2b2b;
  --color-fill: rgba(255, 255, 255, 0.05);
  --color-fill-hover: rgba(255, 255, 255, 0.1);
  --color-surface: #202020;
  --color-popover: #2b2b2b;
  --color-hover: rgba(255, 255, 255, 0.05);
  --color-menu-hover: #363636;
  --color-accent: #001d3d;
  --color-surface-muted: #161616;
  --color-tooltip: #2b2b2b;
  --color-tooltip-foreground: #f8f8f8;
  --color-tooltip-tag: #363636;
  --color-tooltip-tag-foreground: #adadad;
  --color-text: var(--color-neutral-300);
  --color-text-muted: color-mix(in oklab, var(--color-foreground) 60%, transparent);
  --color-foreground: var(--color-text);
  --color-text-subtlest: color-mix(in oklab, var(--color-foreground) 30%, transparent);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-active: rgba(255, 255, 255, 0.1);
  --color-primary: #ffffff;
  --color-on-primary: #000000;
  --color-secondary: #363636;
  --color-link: #86c7e1;
  --color-file-reference: #8fc5ef;
  --color-file-link: #80beff;
  --color-skill-reference: #bda5e6;
  --color-session-reference: #93d8d2;
  --color-command-reference: #b5c0cc;
  --color-subagent-reference: #b7bd75;
  --color-focus: rgba(255, 255, 255, 0.15);
  --color-find-highlight: #542500;
  --color-find-highlight-active: #ff8a30;
  --color-danger-surface: #46302c;
  --color-error: #f0a299;
  --color-diff-added: #8ac49b;
  --color-diff-removed: #efaca4;
  --color-running: #86c7e1;
  --color-waiting: #e3c477;
  --color-warning: #e3c477;
  --color-warning-surface: #3c3420;
  --color-border-strong: rgba(255, 255, 255, 0.15);
  --color-usage-bar: #86c7e1;
  --color-terminal-selection: #86c7e147;
  --color-overlay: #0008;
  --shadow-popover: 0 4px 20px #0004;
}