:root {
  /* Background in light mode, text in dark mode */
  --light: hsl(198, 100%, 95%);
  --light-shade: hsl(198, 100%, 93%);

  /* Background in dark mode, text in light mode */
  --dark: hsl(198, 100%, 5%);
  --dark-shade: hsl(198, 100%, 7%);

  /* Primary colour used for logo, buttons, etc */
  --primary: hsl(198, 100%, 50%);

  /* Primary alternative used for pressed buttons */
  --primary-alt: hsl(205, 100%, 40%);

  /* Primary colour suitable for text in light and dark mode */
  --primary-text: hsl(205, 79%, 48%);

  /* Button shadows */
  --shadow-default: 2px 2px 4px hsla(0, 0%, 20%, 0.4);
  --shadow-hover: 2px 2px 4px hsla(0, 0%, 20%, 0.5);

  /* Various grays */
  --gray: hsl(0, 0%, 50%);
  --gray-light: hsl(0, 0%, 75%);
  --gray-dark: hsl(0, 0%, 25%);
  --gray-transparent: hsla(0, 0%, 50%, 0.25);

  /* Secondary colour just for help and abbreviations */
  --secondary: hsl(158, 100%, 35%);

  /* Frequency heatmap  */
  --freq0: hsla(198, 90%, 50%, 0.1);
  --freq1: hsla(200, 90%, 50%, 0.2);
  --freq2: hsla(202, 90%, 50%, 0.3);
  --freq3: hsla(204, 90%, 50%, 0.4);
  --freq4: hsla(206, 90%, 50%, 0.5);
  --freq5: hsla(208, 90%, 50%, 0.6);
  --freq6: hsla(210, 90%, 50%, 0.7);
  --freq7: hsla(212, 90%, 50%, 0.8);
  --freq8: hsla(214, 90%, 50%, 0.9);
  --freq9: hsla(216, 90%, 50%, 1);
  --freq10: hsla(218, 90%, 50%, 1);
}