:root {
  // Pull the tokens and generate custom props
  @each $color in $stalfos-colors {
    #{'--color-' + nth($color, 1)}: #{nth($color, 2)};
  }

  // Set theme aliases
  --color-mode: 'light';
  --color-bg: #{get-color('light')};
  --color-bg-glare: #{get-color('light')};
  --color-text: #{get-color('dark')};
  --color-text-glare: #{get-color('dark')};
  --color-selection-text: #{get-color('light')};
  --color-selection-bg: #{get-color('dark')};
  --color-stroke: #{get-color('mid')};
  --color-action-bg: #{get-color('primary')};
  --color-action-text: #{get-color('dark')};
  --color-theme-primary: #{get-color('primary')};
  --color-theme-primary-glare: #{get-color('primary-glare')};
  --color-theme-highlight: #{get-color('highlight')};
  --color-theme-highlight-block: #{get-color('highlight')};
  --color-theme-secondary: #{get-color('secondary')};
  --color-light-gray: #{get-color('light-gray')};
  --color-light-blue: #{get-color('light-blue')};
  --color-white: #{get-color('light')};
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

main {
  overflow: hidden;
}

::selection {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

a:not([class]),
a:not([class]):visited {
  color: var(--color-dark);
  font-weight: 600;

  &:hover {
    text-decoration: none;
  }
}

.return-link {
  align-self: flex-end;
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 2rem;
  color: var(--color-dark);

  &:visited {
    color: inherit;
  }
}

.justify-end {
  justify-content: flex-end;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}