// Typography
$base-font-family: $font-stack-system;
//$base-font-family: "Helvetica Neue", Arial, sans-serif;
$heading-font-family: $base-font-family;

// Line height
$base-line-height: 1.5;
$heading-line-height: 1.2;

// Other Sizes
$base-border-radius: 3px;
$base-spacing: 1.5em;
$small-spacing: $base-spacing / 2;
$base-z-index: 0;

/*
	Colors

 */
$blue: #1565c0;
$dark-gray: #333;
$medium-gray: #999;
$light-gray: #ddd;

// Flat UI Colors
$flat-red: #e74c3c; $flat-red-dark: #c0392b;
$dark-gray: #252525; $flat-gray-dark: #7f8c8d;
$flat-gray: #bdc3c7; $flat-gray-light: #ecf0f1;
$flat-green: #2ecc71; $flat-green-dark: #355E3B;
$flat-blue: #3498db; $flat-blue-dark: #2980b9;
$flat-purple: #6F5092; $flat-purple-dark: #8e44ad;
$flat-yellow: #f1c40f; $flat-yellow-dark: #f39c12;
$flat-orange: #e67e22; $flat-orange-dark: #d35400;

// Font Colors
$base-font-color: $dark-gray;
$action-color: $blue;

// Border
$base-border-color: $light-gray;
$base-border: 1px solid $base-border-color;

// Background Colors
$base-background-color: #fff;
$secondary-background-color: tint($base-border-color, 75%);

// Focus
$focus-outline-color: transparentize($action-color, 0.4);
$focus-outline-width: 3px;
$focus-outline: $focus-outline-width solid $focus-outline-color;
$focus-outline-offset: 2px;

// Animations
$base-duration: 150ms;
$base-timing: ease;