// Color swatches grid
=calc-color($name, $color)
  .palette-#{$name}
    background-color: $color

  .palette-#{$name}-dark
    background-color: scale-color($color, $lightness: -15%)

.palette
  color: $inverse
  margin: 0
  padding: 15px
  text-transform: uppercase

  dt
    display: block
    font-weight: 500
    opacity: .8

  dd
    font-weight: 200
    margin-left: 0
    opacity: .8

// Colors
+calc-color(firm, $firm)
+calc-color(success, $success)
+calc-color(info, $info)
+calc-color(warning, $warning)
+calc-color(danger, $danger)
+calc-color(night, #34495e)
+calc-color(bright, #f1c40f)

.palette-success-dark
  background-color: #27ae60

.palette-info-dark
  background-color: #2980b9

.palette-bright-dark
  background-color: #f39c12

.palette-amethyst
  background-color: #9b59b6

.palette-wisteria
  background-color: #8e44ad

.palette-carrot
  background-color: #e67e22

.palette-pumpkin
  background-color: #d35400

.palette-alizarin
  background-color: #e74c3c

.palette-pomegranate
  background-color: #c0392b

.palette-clouds
  background-color: #ecf0f1
  color: #bdc3c7

.palette-silver
  background-color: #bdc3c7

.palette-concrete
  background-color: #95a5a6

.palette-asbestos
  background-color: #7f8c8d

// Palette paragraph
.palette-paragraph
  color: #7f8c8d
  font-size: 12px
  line-height: 17px

  span
    color: #bdc3c7

// Headline
.palette-headline
  color: #7f8c8d
  font-weight: 700
  margin-top: -5px