$xs-device-width: 480px
$sm-device-width: 768px
$md-device-width: 1150px

$colors: ('primary': #333, 'light': #999, 'dark': #000, 'medium': #555, 'error': #b94a48)
$link-colors: ('primary': #3366CC, 'focus': #DF5353, 'hover': #333)
$background-colors: ('primary': #fbfbfb, 'light': #fcfcfc)

$alert-colors: ('default': #c09853, 'success': #468847, 'error': #b94a48, 'info': #3a87ad, 'normal': #333)
$alert-background-colors: ('default': #fcf8e3, 'success': #dff0d8, 'error': #f2dede, 'info': #d9edf7, 'normal': #f0f0f0)
$alert-border-colors: ('default': #fbeed5, 'success': #d6e9c6, 'error': #eed3d7, 'info': #bce8f1, 'normal': #ddd)

$button-colors: ('default': #333, 'red': #fff, 'blue': #fff, 'disabled': #ccc)
$button-background-colors: ('default': #f5f5f5, 'red': #d14836, 'blue': #4d90fe, 'disabled': #f7f7f7)
$button-border-colors: ('default': #ddd, 'red': #b0281a, 'blue': #3079ed, 'disabled': #ccc)
$button-hover-colors: ('default': #000, 'red': #fff, 'blue': #fff)
$button-hover-background-colors: ('default': #fafafa, 'red': #c53727, 'blue': #357ae8)
$button-hover-border-colors: ('default': #bbb, 'red': #b0281a, 'blue': #3079ed)

$font-sizes: ('normal': 1.0em, 'tiny': 0.7em, 'small': 0.8em, 'compact': 0.9em, 'medium': 1.2em, 'large': 1.4em, 'xlarge': 1.6em, 'title': 1.5em)

$text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif
$board-task-limit-color: #DF5353

@function size($key)
  @return map-get($font-sizes, $key)

@function color($key: 'primary')
  @return map-get($colors, $key)

@function link-color($key: 'primary')
  @return map-get($link-colors, $key)

@function bg-color($key: 'primary')
  @return map-get($background-colors, $key)

@function alert-color($key)
  @return map-get($alert-colors, $key)

@function alert-bg-color($key)
  @return map-get($alert-background-colors, $key)

@function alert-border-color($key)
  @return map-get($alert-border-colors, $key)

@function button-color($key)
  @return map-get($button-colors, $key)

@function button-bg-color($key)
  @return map-get($button-background-colors, $key)

@function button-border-color($key)
  @return map-get($button-border-colors, $key)

@function button-hover-color($key)
  @return map-get($button-hover-colors, $key)

@function button-hover-bg-color($key)
  @return map-get($button-hover-background-colors, $key)

@function button-hover-border-color($key)
  @return map-get($button-hover-border-colors, $key)

=appearance
  -webkit-appearance: none
  -moz-appearance: none

=display-flex
  display: -webkit-flex
  display: flex

=flex-direction($direction)
  -webkit-flex-direction: $direction
  flex-direction: $direction

=flex-wrap
  -webkit-flex-wrap: wrap
  flex-wrap: wrap

=align-content($position)
  -webkit-align-items: $position
  align-items: $position
  -webkit-justify-content: $position
  justify-content: $position