// Colors that we need as SCSS variables
// for mixins and other SCSS-related functions like rgba
$color-black: #222;
$color-black-pearl: #061629;
$color-east-bay: #545773;
$color-pattens-blue: #eaf1f8;
$color-valhalla: #2a2d3e;
$color-main: $color-valhalla;
$color-button: $color-east-bay;
$color-button-hover: $color-valhalla;

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

  // Brand colors
  --color-hover: var(--color-valhalla);
  --color-links: var(--color-science-blue);
  --color-main: #{$color-main};
  --color-main-rgb: #{hextorgb($color-main)};

  // 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-base: var(--color-black-pearl-rgb);
  --color-border-tag: rgba(var(--color-border-tag-base), .1);
  --color-border-tag-hover: rgba(var(--color-border-tag-base), .4);
  --color-border-category: var(--color-link-water);
  --color-border-forms: var(--color-gainsboro);
  --color-button: #{$color-button};
  --color-button-hover: #{$color-button-hover};
  --color-captions: var(--color-mid-grey);
  --color-code-block: var(--color-maroon-flush);
  --color-error: #e1b3b2;
  --color-outline-overlay-items: #ff848a;
  --color-paragraphs: var(--color-east-bay);
  --color-success: #8ed185;
  --color-headings: var(--color-main);
  --color-warning: #f4aa71;
}