:root {
  --ui-bg: #f3f5f6;
  --ui-sidebar: #20262d;
  --ui-surface: #ffffff;
  --ui-surface-raised: #ffffff;
  --ui-surface-muted: #f7f8f9;
  --ui-surface-hover: #edf1f3;

  --ui-border: #d5dce1;
  --ui-border-subtle: #e2e7ea;
  --ui-border-strong: #7c8793;

  --ui-text: #20252b;
  --ui-text-secondary: #4f5b66;
  --ui-text-muted: #5f6c78;

  --ui-accent: #d64221;
  --ui-accent-hover: #b73518;
  --ui-on-accent: #ffffff;

  --ui-success: #177245;
  --ui-warning: #8a5700;
  --ui-danger: #b42318;
  --ui-info: #285a9f;

  --ui-sidebar-surface: #29313a;
  --ui-sidebar-hover: #303944;
  --ui-sidebar-border: #3c4753;
  --ui-sidebar-text: #f5f7f8;
  --ui-sidebar-text-secondary: #cbd2d9;
  --ui-sidebar-text-muted: #9faab5;
  --ui-sidebar-focus: #ff8a6f;

  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 14px;
  --font-lg: 16px;
  --font-xl: 20px;
  --font-title: 24px;

  --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-space-8: 32px;

  --ui-control-height: 40px;
  --ui-touch-height: 44px;
  --ui-row-height: 60px;
  --ui-radius: 6px;
  --ui-radius-panel: 8px;
  --ui-focus: #d64221;
  --ui-shadow-panel: 0 1px 2px rgb(32 37 43 / 0.06);
  --ui-shadow-overlay: 0 18px 48px rgb(32 37 43 / 0.24);
}