:root {
  --ui-bg: #f5f5f5;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f6f7fb;
  --ui-surface-muted: #eef2f7;
  --ui-text: #575757;
  --ui-text-strong: #1a2142;
  --ui-text-muted: #73809a;
  --ui-border: #dfe6ef;
  --ui-border-strong: #cfd8e5;
  --ui-primary: #1f6bff;
  --ui-primary-hover: #1458da;
  --ui-accent: #ff6400;
  --ui-success: #2eaf67;
  --ui-danger: #d83737;
  --ui-warning: #f59e0b;

  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 16px;
  --ui-radius-xl: 20px;
  --ui-radius-pill: 999px;

  --ui-shadow-sm: 0 8px 22px rgba(17, 26, 61, 0.06);
  --ui-shadow-md: 0 12px 26px rgba(17, 26, 61, 0.08);

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;

  --ui-control-h-md: 42px;
  --ui-control-h-sm: 34px;
}

html[data-theme='dark'] {
  --ui-bg: #0f172a;
  --ui-surface: #111827;
  --ui-surface-soft: #162035;
  --ui-surface-muted: #1a2740;
  --ui-text: #d9e3f1;
  --ui-text-strong: #f1f5ff;
  --ui-text-muted: #a8b7d1;
  --ui-border: rgba(148, 163, 184, 0.24);
  --ui-border-strong: rgba(148, 163, 184, 0.34);
  --ui-primary: #3b82f6;
  --ui-primary-hover: #2563eb;
  --ui-accent: #ff7a1f;
  --ui-success: #34d399;
  --ui-danger: #f87171;
  --ui-warning: #fbbf24;
  --ui-shadow-sm: 0 8px 26px rgba(0, 0, 0, 0.32);
  --ui-shadow-md: 0 16px 34px rgba(0, 0, 0, 0.38);
}