client/src/css/base/_theme-vars.scss

// 全站主题 CSS 变量唯一来源（:root 日间/夜间）；其它 scss 勿重复定义
@use 'breakpoints' as *;

:root {
  color-scheme: light;

  // 响应式断点（供 JS / 媒体查询引用）
  --breakpoint-mobile: #{$breakpoint-mobile};
  --breakpoint-tablet: #{$breakpoint-tablet};

  // 字体
  --font-size-base: 10pt;
  --font-family-ui:
    -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Noto Sans CJK SC",
    "Source Han Sans SC", sans-serif;
  --font-icon: Consolas, Menlo, Monaco, "Courier New", "Droid Sans Mono", monospace;
  --font-icon-size: 16px;

  // 子页顶栏（导航首页用 home.scss 内独立字阶）
  --page-chrome-title-size: 18px;
  --page-chrome-title-weight: 600;
  --page-chrome-subtitle-size: 15px;
  --page-chrome-subtitle-weight: 400;
  --page-chrome-line-height: 1.2;

  // ===== Swiss Style + 科学仪器设计令牌 =====
  // 背景：暖纸色调（Swiss 纸质感）
  --app-bg: #f5f3f0;
  --bg-color: #f5f3f0;
  --panel-bg: #faf8f5;
  --bg-hover: #edeae6;
  --bg-hover-light: #f5f3f0;

  // 文字：高对比度炭黑
  --text-color: #1a1a1a;
  --text-color-light: #4a4a4a;
  --text-muted: #7a7a7a;
  --text-disabled: #aaaaaa;

  // 边框：细线，不喧宾夺主
  --border-color: #e0ddd8;
  --border-strong: #c5c0ba;
  --border-subtle: rgba(0, 0, 0, 0.06);

  // 按钮
  --button-bg: #f5f3f0;
  --button-hover-bg: #edeae6;
  --button-active-bg: #e5e2de;
  --button-border: #d5d0ca;
  --button-text: var(--text-color);

  // 输入
  --input-bg: #faf8f5;
  --input-border: #d0ccc6;
  --text-area-bg: #faf8f5;

  // 工具提示
  --tooltip-bg: #e8e5e0;
  --tooltip-visible-opacity: 1;
  --tooltip-text-normal: #1a1a1a;
  --tooltip-text-selected: #933;
  --tooltip-text-detail: #666666;
  --tooltip-text-value: #1a1a1a;

  // 强调色：科学仪器琥珀色
  --primary-color: #b8860b;
  --accent-color: #b8860b;
  --accent-amber: #b8860b;
  --accent-cyan: #2a8a82;
  --accent-rose: #c45c5c;
  --accent-sage: #5a9a5a;
  --accent-glow: color-mix(in srgb, var(--accent-color) 60%, transparent);
  --accent-shadow: color-mix(in srgb, var(--accent-color) 65%, transparent);
  --accent-stroke: color-mix(in srgb, var(--accent-color) 90%, transparent);

  // 交互
  --hover-bg-color: #edeae6;
  --text-action-btn-hover: rgba(0, 0, 0, 0.05);
  --refresh-btn-hover: #f5f3f0;
  --refresh-btn-color: #999;

  // 加载
  --loading-overlay-bg: rgba(250, 248, 245, 0.5);
  --loading-spinner-border: #f0ede8;
  --loading-spinner-top: #555;

  // DAG 边线色（保留变量名，更新色值）
  --dag-normal-line-color: #e0ddd8;
  --dag-highlight-line-color-in: color-mix(in srgb, var(--accent-color) 80%, transparent);
  --dag-highlight-line-color-out: rgba(196, 92, 92, 0.5);

  // 其他
  --resizer-bg: #f0ede8;
  --resizer-hover: #999;
  --textarea-actions-button-row-min-height: 3.5rem;
  --minimap-width: 8px;
  --bin-highlight-outline: var(--accent-color);
  --bin-highlight-shadow: var(--accent-shadow);
  --avg-line-color: #8c8c8c;
  --token-truncated-color: #888;
  --token-hover-shadow: var(--accent-glow);
  --token-hover-outline: var(--accent-color);
}

:root[data-theme='dark'] {
  color-scheme: dark;

  // 背景
  --app-bg: #121212;
  --bg-color: #191919;
  --panel-bg: #2d2d2d;
  --bg-hover: #2d2d2d;
  --bg-hover-light: #353535;

  // 文字
  --text-color: #e8e6e3;
  --text-color-light: #a09b96;
  --text-muted: #888;
  --text-disabled: #666;

  // 边框
  --border-color: #444;
  --border-strong: #555;
  --border-subtle: rgba(255, 255, 255, 0.06);

  // 按钮
  --button-bg: #353535;
  --button-hover-bg: #454545;
  --button-active-bg: #505050;
  --button-border: #555;
  --button-text: var(--text-color);

  // 输入
  --input-bg: #282828;
  --input-border: #555;
  --text-area-bg: #191919;

  // 工具提示
  --tooltip-bg: #3a3a3a;
  --tooltip-text-normal: #ccc;
  --tooltip-text-selected: #ff6666;
  --tooltip-text-detail: #888;
  --tooltip-text-value: var(--text-color-light);

  // 强调色：暗色下更亮的琥珀
  --primary-color: #e8a838;
  --accent-color: #e8a838;
  --accent-amber: #e8a838;
  --accent-cyan: #4ecdc4;
  --accent-rose: #e07a7a;
  --accent-sage: #7cb87c;
  --accent-glow: color-mix(in srgb, var(--accent-color) 80%, transparent);
  --accent-shadow: var(--accent-glow);
  --accent-stroke: color-mix(in srgb, var(--accent-color) 90%, transparent);

  // 交互
  --hover-bg-color: #3a3a3a;
  --text-action-btn-hover: rgba(255, 255, 255, 0.1);
  --refresh-btn-hover: #3a3a3a;
  --refresh-btn-color: #888;

  // 加载
  --loading-overlay-bg: rgba(25, 25, 25, 0.7);
  --loading-spinner-border: #3a3a3a;
  --loading-spinner-top: #888;

  // DAG
  --dag-normal-line-color: #333;
  --dag-highlight-line-color-in: color-mix(in srgb, var(--accent-color) 80%, transparent);
  --dag-highlight-line-color-out: rgba(255, 71, 64, 0.5);

  // 其他
  --resizer-bg: #2d2d2d;
  --resizer-hover: #666;
  --token-truncated-color: #888;
  --token-hover-shadow: var(--accent-glow);
  --token-hover-outline: var(--accent-color);
  --bin-highlight-outline: var(--accent-color);
  --bin-highlight-shadow: var(--accent-shadow);
  --avg-line-color: #b0b0b0;

  .LMF {
    font-weight: 300;
  }
}