:root {
  /**
  * @tokens Spacing
  * @presenter Spacing
  */

  --spacing-4: 1rem; /* Multiple of root font size e.g. if root size 14px, 2rem = 28px */
  --spacing-0: 0px;
  --spacing-px: 1px;
  --spacing-0-5: calc(var(--spacing-4) / 8);
  --spacing-1: calc(var(--spacing-4) / 4);
  --spacing-1-5: 0.375rem;
  --spacing-2: calc(var(--spacing-4) / 2);
  --spacing-2-5: 0.625rem;
  --spacing-3: 0.75rem;
  --spacing-3-5: 0.875rem;
  --spacing-5: calc(var(--spacing-4) * 1.25);
  --spacing-6: calc(var(--spacing-4) * 1.5);
  --spacing-7: calc(var(--spacing-4) * 1.75);
  --spacing-8: calc(var(--spacing-4) * 2);
  --spacing-9: calc(var(--spacing-4) * 2.25);
  --spacing-10: calc(var(--spacing-4) * 2.5);
  --spacing-11: calc(var(--spacing-4) * 2.75);
  --spacing-12: calc(var(--spacing-4) * 3);
  --spacing-14: calc(var(--spacing-4) * 3.5);
  --spacing-16: calc(var(--spacing-4) * 4);
  --spacing-20: calc(var(--spacing-4) * 5);
  --spacing-24: calc(var(--spacing-4) * 6);
  --spacing-28: calc(var(--spacing-4) * 7);
  --spacing-32: calc(var(--spacing-4) * 8);
  --spacing-36: calc(var(--spacing-4) * 9);
  --spacing-40: calc(var(--spacing-4) * 10);
  --spacing-44: calc(var(--spacing-4) * 11);
  --spacing-48: calc(var(--spacing-4) * 12);
  --spacing-52: calc(var(--spacing-4) * 13);
  --spacing-56: calc(var(--spacing-4) * 14);
  --spacing-60: calc(var(--spacing-4) * 15);
  --spacing-64: calc(var(--spacing-4) * 16);
  --spacing-72: calc(var(--spacing-4) * 18);
  --spacing-80: calc(var(--spacing-4) * 20);
  --spacing-96: calc(var(--spacing-4) * 24);

  /* negative values */
  --spacing-neg-4: -1rem;
  --spacing-neg-px: -1px;
  --spacing-neg-0-5: calc(var(--spacing-neg-4) / 8);
  --spacing-neg-1: calc(var(--spacing-neg-4) / 4);
  --spacing-neg-1-5: -0.375rem;
  --spacing-neg-2: calc(var(--spacing-neg-4) / 2);
  --spacing-neg-2-5: -0.625rem;
  --spacing-neg-3: -0.75rem;
  --spacing-neg-3-5: -0.875rem;
  --spacing-neg-5: calc(var(--spacing-neg-4) * 1.25);
  --spacing-neg-6: calc(var(--spacing-neg-4) * 1.5);
  --spacing-neg-7: calc(var(--spacing-neg-4) * 1.75);
  --spacing-neg-8: calc(var(--spacing-neg-4) * 2);
  --spacing-neg-9: calc(var(--spacing-neg-4) * 2.25);
  --spacing-neg-10: calc(var(--spacing-neg-4) * 2.5);
  --spacing-neg-11: calc(var(--spacing-neg-4) * 2.75);
  --spacing-neg-12: calc(var(--spacing-neg-4) * 3);
  --spacing-neg-14: calc(var(--spacing-neg-4) * 3.5);
  --spacing-neg-16: calc(var(--spacing-neg-4) * 4);
  --spacing-neg-20: calc(var(--spacing-neg-4) * 5);
  --spacing-neg-24: calc(var(--spacing-neg-4) * 6);
  --spacing-neg-28: calc(var(--spacing-neg-4) * 7);
  --spacing-neg-32: calc(var(--spacing-neg-4) * 8);
  --spacing-neg-36: calc(var(--spacing-neg-4) * 9);
  --spacing-neg-40: calc(var(--spacing-neg-4) * 10);
  --spacing-neg-44: calc(var(--spacing-neg-4) * 11);
  --spacing-neg-48: calc(var(--spacing-neg-4) * 12);
  --spacing-neg-52: calc(var(--spacing-neg-4) * 13);
  --spacing-neg-56: calc(var(--spacing-neg-4) * 14);
  --spacing-neg-60: calc(var(--spacing-neg-4) * 15);
  --spacing-neg-64: calc(var(--spacing-neg-4) * 16);
  --spacing-neg-72: calc(var(--spacing-neg-4) * 18);
  --spacing-neg-80: calc(var(--spacing-neg-4) * 20);
  --spacing-neg-96: calc(var(--spacing-neg-4) * 24);
}