:root {
  --ui-primary: #2c3138;
  --ui-primary-rgb: 44, 49, 56;
  --ui-on-primary: #ffffff;
  --ui-on-primary-rgb: 255, 255, 255;
  --ui-primary-hover: #454b52;
  --ui-primary-active: #565c63;
  --ui-primary-border: #424850;
  --ui-primary-soft: #e4e5e7;
  --ui-primary-muted: #a8adb2;

  --ui-surface: #ffffff;
  --ui-surface-muted: #f8fafc;
  --ui-text: #1f2937;
  --ui-text-muted: #667085;
  --ui-border: #d9dee5;
  --ui-border-strong: #c7ced8;
  --ui-focus-ring: rgba(var(--ui-primary-rgb), 0.16);

  --ui-radius-sm: 6px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 12px;
  --ui-shadow-modal: 0 24px 64px rgba(16, 24, 40, 0.28);
  --ui-transition-fast: 160ms ease;
}