// CSS variables
// Names: https://www.color-blindness.com/color-name-hue/
:root {
  // Brand color pool
  --color-black: #222;
  --color-black-pearl: #061629;
  --color-black-rock: #2b303c;
  --color-blue-chalk: #ece6f2;
  --color-east-bay: #545773;
  --color-gainsboro: #d9d9d9;
  --color-gallery: #f0f0f0;
  --color-link-water: #cdcfd4;
  --color-maroon-flush: #c7254e;
  --color-mid-grey: #5c5c6a;
  --color-mortar: #555;
  --color-pattens-blue: #eaf1f8;
  --color-pattens-blue-20: darken(#eaf1f8, 20%);
  --color-soft-peach: #f9f2f4;
  --color-science-blue: #0049d1;
  --color-valhalla: #2a2d3e;
  --color-very-light-grey: #ccc;
  --color-white: #fff;
  --color-white-smoke: #f5f5f5;

  // Element colors
  --color-hover: var(--color-valhalla);
  --color-headings: var(--color-main);
  --color-links: var(--color-science-blue);
  --color-main: var(--color-valhalla);
  --color-paragraphs: var(--color-east-bay);

  // Element colors
  --color-background-code-block: var(--color-black-rock);
  --color-background-code-inline: var(--color-soft-peach);
  --color-background-default: var(--color-gallery);
  --color-background-shade: #03061b;
  --color-background-tag: var(--color-pattens-blue);
  --color-blockquote: var(--color-links);
  --color-border-tag: rgba(6, 22, 41, .1);
  --color-border-tag-hover: rgba(6, 22, 41, .4);
  --color-border-category: var(--color-link-water);
  --color-captions: var(--color-mid-grey);
  --color-code-block: var(--color-maroon-flush);
  --color-error: #e1b3b2;
  --color-outline-overlay-items: #ff848a;
  --color-success: #8ed185;
  --color-warning: #f4aa71;
}