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);
}

* {
  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;
}