:root {
  --scale-base: 1em;
  --scale-ratio: 1.618;
  --breakpoint-not-small: 30em;
  --breakpoint-medium-start: 30em;
  --breakpoint-medium-end: 60em;
  --breakpoint-large: 60em;

  --spacing-none: 0;
  --spacing-extra-small: calc(var(--scale-base));
  --spacing-small: calc(var(--scale-base) * calc(var(--scale-ratio)));
  --spacing-medium: calc(var(--scale-base) * calc(var(--scale-ratio) * 2));
  --spacing-large: calc(var(--scale-base) * calc(var(--scale-ratio) * 3));
  --spacing-extra-large: calc(var(--scale-base) * calc(var(--scale-ratio) * 4));
  --spacing-extra-extra-large: calc(
    var(--scale-base) * calc(var(--scale-ratio) * 5)
  );
  --spacing-extra-extra-extra-large: calc(
    var(--scale-base) * calc(var(--scale-ratio) * 6)
  );
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  :root {
    --scale-base: 1.1em;
  }
}

@media screen and (min-width: 60em) {
  :root {
    --scale-base: 1.2em;
  }
}