/*
 * VS Code 工作台 + Claude 插件风格设计令牌（docs/research/claude-vscode-ui-reference.md）
 * 默认跟随系统亮/暗；<html data-theme="light|dark"> 可手动指定。
 */
:root {
  --app-claude-orange: #d97757;
  --app-claude-clay: #c6613f;
  --app-claude-ivory: #faf9f5;
  --app-success: #74c991;
  --app-danger: #c74e39;
  --app-warning: #e1c08d;

  --app-spacing-small: 4px;
  --app-spacing-medium: 8px;
  --app-spacing-large: 12px;
  --app-spacing-xlarge: 16px;
  --corner-radius-small: 4px;
  --corner-radius-medium: 6px;
  --corner-radius-large: 8px;

  --app-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --app-monospace-font-family: "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
  --app-font-size: 13px;
  --app-monospace-font-size: 12px;
}

/* 亮色：Light Modern */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --app-primary-background: #f8f8f8;
  --app-secondary-background: #ffffff;
  --app-activitybar-background: #f8f8f8;
  --app-statusbar-background: #f8f8f8;
  --app-statusbar-foreground: #3b3b3b;
  --app-primary-foreground: #3b3b3b;
  --app-secondary-foreground: #717171;
  --app-primary-border-color: #e5e5e5;
  --app-input-background: #ffffff;
  --app-input-secondary-background: #ffffff;
  --app-input-border: #cecece;
  --app-input-active-border: #005fb8;
  --app-input-placeholder-foreground: #767676;
  --app-code-background: #7f7f7f1a;
  --app-inline-code-background: #7f7f7f1f;
  --app-link-foreground: #005fb8;
  --app-list-hover-background: #f2f2f2;
  --app-list-active-background: #e4e6f1;
  --app-button-background: #005fb8;
  --app-button-foreground: #ffffff;
  --app-button-hover-background: #0258a8;
  --app-secondary-button-background: #e5e5e5;
  --app-error-foreground: #c74e39;
  --app-shadow: 0 1px 2px #0000001a;
  --app-overlay: #0000004d;
}

/* 暗色：Dark Modern */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --app-primary-background: #181818;
    --app-secondary-background: #1f1f1f;
    --app-activitybar-background: #181818;
    --app-statusbar-background: #181818;
    --app-statusbar-foreground: #cccccc;
    --app-primary-foreground: #cccccc;
    --app-secondary-foreground: #9d9d9d;
    --app-primary-border-color: #2b2b2b;
    --app-input-background: #313131;
    --app-input-secondary-background: #1f1f1f;
    --app-input-border: #3c3c3c;
    --app-input-active-border: #2488db;
    --app-input-placeholder-foreground: #989898;
    --app-code-background: #7f7f7f26;
    --app-inline-code-background: #7f7f7f26;
    --app-link-foreground: #4daafc;
    --app-list-hover-background: #2a2d2e;
    --app-list-active-background: #37373d;
    --app-button-background: #0078d4;
    --app-button-foreground: #ffffff;
    --app-button-hover-background: #026ec1;
    --app-secondary-button-background: #313131;
    --app-error-foreground: #f85149;
    --app-shadow: 0 1px 2px #0000004d;
    --app-overlay: #00000099;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --app-primary-background: #181818;
  --app-secondary-background: #1f1f1f;
  --app-activitybar-background: #181818;
  --app-statusbar-background: #181818;
  --app-statusbar-foreground: #cccccc;
  --app-primary-foreground: #cccccc;
  --app-secondary-foreground: #9d9d9d;
  --app-primary-border-color: #2b2b2b;
  --app-input-background: #313131;
  --app-input-secondary-background: #1f1f1f;
  --app-input-border: #3c3c3c;
  --app-input-active-border: #2488db;
  --app-input-placeholder-foreground: #989898;
  --app-code-background: #7f7f7f26;
  --app-inline-code-background: #7f7f7f26;
  --app-link-foreground: #4daafc;
  --app-list-hover-background: #2a2d2e;
  --app-list-active-background: #37373d;
  --app-button-background: #0078d4;
  --app-button-foreground: #ffffff;
  --app-button-hover-background: #026ec1;
  --app-secondary-button-background: #313131;
  --app-error-foreground: #f85149;
  --app-shadow: 0 1px 2px #0000004d;
  --app-overlay: #00000099;
}