okr-performance/frontend/src/styles/theme.css

:root {
  --color-brand: #2b1f99;
  --color-brand-strong: #1d166b;
  --color-brand-muted: #33269f;
  --color-brand-soft: #eceaf8;
  --color-accent: #3ad4d8;
  --color-accent-strong: #17a9ad;
  --color-accent-soft: #e5fbfc;
  --color-accent-alpha: rgba(58, 212, 216, 0.1);
  --color-accent-focus: rgba(58, 212, 216, 0.22);

  --color-bg: #f5f8fa;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8fafc;
  --color-surface-muted: #f3f6f9;
  --color-surface-elevated: #ffffff;
  --color-border: #dfe7ee;
  --color-border-soft: #edf2f6;
  --color-text: #18212f;
  --color-text-secondary: #5f6b7a;
  --color-text-muted: #8a97a8;
  --color-success: #2e9d65;
  --color-warning: #c98219;
  --color-danger: #c94a4a;
  --color-info: #4c6f91;
  --color-grade-s: #0d7a5f;
  --color-grade-a: #2e9d65;
  --color-grade-b: #4c6f91;
  --color-grade-c: #c94a4a;
  --color-medical: #1a6b7a;
  --color-surface-tint-brand: #f4f3fb;
  --color-surface-tint-success: #f0f7f3;
  --color-surface-tint-warning: #faf6ee;
  --color-surface-tint-danger: #faf2f2;
  --color-surface-tint-info: #edf8f9;
  --color-white: #ffffff;
  --color-sidebar-end: #120d4a;
  --color-sidebar-text: rgba(255, 255, 255, 0.72);
  --color-sidebar-muted: rgba(255, 255, 255, 0.5);
  --color-sidebar-border: rgba(255, 255, 255, 0.1);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-popover: 0 12px 28px rgba(15, 23, 42, 0.12);
  --layout-sidebar: 220px;
  --layout-topbar: 52px;

  /* 间距阶梯（8 的倍数） */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

  /* 过渡 */
  --transition-fast: 0.2s ease;

  --el-color-primary: var(--color-brand);
  --el-color-primary-light-3: #5544b8;
  --el-color-primary-light-5: #7a6bc9;
  --el-color-primary-light-7: #a096dc;
  --el-color-primary-light-8: #c5beea;
  --el-color-primary-light-9: #e2def6;
  --el-color-primary-dark-2: var(--color-brand-strong);
  --el-border-radius-base: var(--radius-sm);

  /* ===== v2 增量 token（信息架构重构，只增不改）===== */

  /* 数据表格系统 */
  --table-row-height: 40px;
  --table-row-height-compact: 32px;
  --table-header-bg: var(--color-surface-subtle, #f8fafc);
  --table-row-hover: var(--color-surface-muted, #f3f6f9);
  --table-row-group-bg: var(--color-surface-tint-brand, rgba(43, 31, 153, 0.03));
  --table-border: var(--color-border-soft, #edf2f6);

  /* 工具栏顶栏（替代 page-hero）*/
  --toolbar-height: 48px;
  --toolbar-bg: var(--color-surface-subtle, #f8fafc);
  --toolbar-border: var(--color-border, #dfe7ee);

  /* 状态色点（替代 effect="dark" round tag）*/
  --dot-size: 6px;

  /* 区段色带标题 */
  --section-band-bg: var(--color-surface-tint-info, rgba(58, 212, 216, 0.08));
  --section-band-color: var(--color-medical, #0d7a5f);
  --section-band-font-size: 11px;
  --section-band-letter-spacing: 0.3px;

  /* 大写小字标签（表头/字段名）*/
  --label-uppercase: uppercase;
  --label-letter-spacing: 0.5px;
  --label-font-size: 10px;

  /* 侧边栏 v2 加深 */
  --color-sidebar-bg: #1d166b;

  /* 登录页品牌区渐变 */
  --color-login-brand-from: #1d166b;
  --color-login-brand-to: #120d4a;

  /* ===== v3 手术观测台壳层 token ===== */
  --shell-rail-width: 64px;
  --shell-context-width: 176px;
  --shell-status-height: 36px;
  --page-context-height: 64px;

  --workspace-bg: #f5f8fa;
  --workspace-surface: #ffffff;

  --shell-bg-deep: #120d4a;
  --shell-bg: #1d166b;

  --motion-fast: 160ms ease;
}

/* ===== 手术观测台字体 ===== */
/* WOFF2 文件需从官方发行包提取并放入 src/assets/fonts/ */
/* Source Han Sans SC: https://github.com/adobe-fonts/source-han-sans */
/* IBM Plex Sans: https://github.com/IBM/plex */
@font-face {
  font-family: 'Source Han Sans SC';
  src: local('Source Han Sans SC'), local('Noto Sans CJK SC');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Han Sans SC';
  src: local('Source Han Sans SC Medium'), local('Noto Sans CJK SC Medium');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
}

button,
input,
textarea,
select {
  font: inherit;
}

a {
  color: inherit;
}