:root {
  --app-bg-color: var(--gray-9);
  --app-box-shadow: 0 0 8px 1px #00000078;
  --page-bg-color: var(--gray-10);
  --heading-color: var(--gray-25);

  /* --font-color-base: rgb(58, 63, 68); */
  --font-color-base: var(--gray-05);
  --font-color-muted: var(--gray-4);
  --link-color: var(--blue-2);
  --footer-link-hover-color: var(--rainbow-5);
  /* --time-color: var(--gray-25); */
  --time-color: var(--rainbow-4);

  --btn-color: var(--gray-2);
  --btn-border: 1px solid var(--gray-7);
  --btn-hover-border: 1px solid var(--gray-6);
  --btn-active-border: 1px solid var(--gray-5);
  --app-nav-dash-border-color: var(--app-nav-bar-bg-color);
  --app-mobile-nav-bg: var(--gray-11);

  --app-nav-bar-bg-color: var(--gray-9);
  --app-nav-color: var(--gray-4);
  --app-nav-active-color: #c2fcb6;
  --app-nav-active-dash-color: #8dda7e;

  --me-box-shadow: -10px 5px 15px #0d0e0f,10px -5px 15px #35393c;

  --scroll-bar-bg: var(--gray-9);
  --scroll-bar-thumb: var(--gray-7);

  --hero-bg-graphic: var(--brand-dark);
  --skills-category-btn-color: var(--gray-5);
  --skills-category-btn-active-color: var(--gray-2);
  --skills-category-btn-hover-color: var(--blue-3);
  --skills-category-btn-border-color: var(--gray-8);
  --skills-category-btn-active-border-color: var(--blue-3);
  --skills-category-btn-active-bg: var(--gray-9);

  --home-post-bg: var(--gray-9);

  --resume-box-shadow: 0 0 2px rgb(255 255 255),
    0 4px 12px -4px rgb(0 0 0 / 30%);   /* TODO */

  --posts-year-heading: rgb(141, 185, 83);
  --tag-bg: var(--gray-85);
  --tag-color: var(--gray-5);
  --tag-hover-color: var(--blue-1);
  --tag-border-color: var(--gray-7);
  --tag-hover-border-color: var(--blue-1);
  --tag-active-bg: var(--gray-9);
  --tag-active-border-color: var(--blue-1);
  --tag-active-color: var(--blue-1);

  --contact-input-bg: var(--gray-8);
  --contact-input-color: var(--gray-2);
  --contact-input-focus-bg: var(--gray-9);
  --contact-input-focus-border-color: var(--blue-4);
  --contact-button-color: var(--gray-2);
  --contact-button-bg: #464646;
  --contact-button-focus-bg: #424242;
  --contact-button-hover-bg: #444444;
  --contact-button-active-bg: #3d3d3d;
  --contact-button-active-box-shadow: 0 4px 12px -6px var(--rainbow-5);

  --blog-blockquote-color: var(--font-color-muted);
  --blog-blockquote-border-color: var(--green-4);
  --blog-toc-a-color: var(--gray-4);
  --blog-toc-a-active-color: var(--blue-1);

  --link-btn-bg: var(--gray-9);
  --link-btn-color: var(--gray-3);
  --link-btn-border-color: var(--gray-8);
  --link-btn-hover-border-color: var(--gray-65);
  --link-btn-active-border-color: #000;

  --code-font-color: #b3b9c5;
  --code-background-color: #131313;
  --code-border-color: var(--gray-85);
  --terminal-background-color: #111;
  --terminal-color: white;
  --terminal-bar: -webkit-linear-gradient(top, #282828, #222);
  --terminal-border: var(--border-color);
  --terminal-accent: var(--gray-6);
  --string: var(--rainbow-4);
  --variable: var(--rainbow-2);
  --property: #b3b9c5;
  --number: #fca369;
  --operator: #637187;
  --punctuation: #c7cdd7;
  --comment: #777c85;
  --function: #28e3e6;
  --keyword: var(--rainbow-2);
  --attribute: #fed06d;
  --class: var(--rainbow-1);
  --tag: var(--rainbow-3);
  --error: #b0292c;
  --code-link-hover: var(--link-hover-color);
  --highlight-code-color: rgb(116, 207, 136, 0.1);

  --todo-filter: invert(1);
}