// Asset Pipeline
// --------------

// This is the path where Neue's assets can be found. Be
// sure to include the trailing slash!
// ex: $neue-path: "bower_components/neue/assets/"
$neue-path: "assets/" !default;

// The $asset-path variable can be used by your client-app
// to simplify including asset URLs.
$asset-path: "" !default;

// Layout
// ------

$max-width: 1440px;

$small: "(max-width: 759px)";
$medium: "(min-width: 760px)";
$large: "(min-width: 960px)";
$larger: "(min-width: 1060px)";

$mobile: $small;
$tablet: $medium;
$desktop: $larger;

$susy: (
  container: 1440px,
  columns: 16,
  gutters: (24/64.5),
  column-width: 64.5px,
  gutter-position: inside-static,
  global-box-sizing: border-box,
);

// Colors
// ------

// Primary
$blue: #23b7fb;
$purple: #4e2b63;
$yellow: #fcd116;

// Grayscale
$black: #000;
$off-black: #222;
$dark-gray: #444;
$med-gray: #999;
$light-gray: #ddd;
$white: #fff;

$base-background-color: $light-gray;
$base-font-color: $dark-gray;
$error-color: #ff4747;

// Modifiers
$tint: 10%;
$color-tint: 10%;

// Typography
// ----------

// Font Stacks
$font-proxima-nova: "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$font-handwritten: "CoveredGrace", cursive;

$base-font-family: $font-proxima-nova;
$accent-font-family: $font-handwritten;

// Weights
$weight-normal: 400;
$weight-sbold: 600;
$weight-bold: 700;

// Typography
$font-hero: 54px;
$font-larger: 36px;
$font-large: 32px;
$font-medium: 24px;
$font-regular: 18px; // base font size
$font-small: 16px;
$font-smaller: 13px;

$base-font-size: $font-regular;
$unitless-line-height: 1.5;
$header-line-height: 1.2;
$base-line-height: $base-font-size * $unitless-line-height;

// Measurements
$base-spacing: 24px;
$section-spacing: 48px;

// Decoration
$sm-border-radius: 2px; // for accent (images, text fields, etc)
$lg-border-radius: 4px; // used for primary interactive elements (buttons, etc)
$box-shadow: 0 2px 12px rgba(#000, 0.3);
$text-shadow: 0 1px 3px rgba(#000, 0.3);
$text-emboss: 0 1px 0 rgba(#fff, 0.2);