/* ============== */
/* SPACING TOKENS */
/* ============== */

/* These tokens preserve the appropriate ratios of spacing comapred to our base spacing unit */

/* BASE TOKEN SCALE */
:root {
  --sp-base: 4px; /* This is the base spacing unit of the scale below */

  --sp-0:    0;
  --sp-025:  calc(var(--sp-base) * 0.25); /* 1px */
  --sp-050:  calc(var(--sp-base) * 0.5);  /* 2px */
  --sp-100:  calc(var(--sp-base) * 1);    /* 4px */
  --sp-150:  calc(var(--sp-base) * 1.5);  /* 6px */
  --sp-200:  calc(var(--sp-base) * 2);    /* 8px */
  --sp-300:  calc(var(--sp-base) * 3);    /* 12px */
  --sp-400:  calc(var(--sp-base) * 4);    /* 16px */
  --sp-500:  calc(var(--sp-base) * 5);    /* 20px */
  --sp-600:  calc(var(--sp-base) * 6);    /* 24px */
  --sp-700:  calc(var(--sp-base) * 7);    /* 28px */
  --sp-800:  calc(var(--sp-base) * 8);    /* 32px */
  --sp-1000: calc(var(--sp-base) * 10);   /* 40px */
  --sp-1200: calc(var(--sp-base) * 12);   /* 48px */
  --sp-1600: calc(var(--sp-base) * 16);   /* 64px */
  --sp-2000: calc(var(--sp-base) * 20);   /* 80px */
  --sp-2400: calc(var(--sp-base) * 24);   /* 96px */
  --sp-2800: calc(var(--sp-base) * 28);   /* 112px */
  --sp-3200: calc(var(--sp-base) * 32);   /* 128px */  
}

/* SEMANTIC SPACING VALUES */
:root {
  --sp-button-group-gap: var(--sp-200); /* Defines the horizontal space between grouped buttons */
}