html.alternative {
  /* primary theme color. This will affect the entire websites color scheme: links, arrows, labels, ... */
  --primary-color: #af7fe4;
  --primary-dark-color: #9270e4;
  --primary-light-color: #7aabd6;
  --primary-lighter-color: #cae1f1;
  --primary-lightest-color: #e9f1f8;

  /* page base colors */
  --page-background-color: white;
  --page-foreground-color: #2c3e50;
  --page-secondary-foreground-color: #67727e;

  --border-radius-large: 22px;
  --border-radius-small: 9px;
  --border-radius-medium: 14px;
  --spacing-small: 8px;
  --spacing-medium: 14px;
  --spacing-large: 19px;

  --top-height: 125px;

  --side-nav-background: #324067;
  --side-nav-foreground: #f1fdff;
  --header-foreground: var(--side-nav-foreground);
  --searchbar-background: var(--side-nav-foreground);
  --searchbar-border-radius: var(--border-radius-medium);
  --header-background: var(--side-nav-background);
  --header-foreground: var(--side-nav-foreground);

  --toc-background: rgb(243, 240, 252);
  --toc-foreground: var(--page-foreground-color);
}

html.alternative.dark-mode {
  color-scheme: dark;

  --primary-color: #af7fe4;
  --primary-dark-color: #9270e4;
  --primary-light-color: #4779ac;
  --primary-lighter-color: #191e21;
  --primary-lightest-color: #191a1c;

  --page-background-color: #1c1d1f;
  --page-foreground-color: #d2dbde;
  --page-secondary-foreground-color: #859399;
  --separator-color: #3a3246;
  --side-nav-background: #171d32;
  --side-nav-foreground: #f1fdff;
  --toc-background: #20142c;
  --searchbar-background: var(--page-background-color);
}