:root {
  color-scheme: light;
  --color-canvas: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-muted: #eef1f4;
  --color-surface-strong: #e4e8ed;
  --color-text: #17191d;
  --color-text-soft: #343a44;
  --color-text-muted: #626a78;
  --color-border: #d7dce3;
  --color-border-strong: #bcc4ce;
  --color-primary: #1769e0;
  --color-primary-strong: #0d55bd;
  --color-primary-soft: #eaf2ff;
  --color-success: #18794e;
  --color-success-soft: #e8f5ee;
  --color-warning: #916300;
  --color-warning-soft: #fff4d6;
  --color-danger: #c73535;
  --color-danger-soft: #ffeded;
  --black: var(--color-text);
  --white: var(--color-surface);
  --gray-25: #fafbfc;
  --gray-50: var(--color-canvas);
  --gray-100: var(--color-border);
  --gray-300: var(--color-border-strong);
  --gray-500: var(--color-text-muted);
  --gray-700: var(--color-text-soft);
  --blue-600: var(--color-primary);
  --blue-700: var(--color-primary-strong);
  --green-600: var(--color-success);
  --amber-600: var(--color-warning);
  --red-600: var(--color-danger);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-control: 6px;
  --radius-panel: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --topbar-height: 56px;
  --sidebar-wide: 232px;
  --sidebar-medium: 220px;
  --inspector-width: 320px;
  --mobile-nav-height: 70px;
  --focus-ring: 0 0 0 3px rgba(23, 105, 224, 0.28);
  --shadow-overlay: 0 20px 56px rgba(23, 25, 29, 0.22);
  --font-sans: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
}