:root {
  --color-primary: 216, 83%, 45%;
  --color-secondary: 215, 49%, 87%;
  --color-neutral-0: 0, 0%, 100%;
  --color-neutral-1: 204, 33%, 97%;
  --color-neutral-2: 213, 30%, 85%;
  --color-invert-0: 0, 0%, 0%;
  --color-invert-1: 205, 84%, 10%;
  --color-invert-2: 206, 20%, 46%;
  --color-invert-3: 205, 20%, 70%;

  /* Font sizes */
  --text-size-x-small: 1.1rem;
  --text-size-small: 1.2rem;
  --text-size-medium: 1.4rem;
  --text-size-large: 1.6rem;
  --text-size-x-large: 1.8rem;

  /* Font weights */
  --text-weight-normal: 400;
  --text-weight-bold: 600;

  /* Line height */
  --line-height-small: 1.6rem;
  --line-height-medium: 2rem;
  --line-height-large: 2.4rem;

  /* SPACING + SIZING */
  /* Positive spacing */
  --size-xxx-small: 0.4rem;
  --size-xx-small: 0.8rem;
  --size-x-small: 1.6rem;
  --size-small: 2rem;
  --size-medium: 2.4rem;
  --size-x-large: 4.8rem;

  /* Negative spacing */
  --negative-size-xxx-small: calc(var(--size-xxx-small) * -1);
  --negative-size-xx-small: calc(var(--size-xx-small) * -1);
  --negative-size-x-small: calc(var(--size-x-small) * -1);
  --negative-size-small: calc(var(--size-small) * -1);
  --negative-size-medium: calc(var(--size-medium) * -1);
  --negative-size-x-large: calc(var(--size-x-large) * -1);

  /* BORDER RADIUS */
  --border-radius-small: 0.2rem;
  --border-radius-medium: 0.5rem;
  --border-radius-large: 0.6rem;

  /* TRANSFORMS */
  --translate: -50%, -50%;
  --rotate: 0deg;
  --scale: 1;

  /* TRANSITIONS */
  --transition-x-fast: 0.1s;
  --transition-fast: 0.2s;
  --transition-medium: 0.3s;
  --transition-slow: 0.4s;
  --transition-x-slow: 0.5s;
}
