$body-color = rgba(223, 231, 232, .5)
$background-color = #f3f3f3
$positive-color = #38AB46
$negative-color = #DC4E48

$off-white = #f5f5f5
$grey = #999
$yellow = #b92

$normal = #A9A57A
$fire = #E28544
$water = #6A97ED
$electric = #F0C944
$grass = #8FC052
$ice = #A2CFD0
$fighting = #B04137
$poison = #9253A0
$ground = #DCBE6F
$flying = #A09AEE
$psychic = #E0698B
$bug = #AEB22D
$rock = #B69D42
$ghost = #6A5F97
$dragon = #5C59F1
$dark = #685447
$steel = #B7BACF
$fairy = #F7B5F7

$types = ('normal' $normal) ('fire' $fire) ('water' $water) ('electric' $electric) ('grass' $grass) ('ice' $ice) ('fighting' $fighting) ('poison' $poison) ('ground' $ground) ('flying' $flying) ('psychic' $psychic) ('bug' $bug) ('rock' $rock) ('ghost' $ghost) ('dragon' $dragon) ('dark' $dark) ('steel' $steel) ('fairy' $fairy)

.bg-blue
  background-color lighten($ice, 50%)

.bg-faded-white
  background rgba(white, .5)

.bg-off-white
  background $off-white

.hover-bg-white
  &:hover
    background white

.bg-faded-blue
  background rgba(0, 20, 64, .5)

.red
  color $negative-color

.yellow
  color $yellow

.grey
  color $grey