:root {
  color-scheme: light;
  --ba-primary: #075ff0;
  --ba-primary-strong: #0349bd;
  --ba-primary-soft: #eaf2ff;
  --ba-primary-faint: #f4f8ff;
  --ba-bg: #f4f8ff;
  --ba-surface: #ffffff;
  --ba-surface-muted: #f8fbff;
  --ba-text: #14233a;
  --ba-text-soft: #6e7f99;
  --ba-border: #dce6f3;
  --ba-border-strong: #c8d7ea;
  --ba-success: #15965a;
  --ba-success-soft: #e7f8ef;
  --ba-warning: #d88900;
  --ba-warning-soft: #fff4db;
  --ba-danger: #d93649;
  --ba-danger-soft: #fff0f2;
  --ba-info: #246dd8;
  --ba-info-soft: #eaf2ff;

  --ba-radius-xs: 8px;
  --ba-radius-sm: 12px;
  --ba-radius-md: 16px;
  --ba-radius-lg: 22px;
  --ba-radius-xl: 28px;

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

  --ba-shadow-sm: 0 5px 18px rgb(24 55 96 / 7%);
  --ba-shadow-md: 0 14px 40px rgb(24 55 96 / 11%);
  --ba-shadow-lg: 0 24px 70px rgb(24 55 96 / 15%);

  --ba-topbar-height: 72px;
  --ba-bottom-nav-height: 72px;
  --ba-content-width: 760px;
  --ba-transition: 160ms ease;
}