/* ==========================================================================
   Variables
   ========================================================================== */

/*
   Typography
   ========================================================================== */

$doc-font-size      : 16;
$doc-line-height    : 26;
$paragraph-indent   : false !default;
$indent-var         : 0rem + ($doc-line-height / $doc-font-size);

$serif              : "PT Serif", serif;
$sans-serif         : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
$sans-serif-narrow  : "PT Sans Narrow", sans-serif;
$monospace          : Monaco, Consolas, "Lucida Console", monospace;


/*
   Colors
   ========================================================================== */

$gray               : #4c4c4c;
$dark-gray          : #191413;
$light-gray         : #e2e2e2;
$lighter-gray       : #f9f9f9;

$body-color         : #fff;
$background-color   : #fff;
$text-color         : #333332;
$border-color       : $light-gray;
$base-color         : #343434;
$comp-color         : spin($base-color, 180);
$accent-color       : #000;

/* buttons */
$primary-color      : #000;
$success-color      : #5cb85c;
$warning-color      : #dd8338;
$danger-color       : #C64537;
$info-color         : #308cbc;

/* brands */
$facebook-color     : #3b5998;
$flickr-color       : #ff0084;
$foursquare-color   : #0cbadf;
$google-plus-color  : #dd4b39;
$instagram-color    : #4e433c;
$linkedin-color     : #4875b4;
$pinterest-color    : #cb2027;
$rss-color          : #fa9b39;
$tumblr-color       : #2c4762;
$twitter-color      : #55acee;
$vimeo-color        : #1ab7ea;
$youtube-color      : #ff3333;

/* links */
$link-color         : #343434;
$link-color-hover   : darken($link-color, 10);
$link-color-visited : lighten($link-color-hover, 20);
$link-color-focus   : darken($link-color-visited, 10);

$border-radius      : 4px;


/*
   Breakpoints
   ========================================================================== */

@include breakpoint-set("to ems", true);

$small                        : 600px;
$medium                       : 768px;
$medium-wide                  : 900px;
$large                        : 1024px;
$x-large                      : 1440px;


/*
   Grid
   ========================================================================== */

$right-sidebar-width          : 300px;

$susy: (
  columns: 12,
  // column-width: 90px,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: after,
  container: $large,
  global-box-sizing: border-box,
  debug: (
    image: show,
    color: blue,
    output: overlay,
    toggle: top right,
  ),
);