:root {
  --color-primary: #1677ff;
  --color-primary-hover: #4096ff;
  --color-primary-active: #0958d9;
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-error: #ff4d4f;
  --color-info: #1677ff;
  --color-text: #1f1f1f;
  --color-text-secondary: #595959;
  --color-text-tertiary: #8c8c8c;
  --color-border: #d9d9d9;
  --color-border-split: rgba(5, 5, 5, 0.06);
  --color-bg-layout: #f5f5f5;
  --color-bg-container: #ffffff;
  --sidebar-width: 224px;
  --topbar-height: 56px;
  --content-gutter: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-control: 6px;
  --radius-card: 8px;
  --radius-pill: 999px;
  --shadow-float: 0 6px 16px rgba(0, 0, 0, 0.08);
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;

  /* Compatibility aliases for the existing native frontend. */
  --bg: var(--color-bg-layout);
  --paper: var(--color-bg-container);
  --ink: var(--color-text);
  --muted: var(--color-text-secondary);
  --line: var(--color-border);
  --blue: var(--color-primary);
  --blue-soft: #e6f4ff;
  --red: var(--color-error);
  --red-soft: #fff1f0;
  --green: var(--color-success);
  --amber: var(--color-warning);
  --sidebar: #f5f5f5;
  --shadow: var(--shadow-float);
}