:root {

  --rgb-black: 11, 18, 21;
  --rgb-blue: 37, 99, 235;
  --rgb-grey: 231, 232, 233;
  --rgb-white: 255, 255, 255;

  --color-black: rgb(var(--rgb-black));
  --color-blue: rgb(var(--rgb-blue));
  --color-grey: rgb(var(--rgb-grey));
  --color-white: rgb(var(--rgb-white));

  --font-family-graphik: 'Graphik', Sans-Serif;
  --font-family-monaspace: 'Monaspace', Monospace;

  --font-size: max(1.375rem, 2.225vw);
  --font-size-xxx-small: max(0.875rem, 50%);
  --font-size-xx-small: max(0.9375rem, 60%);
  --font-size-x-small: max(1rem, 65%);
  --font-size-small: max(1.0625rem, 75%);
  --font-size-large: 160%;

  --letter-spacing: -0.025em;
  --letter-spacing-loose: -0.0175em;
  --letter-spacing-tight: -0.04125em;

  --line-height: 1.4;

  --space-neutral: 1.4em;
  --space-small: 0.5em;
  --space-medium: 1em;
  --space-large: 2em;
  --space-x-large: 3em;
  --space-xx-large: 4em;
  --space-xxx-large: 5em;

  --transition: 0.1s ease;

  @media(min-width: 64em) {
    --font-size-large: 200%;
  }

}