/*------------------------------------*\
    VARS.SCSS
\*------------------------------------*/
/**
 * Any variables you find set in inuit.css’ `_vars.scss` that you do not wish to
 * keep, simply redefine here. This means that if inuit.css, for example, sets
 * your `$base-font-size` at 16px and you wish it to be 14px, simply redeclare
 * that variable in this file. inuit.css ignores its own variables in favour of
 * using your own, so you can completely modify how inuit.css works without ever
 * having to alter the framework itself.
 */

/*------------------------------------*\
    $OBJECTS-AND-ABSTRACTIONS
\*------------------------------------*/
/**
 * All of inuit.css’ objects and abstractions are initially turned off by
 * default. This means that you start any project with as little as possible,
 * and introducing objects and abstractions is as simple as switching the
 * following variables to `true`.
 */
$global-border-box: true;

$use-block-list: true;
$use-beautons: true;
$use-rem: true;
$use-matrix: true;
$use-grids: true;
$use-options: true;
$use-stats: true;
$use-arrows: true;
$use-lozenges: true;

$use-greybox: true;
$use-island: true;
$use-flexbox: true;
$use-debug: true;
$use-media: true;
$use-split: true;

$responsive: true;
$lap-start: 900px;
$desk-start: 1024px;
$desk-wide-start: 1366px;

$base-font-size: 16px;
$base-font-family: "Cabin", Arial, Helvetica, sans-serif;
$heading-font-family: "Source Sans Pro", Georgia, serif;
$alt-font-family: "Herr Von Muellerhoff", Palatino, serif;

$brand-round: 0;

/*-----------------------------------------------*\
     $STYLE GUIDE
\*-----------------------------------------------*/
/*
 * Colors
 */

$accent: #c59d5f;

$lightest: #b3b3b3;
$light: #919191;

$gray: #515150;
$dark: #262526;

$borders: #d8d8d8;

/* Font sizes */

$h1-size: 47px;
// .alpha
$h2-size: 32px;
// .beta
$h3-size: 24px;
// .gamma
$h4-size: 19px;
// .delta
$h5-size: 15px;
// .epsilon
$h6-size: 12px;
// .zeta

/*
 * Spacing Units
 */

$_u: 24px;
// 24px

$_u4: $_u / 4;
// 6px
$_u2: $_u / 2;
// 12px
$_u15: $_u / 1.5;
// 16px
$_15u: 1.5 * $_u;
// 36px
$_175u: 1.75 * $_u;
// 42px
$_2u: 2 * $_u;
// 48px
$_25u: 2.5 * $_u;
// 60px
$_3u: 3 * $_u;
// 72px
$_35u: 3.5 * $_u;
// 82px
$_4u: 4 * $_u;
// 96px
$_5u: 5 * $_u;
// 120px
$_6u: 6 * $_u;
// 144px
$_7u: 7 * $_u;
// 168px
$_8u: 8 * $_u;
// 192px

$content-width: 1500px;
$sidebar-width: 300px+$_u+1;

