$titleFontFamily: "Montserrat" !default;
$textFontFamily: "Raleway" !default;

$turqColor: #1abc9c !default;
$greenColor: #2ecc71 !default;
$blueColor: #3498db !default;
$purpleColor: #9b59b6 !default;
$blackColor: #34495e !default;
$yellowColor: #f1c40f !default;
$orangeColor: #e67e22 !default;
$redColor: #e74c3c !default;
$whiteColor: #ecf0f1 !default;
$grayColor: #95a5a6 !default;

// Colors
//
// The primary colors. <br/>
// <span class="note">Colors can all be appended with '--faded' to lower the opacity.</span>
//
// color(turq)      - #1abc9c; Turqoise
// color(green)      - #2ecc71; Weed Green
// color(blue)      - #3498db; Ballz Blue
// color(purple)      - #9b59b6; Really Purple
// color(black)      - #34495e; Midnight Black
// color(yellow)      - #f1c40f; Asian Yellow
// color(orange)      - #e67e22; Mandarin Orange
// color(red)      - #e74c3c; Bread Red
// color(white)      - #ecf0f1; Off White
// color(gray)      - #95a5a6; Very Gray
// color(blank)      - #ffffff; Actually white
// color(eee)      - #eee; Another shade of gray
//
// Styleguide Colors
$colors: (
    turq: $turqColor,
    green: $greenColor,
    blue: $blueColor,
    purple: $purpleColor,
    black: $blackColor,
    yellow: $yellowColor,
    orange: $orangeColor,
    red: $redColor,
    white: $whiteColor,
    gray: $grayColor,
    blank: white,
    eee: #eee
  );
  
  /**
   * Used to retrieve color from dictionary
   *  Example: color(turq) -> returns: #1abc9c
   */
  @function color($key) {
    @if map-has-key($colors, $key) {
      @return map-get($colors, $key);
    }
  
    @warn "Unknown `#{$key}` in $colors.";
    @return null;
  }

// Gradients
//
// Some cool gradients
//
// <div class="bg-grad-turq flex-center w256 h100">turq</div>
// <div class="bg-grad-green flex-center w256 h100">green</div>
// <div class="bg-grad-blue flex-center w256 h100">blue</div>
// <div class="bg-grad-purple flex-center w256 h100">purple</div>
// <div class="bg-grad-black flex-center w256 h100">black</div>
// <div class="bg-grad-yellow flex-center w256 h100">yellow</div>
// <div class="bg-grad-orange flex-center w256 h100">orange</div>
// <div class="bg-grad-red flex-center w256 h100">red</div>
// <div class="bg-grad-white flex-center w256 h100">white</div>
// <div class="bg-grad-gray flex-center w256 h100">gray</div>
// <div class="bg-grad-blank flex-center w256 h100">blank</div>
// <div class="bg-grad-eee flex-center w256 h100">eee</div>
//
// Styleguide Colors.agradients

// https://webgradients.com
  $gradients: (
    turq: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%),
    green: linear-gradient(-225deg, #DFFFCD 0%, #90F9C4 48%, #39F3BB 100%),
    blue: linear-gradient(-225deg, #3D4E81 0%, #5753C9 48%, #6E7FF3 100%),
    purple: linear-gradient(-225deg, #65379B 0%, #886AEA 53%, #6457C6 100%),
    black: linear-gradient(to top, #09203f 0%, #537895 100%),
    yellow: linear-gradient(120deg, #f6d365 0%, #fda085 100%),
    orange: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%),
    red: linear-gradient(to top, #ff0844 0%, #ffb199 100%),
    white: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%),
    gray: linear-gradient(to right, #868f96 0%, #596164 100%),
    blank: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%),
    eee: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%)
  );

  /**
   * Used to retrieve grad from dictionary
   *  Example: grad(turq) -> returns: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);
   */
   @function grad($key) {
    @if map-has-key($gradients, $key) {
      @return map-get($gradients, $key);
    }
  
    @warn "Unknown `#{$key}` in $gradients.";
    @return null;
  }