// Light Color
$bg-light: #ffffff
$bg-grey-light: #f5f5f5
$text-light: #000000
$blue-light: #007aff
$green-light: #34c759
$indigo-light: #5856d6
$orange-light: #ff9500
$red-light: #ff3b30
$hover-percent: 5%

// Dark Color
$bg-dark: #000000
$bg-grey-dark: #333333
$text-dark: #ffffff
$blue-dark: #0a84ff
$green-dark: #30d158
$indigo-dark: #5856d6
$orange-dark: #ff9f0a
$red-dark: #ff453a
$hover-percent-dark: 5%

// Other Colors
$dark: #333333

$variations: "blue", "green", "indigo", "orange", "red", "dark", "grey"

\:root, [data-theme="light"]
  --bg-color: #{$bg-light}
  --bg-grey: #{$bg-grey-light}
  --grey: #{$bg-grey-light}
  --text-color: #{$text-light}
  --blue: #{$blue-light}
  --blue-hover: #{darken($blue-light, $hover-percent)}
  --green: #{$green-light}
  --green-hover: #{darken($green-light, $hover-percent)}
  --indigo: #{$indigo-light}
  --indigo-hover: #{darken($indigo-light, $hover-percent)}
  --orange: #{$orange-light}
  --orange-hover: #{darken($orange-light, $hover-percent)}
  --red: #{$red-light}
  --red-hover: #{darken($red-light, $hover-percent)}
  --dark: #{$dark}
  --dark-hover: #{darken($dark, $hover-percent)}
  --lightness-hsl: 90%
  
  
[data-theme="dark"]
  --bg-color: #{$bg-dark}
  --bg-grey: #{$bg-grey-dark}
  --grey: #{$bg-grey-dark}
  --text-color: #{$text-dark}
  --blue: #{$blue-dark}
  --blue-hover: #{lighten($blue-dark, $hover-percent-dark)}
  --green: #{$green-dark}
  --green-hover: #{lighten($green-dark, $hover-percent-dark)}
  --indigo: #{$indigo-dark}
  --indigo-hover: #{lighten($indigo-dark, $hover-percent-dark)}
  --orange: #{$orange-dark}
  --orange-hover: #{lighten($orange-dark, $hover-percent-dark)}
  --red: #{$red-dark}
  --red-hover: #{lighten($red-dark, $hover-percent-dark)}
  --dark: #{$dark}
  --dark-hover: #{lighten($dark, $hover-percent-dark)}
  --lightness-hsl: 20%


// Grid System
$columns: 12

// Background colours
@each $variation in $variations
  .bg-#{$variation}
    background: var(--#{$variation}) !important