/**
Models for generating colors
- Tailwind: messes up the saturation, way too saturated brights.
- Linear lightness: steps between each lightness are an absolute number
- Relative lightness: steps between each lightness are ratio of each other
- White-overlay: steps between each shade are levels of white overlay opacity
**/
:root {
  --teal-1: hsl(158, 44%, 41%);
  --teal-2: hsl(158, 44%, 51%);
  --teal-3: hsl(158, 44%, 71%);

  --blue-1: hsl(205, 73%, 44%);
  --blue-2: hsl(205, 73%, 54%);
  --blue-3: hsl(205, 73%, 74%);

  --violet-1: hsl(259, 33%, 49%);
  --violet-2: hsl(259, 33%, 59%);
  --violet-3: hsl(259, 33%, 79%);

  --green-1: hsl(90, 35%, 45%);
  --green-2: hsl(90, 35%, 55%);
  --green-3: hsl(90, 35%, 75%); /* 88 for highlights? */

  --red-1: hsl(10, 41%, 50%);
  --red-2: hsl(10, 41%, 60%);
  --red-3: hsl(10, 41%, 80%);

  --gold-1: hsl(56, 55%, 55%);
  --gold-2: hsl(56, 55%, 65%);
  --gold-3: hsl(56, 55%, 85%);
}