:root {
  /* Primitive tokens */
  --primitive-space-1: 4px;
  --primitive-space-2: 8px;
  --primitive-space-3: 12px;
  --primitive-space-4: 16px;
  --primitive-space-5: 20px;
  --primitive-space-6: 24px;
  --primitive-space-8: 32px;
  --primitive-space-10: 40px;
  --primitive-blue-600: #0052d9;
  --primitive-teal-700: #0f766e;
  --primitive-radius-sm: 6px;
  --primitive-radius-md: 8px;
  --primitive-radius-lg: 12px;

  /* Semantic tokens */
  --ui-color-primary: var(--primitive-blue-600);
  --ui-color-primary-soft: #eff6ff;
  --ui-color-success: #16845b;
  --ui-color-warning: #b76a00;
  --ui-color-danger: #c73636;
  --ui-color-info: #2563eb;
  --ui-color-status-purple: #7c3aed;
  --ui-text: #172033;
  --ui-text-secondary: #52627a;
  --ui-color-text: var(--ui-text);
  --ui-color-text-secondary: var(--ui-text-secondary);
  --ui-color-text-muted: #64748b;
  --ui-color-text-subtle: #94a3b8;
  --ui-surface: #ffffff;
  --ui-background: #f8fafc;
  --ui-border: #d9e3f0;
  --ui-color-surface: var(--ui-surface);
  --ui-color-surface-subtle: #f8fafc;
  --ui-color-surface-muted: #f1f5f9;
  --ui-color-border: var(--ui-border);
  --ui-color-border-strong: #b8c9df;
  --ui-color-primary-hover: #0045b8;
  --ui-color-primary-active: #003a99;
  --ui-space-page: var(--primitive-space-6);
  --ui-space-section: var(--primitive-space-5);
  --ui-space-component: var(--primitive-space-3);
  --ui-page-inset: clamp(24px, 2vw, 40px);

  /* Component tokens */
  --component-control-height: 40px;
  --component-control-height-lg: 44px;
  --component-control-height-sm: 32px;
  --component-control-radius: var(--primitive-radius-md);
  --component-card-radius: var(--primitive-radius-lg);
  --component-card-padding: var(--primitive-space-5);
  --component-content-inset: var(--primitive-space-6);
  --component-table-row-height: 48px;
  --component-table-row-height-compact: 40px;
  --component-table-cell-x: 14px;
  --component-table-cell-y: 10px;

  /* Legacy aliases retained while components migrate */
  --bg: var(--ui-background);
  --panel: var(--ui-surface);
  --ink: var(--ui-text);
  --muted: var(--ui-text-secondary);
  --line: var(--ui-border);
  --line-strong: #c8d7f2;
  --brand: #1e40af;
  --brand-2: var(--ui-color-primary);
  --brand-3: var(--primitive-teal-700);
  --green: var(--primitive-teal-700);
  --blue: var(--ui-color-info);
  --amber: var(--ui-color-warning);
  --red: var(--ui-color-danger);
  --soft: #edf4ff;
  --soft-2: #f5f9ff;
  --surface-muted: #eef3fb;
  --control-bg: #f1f5ff;
  --sidebar: #ffffff;
  --sidebar-active: var(--ui-color-primary-soft);
  --focus: 0 0 0 3px rgba(0, 82, 217, 0.18);
  --shadow: 0 18px 42px rgba(15, 32, 51, 0.07);
  --shadow-raised: 0 24px 56px rgba(15, 32, 51, 0.12);
  --radius: var(--component-control-radius);
  --z-sidebar: 20;
  --z-topbar: 30;
  --z-popover: 60;
  --z-modal: 90;
  --z-viewer: 100;

  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}