/*
COLORS
*/

/*
Themes
*/

:root, [data-selected-theme="grayscalelight"] {
  --color-background: #fff;
  --text-normal: #000;
  --text-invert: #fff;
  --text-subtle: #666;
  --color-primary: #999;
  --color-secondary: #aaa;
  --color-link: #00f;
  --color-paper: #fff;
  --background: #eee;
}

[data-selected-theme="light"] {
  --color-background: #aabf7e; //aabf7e
  --text-normal: #191b19; //191b19
  --text-invert: #fff;
  --text-subtle: #595959; //595959
  --color-primary: #344f1f; //344f1f
  --color-secondary: #60941a; //60941a
  --color-link: #309bae; //309bae
  --color-paper: #e8efd7; //e8efd7
}

[data-selected-theme="dark"] {
  --color-background: #191b19; //191b19
  --text-normal: #f8ffef; //f8ffef
  --text-invert: #fff;
  --text-subtle: #8c8c8c; //8c8c8c
  --color-primary: #60941a; //60941a
  --color-secondary: #344f1f; //344f1f
  --color-link: #05abc4; //05abc4
  --color-paper: #070e07; //070e07
}

[data-selected-theme="grayscaledark"] {
  --color-background: #fff;
  --text-normal: #000;
  --text-invert: #fff;
  --text-subtle: #666;
  --color-primary: #999;
  --color-secondary: #aaa;
  --color-link: #39a;
  --color-paper: #fff;
  --background: #eee;
}

/*
Themed elements
*/
body {
  background: var(--background);
}

a {
  color: var(--color-link);
}

h1 {
  color: var(--color-primary);
}
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-secondary);
}

hr {
  background-color: var(--text-normal);
  border: none;
}

.muted {
  color: var(--text-subtle); // Muted color
}

.site {
  color: var(--text-normal);
}