:root {
  --base-space: 18px;
  
  /* Basic spacing */
  --space-XXS: calc(var(--base-space)/6);
  --space-XS: calc(var(--base-space)/3);
  --space-S: calc(var(--base-space)/2);
  --space-M: var(--base-space);
  --space-L: calc(var(--base-space)*1.5);
  --space-XL: calc(var(--base-space)*2);
  --space-XXL: calc(var(--base-space)*3);
  --space-XXXL: calc(var(--base-space)*4);
  
  /* Semantic spacing */
  --space-small-element-part: calc(var(--base-space)/6);
  --space-element-part: calc(var(--base-space)/3);
  --space-connected-elements: calc(var(--base-space)/2);
  --space-elements: var(--base-space);
  --space-small-groups: calc(var(--base-space)*1.5);
  --space-groups: calc(var(--base-space)*2);
  --space-groups-big: calc(var(--base-space)*3);
  --space-different-content: calc(var(--base-space)*4);
}
