:root {
  --bg: #eef5ff;
  --surface: #ffffff;
  --surface-alt: #f4f7ff;
  --surface-raised: #ffffff;
  --border: #e3e9f7;
  --border-soft: #ebeffa;
  --gold: #ff9f1c;
  --gold-soft: #fff1d6;
  --green: #17b978;
  --green-soft: #e2fbef;
  --red: #ff4d6d;
  --red-soft: #ffe6ea;
  --purple: #7c5cff;
  --purple-soft: #efe9ff;
  --blue: #2f8fff;
  --text: #22263a;
  --text-dim: #6b7290;
  --text-faint: #7d84a3;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --ui-primary: #3182f6;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f2f4f6;
  --ui-foreground: #191f28;
  --ui-foreground-secondary: #4e5968;
  --ui-muted: #6b7684;
  --ui-hairline: #e5e8eb;
}