:root {
  --spacing-x1: 8px;
  --spacing-x2: 16px;
  --spacing-x3: 24px;
  --spacing-x4: 32px;
  --spacing-x5: 40px;
  --spacing-x6: 48px;
  --spacing-x7: 56px;
  --spacing-x8: 64px;
  --spacing-x9: 72px;
  --spacing-x10: 80px;
  --spacing-x11: 88px;
  --spacing-x12: 96px;
  --spacing-x13: 104px;
  --spacing-x14: 112px;
  --spacing-x15: 120px;
  --spacing-x16: 128px;
  --spacing-x17: 136px;
  --spacing-x18: 144px;
  --spacing-x19: 152px;
  --spacing-x20: 160px;
  --spacing-x32: 256px;

  /* spacings not matching the 8px scale */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-52: 52px;

  --sizing-4xs: 0px;
  --sizing-3xs: 2px;
  --sizing-2xs: 4px;
  --sizing-xs: 8px;
  --sizing-s: 12px;
  --sizing-m: 16px;
  --sizing-l: 20px;
  --sizing-xl: 24px;
  --sizing-2xl: 32px;
  --sizing-3xl: 40px;
  --sizing-4xl: 48px;



  /* Number Border Radius */
  --border-radius-2xs: 0px;
  --border-radius-xs: 2px;
  --border-radius-s: 4px;
  --border-radius-m: 8px;
  --border-radius-l: 16px;
  --border-radius-xl: 24px;
  --border-radius-2xl: 40px;

  --stroke-divider-width: 1px;

  --section-padding-lg: 64px;
  --section-padding-md: 48px;
  --section-padding-sm: 32px;
  --page-padding: 20px;
  --navbar-height: 104px;
  --header-offset: var(--navbar-height);
  --modal-max-width: 768px;

}

:root:has(.site-header.site-header--with-banner) {
    --header-offset: calc(var(--navbar-height) + var(--announcement-banner-height));
}

@media screen and (min-width:960px) {
  :root {
    --section-padding-lg: 112px;
    --section-padding-md: 80px;
    --section-padding-sm: 48px;
    --page-padding: 64px;
    --navbar-height: 80px;
  }
}