:root {
  --page-max-width: 850px;

  --border-radius: 2px;
  --border-radius-2x: calc(var(--border-radius) * 2);

  --space: 8px;
  --space-2x: calc(var(--space) * 2);
  --space-3x: calc(var(--space) * 3);
  --space-4x: calc(var(--space) * 4);
  --space-5x: calc(var(--space) * 5);
  --space-6x: calc(var(--space) * 6);
  --space-7x: calc(var(--space) * 7);
  --space-8x: calc(var(--space) * 8);
  --space-9x: calc(var(--space) * 9);
  --space-10x: calc(var(--space) * 10);

  --velocity: 500ms;
}

/* Make sure to update the docs in measures.md when changing these breakpoints */

/* @deprecated */
@custom-media --small-device (max-width: 825px);

/* @deprecated */
@custom-media --medium-device (min-width: 826px);

@custom-media --small-device-unification (max-width: 1023px);

/* @deprecated */
@custom-media --large-device (min-width: 1280px);