:root {

  --rgb-black: 11, 18, 21;
  --rgb-black-dark: 0, 0, 0;
  --rgb-blue: 37, 99, 235;
  --rgb-blurple: 85, 34, 250;
  --rgb-cherokee: 204, 61, 51;
  --rgb-green: 11, 138, 15;
  --rgb-green-dark: 0, 117, 0;
  --rgb-grey: 231, 232, 233;
  --rgb-highlight: 253, 224, 71;
  --rgb-orange: 248, 121, 23;
  --rgb-paper: 250, 248, 244;
  --rgb-purple: 153, 50, 204;
  --rgb-purple-light: 112, 84, 195;
  --rgb-red: 255, 1, 1;
  --rgb-red-dark: 235, 1, 1;
  --rgb-yellow: 255, 214, 10;
  --rgb-white: 255, 255, 255;
  --rgb-target: 255, 255, 156;

  --color-black: rgb(var(--rgb-black));
  --color-black-dark: rgb(var(--rgb-black-dark));
  --color-blue: rgb(var(--rgb-blue));
  --color-blurple: rgb(var(--rgb-blurple));
  --color-cherokee: rgb(var(--rgb-cherokee));
  --color-green: rgb(var(--rgb-green));
  --color-green-dark: rgb(var(--rgb-green-dark));
  --color-grey: rgb(var(--rgb-grey));
  --color-highlight: rgb(var(--rgb-highlight));
  --color-orange: rgb(var(--rgb-orange));
  --color-paper: rgb(var(--rgb-paper));
  --color-purple: rgb(var(--rgb-purple));
  --color-purple-light: rgb(var(--rgb-purple-light));
  --color-red: rgb(var(--rgb-red));
  --color-red-dark: rgb(var(--rgb-red-dark));
  --color-yellow: rgb(var(--rgb-yellow));
  --color-white: rgb(var(--rgb-white));
  --color-target: rgb(var(--rgb-target));

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

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

  --letter-spacing: -0.025em;
  --letter-spacing-loose: -0.0175em;
  --letter-spacing-tight: -0.03375em;
  --letter-spacing-x-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;
  --transition-slow: 0.2s ease;

}



@media(min-width: 64em) {

  :root {
    --font-size-medium: 125%;
    --font-size-large: 175%;
    --font-size-x-large: 200%;
    --font-size-xx-large: 300%;
  }

}