// Variables for decoration
$brand-primary: #6cb4e4
$brand-success: #29b764
$brand-warning: #f1c40f
$brand-alert: #eb6f63

// Components for decoration
// Backgrounds
.bg-dark
  background-color: $dark
  border-color: darken($dark, 20%)

.bg-gray
  background-color: $gray
  border-color: darken($gray, 20%)

.bg-light
  background-color: $light
  border-color: darken($light, 20%)

.bg-primary
  background-color: $brand-primary
  border-color: darken($brand-primary, 20%)

.bg-success
  background-color: $brand-success
  border-color: darken($brand-success, 20%)

.bg-warning
  background-color: $brand-warning
  border-color: darken($brand-warning, 20%)

.bg-alert
  background-color: $brand-alert
  border-color: darken($brand-alert, 20%)

// Foregrounds
.fg-dark
  color: $dark

.fg-gray
  color: $gray

.fg-light
  color: $light

.fg-primary
  color: $brand-primary

.fg-success
  color: $brand-success

.fg-warning
  color: $brand-warning

.fg-alert
  color: $brand-alert

// Elements
hr
  border-bottom-color: $dark
  border-bottom-style: solid
  border-bottom-width: 1px
  border-top-width: 0
  margin-bottom: .5rem
  margin-top: .5rem

// Media Query Break Points
// Large Phones
@media only screen and (min-width: $sm)
// Tablets
@media only screen and (min-width: $md)
// Notebooks and Desktops
@media only screen and (min-width: $lg)