:root {

  --rgb-black: 35, 28, 51;
  --rgb-blurple: 85, 34, 250;
  --rgb-canary: 255, 245, 202;
  --rgb-canary-light: 255, 250, 229;
  --rgb-cobalt: 0, 116, 228;
  --rgb-coral: 249, 92, 92;
  --rgb-coral-dark: 236, 67, 67;
  --rgb-grey: 115, 108, 131;
  --rgb-green: 41, 152, 80;
  --rgb-green-light: 22, 186, 91;
  --rgb-lavender: 213, 210, 255;
  --rgb-lavender-light: 234, 232, 254;
  --rgb-mint: 179, 244, 224;
  --rgb-mint-light: 216, 249, 240;
  --rgb-orange: 248, 121, 23;
  --rgb-paper: 249, 247, 245;
  --rgb-peach: 255, 229, 218;
  --rgb-peach-light: 254, 242, 237;
  --rgb-pink: 207, 111, 182;
  --rgb-pink-light: 239, 218, 245;
  --rgb-purple: 119, 0, 162;
  --rgb-salmon: 236, 133, 128;
  --rgb-sky: 182, 219, 255;
  --rgb-sky-tint: 218, 237, 254;
  --rgb-sky-light: 238, 248, 255;
  --rgb-stone: 237, 234, 230;
  --rgb-stone-light: 247, 244, 240;
  --rgb-teal: 95, 221, 197;
  --rgb-white: 255, 255, 255;
  --rgb-yellow: 245, 214, 82;

  --color-black: rgb(var(--rgb-black));
  --color-blurple: rgb(var(--rgb-blurple));
  --color-canary: rgb(var(--rgb-canary));
  --color-canary-light: rgb(var(--rgb-canary-light));
  --color-cobalt: rgb(var(--rgb-cobalt));
  --color-coral: rgb(var(--rgb-coral));
  --color-coral-dark: rgb(var(--rgb-coral-dark));
  --color-green: rgb(var(--rgb-green));
  --color-green-light: rgb(var(--rgb-green-light));
  --color-grey: rgb(var(--rgb-grey));
  --color-lavender: rgb(var(--rgb-lavender));
  --color-lavender-light: rgb(var(--rgb-lavender-light));
  --color-mint: rgb(var(--rgb-mint));
  --color-mint-light: rgb(var(--rgb-mint-light));
  --color-orange: rgb(var(--rgb-orange));
  --color-paper: rgb(var(--rgb-paper));
  --color-peach: rgb(var(--rgb-peach));
  --color-peach-light: rgb(var(--rgb-peach-light));
  --color-pink: rgb(var(--rgb-pink));
  --color-pink-light: rgb(var(--rgb-pink-light));
  --color-purple: rgb(var(--rgb-purple));
  --color-salmon: rgb(var(--rgb-salmon));
  --color-sky: rgb(var(--rgb-sky));
  --color-sky-tint: rgb(var(--rgb-sky-tint));
  --color-sky-light: rgb(var(--rgb-sky-light));
  --color-stone: rgb(var(--rgb-stone));
  --color-stone-light: rgb(var(--rgb-stone-light));
  --color-teal: rgb(var(--rgb-teal));
  --color-white: rgb(var(--rgb-white));
  --color-yellow: rgb(var(--rgb-yellow));
  --color-hey-for-domains: rgb(var(--rgb-blurple));
  --color-hey-for-you: rgb(var(--rgb-teal));

  --font-size: clamp(1.25rem, 2.225vw, 2rem);
  --font-size-xxxx-small: 45%;
  --font-size-xxx-small: 55%;
  --font-size-xx-small: 65%;
  --font-size-x-small: 75%;
  --font-size-small: 85%;
  --font-size-medium: 100%;
  --font-size-large: 125%;
  --font-size-x-large: 150%;
  --font-size-xx-large: 200%;
  --font-size-xxx-large: 220%;

  --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;
  --space-xxxx-large: 6em;

  --transition: 0.15s cubic-bezier(0.37, 1, 0.74, 1);
  --transition-slow: 0.3s cubic-bezier(0.37, 1, 0.74, 1);

}

@media(min-width: 64em) {

  :root {
    --font-size: clamp(1.375rem, 2.225vw, 2rem);
    --font-size-xxx-large: 260%;
  }

}