 /**
  * Variables
  * Contains re-usable variables like colors, sizes, breakpoints etc.
  * Normally, you don't have to change anything in essentials.css and general.css
  * because you'll define the basic-values here.
  *
  * @author     Flurin Dürst
  * @version    2.2.0
  * @since      WPSeed 0.1
  *
  */


/*==================================================================================
  SCALING
==================================================================================*/

$base_size:                   2vw;                // scales all `rem` based objects by adding this value as html font-size
$breakpoint:                  800px;              // breakpoint between @desktop and @mobile mixins
$scaling_endpoint:            1200px;             // scaling of all `rem` based objects stops here (100px = no scaling)
$base_size_mobile:            $base_size * 2.2;   // scaling multiplicator for mobile viewport

$header_height:               4rem;               // define the height of the header
$inner_width:                 90vw;               // default width of the inner objects --> nav, article and footer
$inner_maxwidth:              1200px;             // max-width of the inner objects (should be <= $scaling_endpoint)

$header_height_mobile:        4rem;               // define the height of the header
$inner_width_mobile:          90vw;               // default width of the inner objects --> nav, article and footer

/* to do:
/* add option to scale  by viewport-width (using html-font-size-rem, as it currently is)
/* or via fixed breakpoints (also using html-font-size-rem. = VSA)

/*==================================================================================
  COLORS
==================================================================================*/

/* Presets
/––––––––––––––––––––––––*/
$color__main:                 #92c947;
$color__sub:                  #bf9262;
$color__dark:                 #505050;
$color__bright:               #F7F7F7;
$color__grey:                 #F2F2F2;



/*==================================================================================
  DEFAULTS
==================================================================================*/
// these basic defaults are applied to the 'html', 'body', 'nav' or 'a' tags

/* HTML
/––––––––––––––––––––––––*/
$html__bgcolor:                $color__bright;
$html__textcolor:              $color__dark;
$html__fontname:              'Asap', sans-serif;
$light:                       300;
$regular:                     400;
$bold:                        700;
$black:                       900;

/* BODY
/––––––––––––––––––––––––*/
$body__fontsize:              1rem;
$body__fontsize_mobile:       1.3rem;
$body__fontweight:            400;
$body__lineheight:            1.3;

/* NAV
/––––––––––––––––––––––––*/
$nav__linkcolor:              $color__dark;
$nav__hovercolor:             $color__main;
$nav__activecolor:            $color__main;
$nav__spacercolor:            $color__dark;

/* ANCHORS
/––––––––––––––––––––––––*/
$a__linkcolor:                $color__dark;
$a__hovercolor:               $color__dark;
$a__textdecoration:           'none';



/*==================================================================================
  TRANSITIONS
==================================================================================*/

$transition_fast:            .3s;
$transition_slow:            .7s;



/*==================================================================================
  SHADOWS
==================================================================================*/

$shadow:                      0 2px 5px 0 rgba(0, 0, 0, 0.16),    0 2px 10px 0 rgba(0, 0, 0, .12);
$shadow__soft:                0 1px 2px 0 rgba(0, 0, 0, 0.08),    0 1px 5px 0 rgba(0, 0, 0, 0.06);
