:root {
  /****************************************************************
  * Border Width
  * Variables for controlling the width of an element's borders.
  * border-width: var(--border);
  *****************************************************************/
  --border:   1px;
  --border-2: 2px;
  --border-4: 4px;
  --border-8: 8px;

  /****************************************************************
  * Border Radius
  * Variables for controlling the border radius of an element.
  * border-radius: var(--rounded-sm);
  *****************************************************************/
  --rounded-xs:   0.125rem; /* 2px */
  --rounded-sm:   0.25rem;  /* 4px */
  --rounded-md:   0.375rem; /* 6px */
  --rounded-lg:   0.5rem;   /* 8px */
  --rounded-xl:   0.75rem;  /* 12px */
  --rounded-2xl:  1rem;     /* 16px */
  --rounded-3xl:  1.5rem;   /* 24px */
  --rounded-full: 9999px;
}