: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('light')};
  --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-white: #{get-color('light')};
}

@include dark-mode() {
  --color-bg: #{get-color('dark')};
  --color-bg-glare: #{get-color('slate')};
  --color-text: #{get-color('light')};
  --color-selection-text: #{get-color('dark')};
  --color-selection-bg: #{get-color('light')};
  --color-stroke: #{get-color('slate')};
  --color-theme-primary: #{lighten(get-color('primary'), 50%)};
  --color-theme-primary-glare: #{lighten(get-color('primary-glare'), 50%)};
  --color-action-bg: var(--color-theme-primary-glare);
  --color-action-text: #{get-color('dark')};
  --color-theme-highlight: #{get-color('highlight')};
  --color-theme-highlight-block: #{get-color('slate')};
  --color-theme-feature-text: #{get-color('highlight')};
}

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

main {
  overflow: hidden;
}

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