:root {
  --xb-space-0: 0;
  --xb-space-1: 2px;
  --xb-space-2: 4px;
  --xb-space-3: 6px;
  --xb-space-4: 8px;
  --xb-space-5: 10px;
  --xb-space-6: 12px;
  --xb-space-7: 14px;
  --xb-space-8: 16px;
  --xb-space-10: 20px;
  --xb-space-12: 24px;
  --xb-space-16: 32px;
  --xb-space-20: 40px;
  --xb-space-24: 48px;
  --xb-space-32: 64px;

  --xb-layout-page-padding: var(--xb-space-12);
  --xb-layout-section-gap: var(--xb-space-10);
  --xb-layout-card-gap: var(--xb-space-8);
  --xb-layout-toolbar-gap: var(--xb-space-6);
  --xb-layout-form-gap: var(--xb-space-8);
  --xb-table-cell-padding-x: var(--xb-space-6);
  --xb-table-cell-padding-y: var(--xb-space-4);
}

@media (max-width: 1280px) {
  :root {
    --xb-layout-page-padding: var(--xb-space-10);
    --xb-layout-section-gap: var(--xb-space-8);
  }
}