:root {
  /* Named colors */

  --white: #ffffff;
  --black: #000000;

  --grey-100: #e8e8e8;
  --grey-200: #a3a3a3;
  --grey-300: #6a6a6a;
  --grey-400: #444444;
  --grey-500: #282828;

  --blue-100: #86b4e3;
  --blue-200: #5b9ad9;
  --blue-300: #3784d1;
  --blue-400: #296eb2;
  --blue-500: #225b94;

  --pink-100: #f9b4d1;
  --pink-200: #ef7daf;
  --pink-300: #e94e92;
  --pink-400: #e21f75;
  --pink-500: #be1861;

  --orange-100: #ffdfca;
  --orange-200: #ffb688;
  --orange-300: #ff934f;
  --orange-400: #ff7016;
  --orange-500: #e65900;

  /* Semantic use */

  --bg-color: var(--white);
  --text-color: var(--grey-400);

  --accent-100: var(--pink-100);
  --accent-200: var(--pink-200);
  --accent-300: var(--pink-300);
  --accent-400: var(--pink-400);
  --accent-500: var(--pink-500);

  --link-color: var(--blue-300);
  --link-color-inverted: var(--white);

  --code-inline-bg-color: var(--grey-100);
  --code-inline-text-color: var(--black);

  --code-output-bg-color: var(--grey-100);
  --code-output-text-color: var(--black);

  --border-color: var(--accent-300);

  --toc-mobile-bg-color: var(--white);
  --toc-link-color: var(--black);
  --toc-link-active-color: var(--accent-500);

  /* Other values */

  --content-width: 640px;

  --spacing-small: 16px;
  --spacing-standard: 24px;
  --spacing-big: 32px;
}