$_light: (
  // 1. text
  // 1.1 for headings
  text-accent: hsl(240, 31%, 25%),
  // 1.2 for base text
  text: hsl(0, 0%, 24%),
  // 1.3 for subtle text like metadata
  text-muted: hsl(204, 4%, 35%),
  // 2. bg
  // 2.1 for cards, headers, footers,
  bg-accent: hsl(339, 100%, 97%),
  // 2.2 for base bg
  bg: hsl(0, 0%, 100%),
  // 2.3 for hover state of cards
  bg-muted: rgb(255, 229, 239),
  // 3. links
  // 3.1 the default one.
  link: hsl(219, 100%, 20%),
  link-muted: hsl(344, 79%, 40%),
  // 4. for icons, borders
  fill: hsl(339, 100%, 36%),
  // 4.2 for borders, primarily
  fill-muted: hsl(0, 0%, 80%),
  // shadows on cards
  shadow: 0 0 1rem hsla(0, 0%, 0%, 0.2),
  // keyboard, focus hightlight
  highlight: hsl(176, 43%, 46%),
  // for gradient behind hero text on about page.
  gradient:
    (
      radial-gradient(
        at 23% 32%,
        hsla(344, 79%, 40%, 0.15) 0px,
        transparent 70%
      ),
      radial-gradient(at 72% 55%, hsla(344, 79%, 40%, 0.2) 0px, transparent 50%)
    )
);

$_dark: (
  text-accent: hsl(0, 0%, 100%),
  text: hsl(0, 0%, 96%),
  text-muted: hsl(0, 0%, 80%),
  bg-accent: hsl(221, 39%, 15%),
  bg: hsl(221, 39%, 11%),
  bg-muted: rgb(20, 28, 46),
  link: hsl(339, 95%, 80%),
  link-muted: hsl(344, 79%, 80%),
  fill: hsl(339, 75%, 64%),
  fill-muted: hsl(0, 0, 35%),
  shadow: hsla(0, 0%, 0%, 1),
  highlight: hsl(176, 43%, 46%),
  gradient: (
    radial-gradient(at 23% 32%, hsla(344, 79%, 40%, 0.04) 0px, transparent 70%),
    radial-gradient(at 72% 55%, hsla(344, 79%, 40%, 0.05) 0px, transparent 50%),
  ),
);

$themes: (
  light: $_light,
  dark: $_dark,
);