:root {
  --background: #f3f6f9;
  --foreground: #111827;
  --card-background: #ffffff;
  --card-foreground: #1f2937;
  --surface-secondary: #f3f7fb;
  --surface-tertiary: #eef3f8;
  --surface-hover: #eef4fa;
  --surface-active: #e7f1ff;
  --border-color: #dfe8f2;
  --border-secondary: #c9d8e7;
  --text-primary: #111827;
  --text-secondary: #334155;
  --text-tertiary: #475569;
  --text-muted: #8a99aa;
  --text-faint: #a8b4c3;
  --primary: #1a7cff;
  --primary-hover: #0f67df;
  --primary-foreground: #ffffff;
  --success: #059669;
  --success-soft: #ecfdf5;
  --warning: #d97706;
  --warning-soft: #fff7ed;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --purple: #7c3aed;
  --purple-soft: #f3e8ff;
  --table-header-bg: #f4f8fc;
  --table-header-text: #202a35;
  --table-cell-text: #334155;
  --table-row-hover: #f7fbff;
  --radius-section: 8px;
  --radius-control: 6px;
  --shadow-soft: 0 1px 2px rgb(15 23 42 / 0.05);
  --shadow-elevated: 0 10px 30px rgb(15 23 42 / 0.08);
  --app-sans-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --demo-bg: var(--background);
  --demo-surface: var(--card-background);
  --demo-border: var(--border-color);
  --demo-text: var(--text-primary);
  --demo-muted: var(--text-muted);
  --demo-primary: var(--primary);
  --demo-primary-soft: var(--surface-active);
  --demo-success: var(--success);
  --demo-warning: var(--warning);
  --demo-danger: var(--danger);
  --demo-radius: var(--radius-section);
  --demo-shadow: var(--shadow-soft);
}