// Spacing units

$base-unit: 10px;
$gutter: 40px;
$max-width: 1200px;

$base-font-size: 18px;

$bps: (
  s: 400px,
  m: 568px,
  l: 780px,
  xl: 1025px
);

@function bp($width) {
  @return map-get($bps, $width);
}

@function bps() {
  @return map-keys($bps);
}

$mobile-breakpoint:   bp(m);
$tablet-breakpoint:   bp(l);
$desktop-breakpoint:  bp(xl);

$border-radius: 4px;

// Fonts

$apercu-light:  "Apercu Light", Calibri, Helvetica Neue, Helvetica, sans-serif;
$apercu-medium: "Apercu Medium", Calibri, Helvetica Neue, Helvetica, sans-serif;

@mixin weight($weight) {
  @if $weight == 'light' {
    font-family: $apercu-light; 
    font-weight: 200;
  }
  @else if $weight == 'medium' {
    font-family: $apercu-medium; 
    font-weight: 600;
  }
  @else {
    @error "$weight needs to be light or medium";
  }
}

@mixin apercu($weight) {
  @include weight($weight);
  font-size-adjust: 0.508;
  font-style: normal;
}

@function grey($lightness) {
  @return hsl(0, 0%, $lightness);
}

// Colors
$green:             hsl(146,  44%, 52%);
$green-dark:        hsl(154, 100%,  9%);
$green-light:       hsl(147,  54%, 88%);

$grey-dark:         grey(20%);
$grey:              grey(40%);
$grey-mid:          grey(67%);
$grey-light:        grey(90%);
$grey-super-light:  grey(97%);

$pink:              #F43F77;

$red:               #dd4545;
$yellow:            #fffeb7;

$color-facebook:    #3B5998;
$color-twitter:     #00aced;

$transition-duration: 500ms;
$transition-easing: cubic-bezier(0.175, 0.885, 0.335, 1);