:root {
  --bf-c-accent: #2271b1;
  --bf-c-accent-hover: #135e96;
  --bf-c-accent-soft: #f0f6fc;
  --bf-c-accent-text: #ffffff;

  --bf-c-text: #1d2327;
  --bf-c-text-soft: #3c434a;
  --bf-c-text-muted: #646970;
  --bf-c-text-invert: #ffffff;

  --bf-c-surface: #ffffff;
  --bf-c-surface-sunken: #f6f7f7;
  --bf-c-surface-raised: #ffffff;
  --bf-c-canvas: #f0f0f1;

  --bf-c-border: #c3c4c7;
  --bf-c-border-soft: #dcdcde;
  --bf-c-border-strong: #8c8f94;
  --bf-c-border-field: #8c8f94;

  --bf-c-ok: #00701f;
  --bf-c-ok-bg: #edf7ee;
  --bf-c-ok-border: #b8dcbc;

  --bf-c-warn: #8a6100;
  --bf-c-warn-bg: #fcf6e6;
  --bf-c-warn-border: #dfc27a;

  --bf-c-error: #b32d2e;
  --bf-c-error-bg: #fcf0f1;
  --bf-c-error-border: #e2a5a6;

  --bf-c-info: #1b4b72;
  --bf-c-info-bg: #f0f6fc;
  --bf-c-info-border: #a7c6e0;

  --bf-c-focus: #2271b1;

  --bf-sp-1: 4px;
  --bf-sp-2: 8px;
  --bf-sp-3: 12px;
  --bf-sp-4: 16px;
  --bf-sp-5: 24px;
  --bf-sp-6: 32px;
  --bf-sp-7: 48px;
  --bf-sp-8: 64px;

  --bf-r-sm: 3px;
  --bf-r-md: 4px;
  --bf-r-lg: 6px;
  --bf-r-pill: 999px;

  --bf-fs-xs: 11px;
  --bf-fs-sm: 12px;
  --bf-fs-md: 13px;
  --bf-fs-lg: 15px;
  --bf-fs-xl: 20px;
  --bf-fs-2xl: 23px;
  --bf-fs-field: 13px;
  --bf-fs-field-touch: 16px;

  --bf-fw-normal: 400;
  --bf-fw-medium: 500;
  --bf-fw-bold: 600;

  --bf-lh-tight: 1.3;
  --bf-lh-normal: 1.5;
  --bf-lh-loose: 1.7;

  --bf-bw-hair: 1px;
  --bf-bw-thick: 2px;
  --bf-bw-marker: 4px;

  --bf-sh-1: 0 1px 2px rgba(0,0,0,.06);
  --bf-sh-2: 0 1px 4px rgba(0,0,0,.10);
  --bf-sh-modal: 0 2px 5px rgba(0,0,0,.18);

  --bf-ico-sm: 16px;
  --bf-ico-md: 18px;
  --bf-ico-lg: 24px;
  --bf-ico-xl: 32px;
  --bf-ico-stroke: 1.75;

  --bf-tap: 44px;
  --bf-field-h: 34px;
  --bf-field-h-touch: 44px;

  --bf-z-savebar: 90;
  --bf-z-sticky: 100;
  --bf-z-dialog: 160000;
}