:root {
  --font-body: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --link-hue: 232;
  --visited-hue: 287;

  /**** SimpleLink */
  --link-a-text: hsl(var(--link-hue), 74%, 44%);
  --link-a-visited: hsl(var(--visited-hue) 50%, 44%);

  /**** Podcast btn */
  --podcast-btn-bg: hsl(263, 60%, 40%);
  /**** VideoLink */
  --video-link-bg: hsl(4deg 65% 41%);
  /**** Donate btn */
  --donate-btn: hsl(0, 48%, 39%);

  /**** Layout */
  --page-max-width: 840px;
  --list-item-thumb-width: 280px;
  --body-font-size: 1.125rem;
  --body-line-height: 1.75rem;
  --font-size-mobile: 1.125rem;
  --line-height-mobile: 1.75rem;
  --body-bg: #fff;
  --body-text-color: var(--gray-800);
  --util-page-header-color: var(--gray-500);
  /**** TopBar */
  --topbar-mobile-bg: var(--gray-50);
  --topbar-mobile-border: var(--gray-300);

  /**** Buttons */
  --btn-bg: var(--gray-150);
  --btn-text: var(--gray-700);
  --btn-bg-active: var(--gray-270);
  --btn-bg-disabled: var(--gray-300);
  /**** DropdownButton */
  --dropdown-list-bg: var(--drawer-bg);
  /**** TagItem */
  --tag-item-bg: var(--primary-btn-bg);
  --tag-item-bg-active: var(--primary-btn-bg-active);

  /**** Sidebar */
  --drawer-bg: var(--gray-50);
  --drawer-border-color: var(--gray-200);
  --backdrop-bg: rgba(0, 0, 0, 0.85);

  /**** SwitchAppearance */
  --switch-appearance-border-color: #c2c2c4;
  --switch-appearance-bg-color: rgba(142, 150, 170, 0.14);
  --switch-appearance-border-color-hover: #3451b2;
  --switch-appearance-check-bg: #ffffff;
  --switch-appearance-icon-color: rgba(60, 60, 67, 0.78);

  /**** Styles of default vitepress template. It is used in search button */
  --vp-c-divider: var(--gray-300);
  --vp-c-bg-soft: var(--gray-100);
  --vp-c-brand-1: var(--primary-btn-bg);
  --vp-c-bg: var(--gray-50);
  --vp-c-text-2: var(--gray-500);
  /**** Search modal */
  --vp-c-bg: var(--gray-50);
  /**** Used in pagefind */
  --vp-c-divider: var(--gray-300);
}

.dark {
  /* --primary-btn-bg: hsl(var(--primary-hue), 80%, 40%); */

  /**** SimpleLink */
  --link-a-text: hsl(var(--link-hue), 100%, 76%);
  --link-a-visited: hsl(var(--visited-hue) 50% 59%);

  /**** Layout */
  --body-bg: var(--gray-900);
  --body-text-color: var(--gray-200);
  --util-page-header-color: var(--gray-400);
  /**** TopBar */
  --topbar-mobile-bg: var(--gray-950);
  --topbar-mobile-border: #000;

  /**** Buttons */
  --btn-bg: var(--gray-790);
  --btn-text: var(--gray-300);
  --btn-bg-active: var(--gray-770);
  --btn-bg-disabled: var(--gray-600);
  /**** DropdownButton */
  --dropdown-list-bg: var(--drawer-bg);
  /**** TagItem */
  --tag-item-bg: var(--primary-btn-bg);
  --tag-item-bg-active: var(--primary-btn-bg-active);

  /**** Sidebar */
  --drawer-border-color: #000;
  --drawer-bg: var(--gray-800);

  /**** SwitchAppearance */
  --switch-appearance-icon-color: rgba(255, 255, 245, 0.86);
  --switch-appearance-border-color: #3c3f44;
  --switch-appearance-bg-color: rgba(101, 117, 133, 0.16);
  --switch-appearance-border-color-hover: #a8b1ff;
  --switch-appearance-check-bg: #000000;

  /**** Styles of default vitepress template. It is used in search button */
  --vp-c-divider: var(--gray-700);
  --vp-c-bg-soft: var(--gray-800);
  --vp-c-brand-1: var(--primary-btn-bg);
  --vp-c-bg: var(--gray-850);
  --vp-c-text-2: var(--gray-400);

  --search-modal-content-bg: var(--gray-950);
  /**** Search modal */
  --vp-c-bg: var(--gray-850);
  /**** Used in pagefind */
  --vp-c-divider: var(--gray-800);
  /**** Search input button */
  --search-input-btn-border-color: var(--gray-700);
}