:root {
  --theme-color: #04ADEE;
  --primary-color: #B90000;
  --secondary-color: #FDD663;
  --tertiary-color: #04ADEE;
}

/**
 * We are hardcoding the background to white, since we are not sure
 * about the correct contrast between background and text in the dark
 * and white mode.
 *
 * TODO: @yuri: Please research other text editors and check if they have figured this out
 * And we need to go with the best solution in terms of being complaint with the dark mode
 * and also being legible.
 */
body {
  font-family: sans-serif;
  background: #fff;
}

.c-theme,
.hover\:c-theme:hover {
  color: #04ADEE;
}

.c-primary,
.hover\:c-primary:hover {
  color: #B90000;
}

.c-secondary,
.hover\:c-secondary:hover {
  color: #FDD663;
}

.c-tertiary,
.hover\:c-tertiary:hover {
  color: #04ADEE;
}

.c-footer {
  color: #FFFFFF;
}

.b-theme,
.hover\:bg-theme:hover {
  background-color: #04ADEE;
}

.b-primary,
.hover\:bg-primary:hover {
  background-color: #B90000;
}

.b-secondary,
.hover\:bg-secondary:hover {
  background-color: #FDD663;
}

.b-tertiary,
.hover\:bg-tertiary:hover {
  background-color: #04ADEE;
}

a {
  color: #04ADEE;
}