@import url('https://use.typekit.net/fmt5ems.css');

$colors: (
  'primary': #019fd9,
  'secondary': #5968e2,
  'success': #79DB79,
  'warning': #febe14,
  'danger': #ff5a5f,
  'typography': #484848,
  'black': #131314,
  'gray': #d9d9d9,
  'white': #fff,
);

// Small tablets and large smartphones (landscape view)
$screen-sm-max: 576px;

// Small tablets (portrait view)
$screen-md-max: 768px;

// Tablets and small desktops
$screen-lg-max: 992px;

// Large tablets and desktops
$screen-xl-max: 1200px;

$title-family: 'objektiv-mk1', sans-serif;
$font-family: 'proxima-nova', sans-serif;

$font-color: color('typography');
$font-color-inverted: color('white');

$font-size: 16px;
$font-line-height: 24px;

$font-size-small: $font-size - 2px;
$font-line-height-small: $font-line-height - 4px;

$heading-size-1: ceil($font-size * 2.71);
$heading-size-2: ceil($font-size * 2.14);
$heading-size-3: ceil($font-size * 1.71);
$heading-size-4: ceil($font-size * 1.42);
$heading-size-5: 16px;

$border-radius: 4px;
$border-default: 1px solid;

$padding: 12.5px;
$padding-lg: $padding * 2;
$padding-sm: $padding / 2;

/* 
    Push determines how far elements are pushed away 
    from eachother using margins.
*/
$push: 12.5px;
$push-lg: $push * 2;
$push-sm: $push / 2;
$push-icon: 5px;

$opacity-high: 0.75;
$opacity-md: 0.5;
$opacity-low: 0.25;

$shadow: rgba(0, 0, 0, 0.14902) 0px 2px 8px;
$shadow_lg: rgba(26, 26, 29, 0.298039) 0px 15px 46px -10px;

@function color($key: 'primary', $change: 0) {
  $color: map-get($colors, $key);

  @if $change>2 or $change < -2 {
    @error "Tint value set too high or too low: #{$change} >2<";
  }

  @if $change>0 {
    $value: 25% * $change;
    $color: lighten($color, $value);
  }

  @if $change < 0 {
    $value: -25% * $change;
    $color: darken($color, $value);
  }

  @return $color;
}

@mixin focus {
  box-shadow: color('primary') 0px 0px 0px 1px !important;
  border-color: color('gray') !important;
}