:root {
  --background: #ffffff;
  --foreground: #000000;
  --foreground-alt: #ffffff;
  --colour-green: hsl(77, 60%, 75%);
  --colour-blue: hsl(205, 60%, 85%);
  --colour-red: hsl(334, 60%, 80%);
  --colour-green-alt: hsl(77, 55%, 60%);
  --colour-blue-alt: hsl(205, 51%, 57%);
  --colour-red-alt: hsl(334, 100%, 42%);
}

:root.dark {
  --background: #0d1c26;
  --foreground: #ffffff;
  --foreground-alt: #ffffff;
  --colour-blue: hsl(205, 50%, 20%);
  --colour-green: hsl(125, 45%, 46%);
  --colour-red: hsl(341, 89%, 58%);
  --colour-green-alt: hsl(77, 55%, 60%);
  --colour-blue-alt: hsl(205, 51%, 57%);
  --colour-red-alt: #d6005d;
}

:root.green {
  --background: #ffffff;
  --foreground: #000000;
  --foreground-alt: #ffffff;
  --colour-green: hsl(77, 60%, 75%);
  --colour-blue: hsl(77, 60%, 85%);
  --colour-red: hsl(334, 60%, 80%);
  --colour-green-alt: hsl(77, 55%, 60%);
  --colour-blue-alt: hsl(205, 51%, 57%);
  --colour-red-alt: hsl(334, 100%, 42%);
}

:root.pink {
  --background: #ffffff;
  --foreground: #000000;
  --foreground-alt: #ffffff;
  --colour-green: hsl(311, 100%, 75%);
  --colour-blue: hsl(322, 100%, 90%);
  --colour-red: hsl(352, 100%, 70%);
  --colour-green-alt: hsl(77, 55%, 60%);
  --colour-blue-alt: hsl(205, 51%, 57%);
  --colour-red-alt: hsl(334, 100%, 42%);
}