:root {
  --distance-smaller: 0.1rem;
  --distance-small: 0.3rem;

  --layout-box-distance: 4rem;

  --font-family-main: monospace;
  --font-size-smaller: 0.6rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.5rem;
  --font-size-larger: 2rem;
  --font-size-huge: 3rem;
  --font-size-hugest: 6rem;

  --border-radius-smaller: var(--distance-smaller);
  --border-radius-small: var(--distance-small); /* Does this kinda think work? */

  /* use smaller, small, medium, large, larger - thats it. If it's not enough maybe all of them need adjustment, KISS */
  --spacing-smaller: var(--distance-smaller);
  --spacing-small: 0.3rem;
  --spacing-medium: 0.75rem;
  --spacing-large: 1.5rem;
  --spacing-larger: 3rem;
  --spacing-big: var(--spacing-large); /* DEPRECATED name, use --spacing-large instead */
  --spacing-bigger: var(--spacing-larger); /* DEPRECATED name, use --spacing-larger instead */

  --readable-max-width: 50rem;

  /* color-foreground-main, is what is says, the main text color, if the H1s should have a different color use e.g. highlight */
  --color-foreground-main: black;
  --color-foreground-2nd: #666;
  --color-background-main: white;
  --color-background-2nd: #f5f5f5;
  /* 2nd, 3rd suffix means it's a derivation of the original color, might be lighter or darker, depends on the color (theme) */
  --color-foreground-highlight: #bb6601;
  --color-foreground-highlight-2nd: #fea53b;
  --color-foreground-highlight-3rd: #fadcb0;
  --color-foreground-highlight-4th: #fadcb087;
  --color-foreground-highlight-code: rgba(187, 102, 1, 0.1);

  --color-background-inverse: black;
  --color-foreground-inverse: white;

  /* ... legacy */
  --color-highlight: #373738;
  --color-highlight-rgb: 164, 19, 29;
  --color-highlight-lighter: rgba(var(--color-highlight-rgb), 0.1);
  --color-secondary: #666;
  --color-overlay: rgb(252, 232, 191);
}