//////////////////////////////////////////
// GLOBAL VARIABLES
//////////////////////////////////////////

$em-base: 16;
$line-height: 1.8;
$vertical-spacing: rem(100);

//////////////////////////////////////////
// PLUGINS
//////////////////////////////////////////

$font-awesome: true;
$magnific-popup: true;

//////////////////////////////////////////
// COLOR CONFIG
//////////////////////////////////////////

// FLARE COLORS -- LEAVE THESE ALONE
$flare-notice: #27ae60;
$flare-error: #D91E18;
$flare-warning: #f1c40f;

// YOUR COLORS HERE
$white: #fff;
$black: #222;
$text-grey: #555;
$lt-grey: #eee;

// LINK COLORS
$link-color: blue;
$link-hover-color: #06e;

// GLOBAL SELECTION
$selection-background: #99CCFF;
$selection-color: $white;

//////////////////////////////////////////
// GLOBAL TYPOGRAPHY CONFIG
//////////////////////////////////////////

// FONTS
$headline-font: 'Open Sans', Arial, Helvetica, sans-serif;
$body-font: 'Open Sans', Arial, Helvetica, sans-serif;

// GENERAL 
$headline-margin: 0 0 1.25rem;
$headline-letter-spacing: -0.03em;
$headline-line-height: 1.2;
$headline-font-weight: 600;
$headline-transform: none;

// HEADLINE FONT SIZES
// h1 ///////////////////////////////////
$h1-min: 38;
$h1-max: 60;
$h1-color: inherit;

// h2 ///////////////////////////////////
$h2-min: 30;
$h2-max: 38;
$h2-color: inherit;

// h3 ///////////////////////////////////
$h3-min: 26;
$h3-max: 32;
$h3-color: inherit;

// h4 ///////////////////////////////////
$h4-min: 22;
$h4-max: 28;
$h4-color: inherit;

// h5 ///////////////////////////////////
$h5-min: 20;
$h5-max: 24;
$h5-color: inherit;

// h6 ///////////////////////////////////
$h6-min: 16;
$h6-max: 20;
$h6-color: inherit;

// VARIABLE CONSOLODATION //////////////
// NO TOUCHIE -------------
// 
$h1-font-size: mm($h1-min, $h1-max);
$h2-font-size: mm($h2-min, $h2-max);
$h3-font-size: mm($h3-min, $h3-max);
$h4-font-size: mm($h4-min, $h4-max);
$h5-font-size: mm($h5-min, $h5-max);
$h6-font-size: mm($h6-min, $h6-max);
// 
/////////////////////////////////////////
// LEAD
$lead-font-size: mm(18, 20);
$lead-color: darken($text-grey, 5%);

//////////////////////////////////////////
// GRID CONFIG
//////////////////////////////////////////

$grid-columns: 12; 		// WE USE A 12 COLUMN GRID
$grid-width: 1440;
$grid-extend: 2000;
$grid-gutter: percentage(16/$grid-width);

//////////////////////////////////////////

$module-spacing: 1.8rem;
$module-fold: tp;
$nest-fold: ml; 		// $NEST-FOLD SHOULD BE AT LEAST ONE BREAK LOWER THAN MODULE-FOLD USUALLY (ML)
// 
$text-background-color: #f7f7f7;

//////////////////////////////////////////
// FORMS CONFIG
//////////////////////////////////////////

//STRUCTURE
$form-spacing: 0;
$fieldset-spacing: 1.25rem;

// INPUT
$input-font-size: $em-base;
$input-border-radius: 0;
$input-font-family: $body-font;
$input-color: #777;
$input-background-color: #fff;
$input-padding: 0.75rem;
$select-padding: 0.755rem 0.75rem;
$input-border: true;
$input-border-width: 1px;
$input-border-color: #ccc;

// INPUT FOCUS
$input-focus-color: #777;
$input-focus-background-color: #fff;
$input-box-shadow: true;
$input-box-shadow-value: 0 0 3px rgba(0,0,0,.2);

// TEXTAREA
$textarea-height: 15rem;

// GLOBAL PLACEHOLDER
$placeholder-color: #777;
$placeholder-opacity: 1;

//////////////////////////////////////////
// TABLE CONFIG
//////////////////////////////////////////

$table-fold: ml; // BREAKPOINT IN WHICH THE TABLE MOBES TO STACKED
$table-row-highlight: #eee;

//////////////////////////////////////////
// BUTTON CONFIG
//////////////////////////////////////////

// GENERAL
$button-color: #444;
$button-background-color: #ccc;
$button-border-radius: 0;
$button-padding: rem(12) rem(16);
$button-font-weight: 400;

// HOVER
$button-hover-color: #222;
$button-hover-background-color: #ddd;

// BORDERS
$button-borders: false;
$button-border-color: #999;
$button-hover-border-color: #999;

// TEXT SHADOW
$button-text-shadow: false;
$bts-value: 0 1px rgba(255, 255, 255, .75);

// REVERSE BUTTON
$reverse-button-color: #444;
$reverse-button-border-color: #ccc;
$reverse-button-border-width: 2px;
$reverse-button-padding: rem(10) rem(14);
$reverse-button-font-weight: 400;

//////////////////////////////////////////
// MEGALODON CONFIG
//////////////////////////////////////////

// BASE NAV
$nav-width: 100%;
$nav-color: #ddd;
$navigation-count: 6;
$nav-height: rem(50);

// TOP LEVEL NAV
$nav-link-color: $text-grey;
$nav-link-hover-color: $text-grey;
$nav-hover-background: darken($nav-color, 5%);
$nav-link-borders: true;
$nav-link-border-width: 0 1px;
$nav-border-left-color: lighten($nav-color, 15%);
$nav-border-right-color: darken($nav-color, 10%);

// MENU
$menu-width: rem(450);
$menu-color: #fff;
$menu-padding: 1.5rem;
$menu-columns: true;
$menu-column-number: 2;
$menu-font-size: 14;
$menu-box-shadow: true;
$menu-box-shadow-value: 0 3px 5px rgba(#000, .6);

// MENU LINKS
$menu-link-color: #555;
$menu-link-hover-color: #333;
$menu-line-height: 1.8;
$menu-link-spacing: 0.25rem;

// MENU SUB-LINKS
$menu-sub-indent: 0.75rem;
$menu-sub-font-size: 13;

// //////////////////////////////////////////
// // SLIDE MENU CONFIG
// //////////////////////////////////////////

$slide-menu: true;
// GENERAL
$slide-menu-color: $white;
$slide-menu-background-color: $black;
$slide-menu-width: 100%;
$land-menu-width: 70%;
$tab-menu-width: 70%;

// //////////////////////////////////////////
// // SOCIAL CONFIG
// //////////////////////////////////////////

$social-link-width: rem(40);
$social-link-height: rem(40);
$social-link-border-radius: 0.25rem;

// ========================================*/
// 🌮 TAC0 MODULE CONFIG
// ========================================*/

//////////////////////////////////////////
// GLOBAL CONFIG
//////////////////////////////////////////

$mc-base: 09;

// -- SPECIALTY CONTENT PAGE INTROS -- DEPRACATING
$content1-module-width:			$mc-base;
$content2-module-width:			$mc-base;

// -- TAC0 MODULE SIZES -- USUALLY DEFAULT TEXT MODULE TO 09
$text-module-width:				$mc-base;
$lead-module-width:				$mc-base;
$column-text-module-width:		$mc-base;
$cards-module-width:			10;
$image-module-width:			$mc-base;
$img-large-module-width: 		10;
$image-2up-module-width:		$mc-base;
$image-3up-module-width:		$mc-base;
$image-text-module-width:		$mc-base;
$image-lead-module-width:		10;
$link-module-width:				$mc-base;
$link-abstract-module-width:	$mc-base;
$banner-module-width:			07;
// $seperator-module-width:		09;
$quote-module-width:			10;
$video-module-width:			10;
$video-2up-module-width:		10;
$gallery-module-width:			10;
$specialty-module-width:		10;

// //////////////////////////////////////////
// // BANNER MODULE CONFIG
// //////////////////////////////////////////

$banner-color: $white;
$banner-headline-color: $white;
$banner-headline-font-weight: 700;
$banner-background-color: darken(#ccc, 20%);
$banner-padding: mm(75, 125, $ml) 0;
$banner-font-size: mm(18, 20);
$banner-font-size-max: 20;
$banner-font-weight: 400;
$banner-blend-mode: luminosity;
$banner-background-opacity: 0.25;
$banner-text-align: center;

// //////////////////////////////////////////
// // CARD MODULE CONFIG
// //////////////////////////////////////////

$card-max-cols: 4;
$card-border: true;
$card-shadow: false;
$card-align: center; // LEFT, RIGHT, CENTER
$card-button-full-width: true;
$card-border-radius: 0.25rem;
$card-title-font-size: $h5-max;
$card-image-ratio: percentage(400/600);
// $card-content-align: center; // CENTER, TOP, BOTTOM

// //////////////////////////////////////////
// // GALLERY MODULE CONFIG
// //////////////////////////////////////////

$gallery-max-cols: 6;
$gallery-spacing: 10;

// //////////////////////////////////////////
// // IMAGE 2UP MODULE CONFIG
// //////////////////////////////////////////

$img-2up-image-ratio: percentage(450/480);

// //////////////////////////////////////////
// // IMAGE 3UP MODULE CONFIG
// //////////////////////////////////////////

$img-3up-image-ratio: percentage(450/480);

// //////////////////////////////////////////
// // IMAGE MODULE CONFIG
// //////////////////////////////////////////

$img-module-image-ratio: percentage(575/1100);

// //////////////////////////////////////////
// // IMAGE LARGE MODULE CONFIG
// //////////////////////////////////////////

$img-large-module-image-ratio: percentage(900/1300);

// //////////////////////////////////////////
// // LINK MODULE CONFIG
// //////////////////////////////////////////

$link-module-title-font-size: rem(16); // I WOULD KEEP THIS TAME.
$link-module-font-weight: 500;
$link-module-font-family: $body-font;
$link-module-text-transform: none;
// LIST COLUMNS
$link-module-columns: 2; // ZERO WILL BREAK THIS! I DO NOT RECCOMMEND MORE THAN 2 COLUMNS
$link-module-column-gap: $grid-gutter*2;
$link-module-li-space-between: 1rem;
$link-module-li-left-padding: 1.75rem;
$link-module-icon-color: inherit;

// //////////////////////////////////////////
// // LINK ABSTRACT MODULE CONFIG
// //////////////////////////////////////////

$abstract-title-font-size: rem(18); // I WOULD KEEP THIS TAME as well.
$abstract-title-font-weight: 500;
$abstract-title-font-family: $body-font;
$abstract-text-transform: none;
$abstract-title-margin: 0 0 0.75rem;
$abstract-li-space-between: 1.5rem;
$abstract-li-padding: 0.25rem 0;
$abstract-li-left-padding: 1.75rem;
$abstract-icon-color: inherit;

// //////////////////////////////////////////
// // SEPERATOR MODULE CONFIG
// //////////////////////////////////////////

$seperator-module-height: vw(350, $dk);
$seperator-module-mobile-height: vw(350, $mp);
$seperator-module-lf-height: rem(350);
$seperator-background-color: $banner-background-color;
$seperator-blend-mode: $banner-blend-mode;
$seperator-background-opacity: $banner-background-opacity;

// //////////////////////////////////////////
// // SLIDE TOGGLE MODULE CONFIG
// //////////////////////////////////////////

// TRIGGER
$trigger-color: $text-grey;
$trigger-hover-color: $text-grey;
$trigger-background-color: #eee;
$trigger-background-hover-color: #ddd;
$trigger-line-height: 1.1;
$trigger-padding: mm(16, 24) mm(24, 32);

// ICON
$st-icon-color: $white;
$st-icon-background-color: #ccc;
$st-icon-background-hover-color: #aaa;

