:root {
  --color-accent-grass: #ff3e39;
  --color-accent-mud: #9d868f;
  --color-accent-sky: #a35bc7; /* TODO: validate this color */
  --color-accent-sun: #fea800;
  --color-alt-bg: #4a0e27;
  --color-dark: #0b0e0f;
  --color-light: #ffffff;
  --color-main-bg: #3b0d20;
}

.color-accent-grass {
  color: var(--color-accent-grass);
}

.color-accent-mud {
  color: var(--color-accent-mud);
}

.color-accent-sky {
  color: var(--color-accent-sky);
}

.color-accent-sun {
  color: var(--color-accent-sun);
}

.color-alt-bg {
  color: var(--color-alt-bg);
}

.color-dark {
  color: var(--color-dark);
}

.color-light {
  color: var(--color-light);
}

.color-main-bg {
  color: var(--color-main-bg);
}

.bg-color-accent-grass {
  background-color: var(--color-accent-grass);
}

.bg-color-accent-mud {
  background-color: var(--color-accent-mud);
}

.bg-color-accent-sky {
  background-color: var(--color-accent-sky);
}

.bg-color-accent-sun {
  background-color: var(--color-accent-sun);
}

.bg-color-alt-bg {
  background-color: var(--color-alt-bg);
}

.bg-color-dark {
  background-color: var(--color-dark);
}

.bg-color-light {
  background-color: var(--color-light);
}

.bg-color-main-bg {
  background-color: var(--color-main-bg);
}

/* Using `.focus` for both hover and focus state since there
is no strong use case to use different class names. */
.focus\:color-accent-sun:hover,
.focus\:color-accent-sun:focus {
  color: var(--color-accent-sun);
}