:root {

  --rgb-dark: 13, 8, 38;
  --rgb-light: 248, 245, 242;
  --rgb-pink: 255, 138, 255;
  --rgb-magenta: 237, 76, 200;

  --color-dark: rgb(var(--rgb-dark));
  --color-light: rgb(var(--rgb-light));
  --color-pink: rgb(var(--rgb-pink));
  --color-magenta: rgb(var(--rgb-magenta));

  --font-family-sans: 'Clash Grotesk', sans-serif;
  --font-family-mono: 'Jet Brains Mono', monospace;
  --font-size: max(0.75rem, 1.1875vw);
  --font-size-medium: 135%;
  --font-size-large: 225%;

  --letter-spacing: normal;
  --letter-spacing-loose: 0.025em;

  --line-height: 1.5;
  --line-height-loose: 2.2;
  --line-height-tight: 1.2;

  --nav-height: calc(var(--font-size) * 4.3);

  --border-height: max(1px, 0.08em);
  --border-dark: var(--border-height) solid var(--color-dark);
  --border-light: var(--border-height) solid var(--color-light);

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

  --transition: 0.25s cubic-bezier(0.19, 1, 0.22, 1);
  --transition-slow: 0.75s cubic-bezier(0.19, 1, 0.22, 1);

}