//
// Theme Variables
// --------------------------------------------------

$theme-container-fluid: false !default;

//== Colors Definitions
//
//## Brand and Gray colors

// Brand Colors
$color-primary: 			#DE2B2E !default;	// Red
$color-primary-dark: 		#971E20 !default;	// Dark Red
$color-secondary: 			#444444 !default;	// Gray
$color-secondary-dark:		#2C2C2C !default;	// Dark Gray
$color-tertiary: 			#707070 !default;	// Black
$color-tertiary-dark:		#3E3E3E !default;	// Blue
$color-quaternary: 			#F7F7F7 !default;	// Light Gray

// Status
$color-success: 			#dff0d8 !default;	// Green
$color-danger: 				#f2dede !default;	// Red
$color-warning: 			#fcf8e3 !default;	// Yellow

$color-favorite: 			#ffc428 !default;	 // Orange
$color-sale:                #EC1D24 !default;    // Red

// Grays
$color-gray-darker: 		#414042 !default;
$color-gray-dark: 			#9B9B9B !default;
$color-gray: 				#707070 !default;
$color-gray-light: 			#F7F7F7 !default;
$color-gray-lighter: 		#F7F7F7 !default;
$color-gray-lightest: 		#F7F7F7 !default;
$color-gray-lightest-light: #F7F7F7 !default;

$color-white:				#FFFFFF !default;
$color-black:				#000000 !default;

//== Scaffolding
//
//## Settings for some of the most global styles.

$link-base-color:			$color-primary !default;
$link-base-hover-color:		$color-primary-dark !default;

$icon-base-color:			$color-secondary !default;
$icon-base-size:			24px !default;

$link-color-secondary:		$color-secondary !default;
$link-hover-decoration: 	underline !default;

//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

$font-family-sans:	        'Roboto', sans-serif !default;
$font-family-sans-serif:	'Roboto', sans-serif !default;

$font-family-base:			$font-family-sans !default;
$font-family-primary-title:	$font-family-sans !default;

$font-size-base:			17px !default;
$font-line-height-base:		normal !default;
$font-color-base:			$color-gray-darker !default;

// Font Weights
$font-light: 300 !default;
$font-normal: 400 !default;
$font-semibold: 600 !default;
$font-bold: 700 !default;

//== Layout Colors
//
//## Background for header/footer, Menu, etc.
$back-to-top-bg:					$color-primary !default;
$back-to-top-size:                  55px !default;
$body-background-color:				$color-white !default;
$main-content-bg: 					$color-white !default;

$header-background-color:			$color-gray-lighter !default;
$top-header-link-color:				$font-color-base !default;
$top-header-font-color:				$font-color-base !default;
$top-header-text-transform:			capitalize !default;

$header-layout:						undefined !default;

$footer-background-color:			$color-white !default;
$footer-bottom-background-color:	$color-gray-lighter !default;
$footer-link-color:					$color-white !default;

$user-indicator-link-color:			$color-primary !default;

$mobile-login-background-color:			$color-secondary !default;
$mobile-select-store-link-color: 		$color-secondary !default;
$mobile-select-store-background-color:	$color-gray !default;

$mobile-header-icon-color:		 $color-black !default;
$mobile-header-background-color: $color-white !default;
$mobile-page-title-bg:		$color-secondary !default;
$bg-main-menu:				$color-white !default;
$bg-mega:					$color-white !default;
$bg-mobile-menu-hover:		$color-gray-darker !default;

$menu-submenu-bg:			$color-white;
$menu-submenu-link-color:	$font-color-base !default;
$menu-submenu-hover-bg:		$color-gray-lighter !default;

$menu-menu-type:					regular !default;
$main-menu-root-link-color:			$color-gray-darker !default;
$main-menu-root-link-hover-color:	$color-tertiary !default;
$main-menu-root-font-weight:		$font-semibold !default;
$main-menu-root-text-transform:		capitalize !default;
$main-menu-active-color:			$color-primary !default;

$main-menu-background-color:        transparent !default;

$main-menu-root-md-padding:			0px 15px 0px 10px !default;
$main-menu-root-md-font-size:		17px !default;

$main-menu-root-lg-padding:			0px 20px 0px 10px !default;
$main-menu-root-lg-font-size:		$main-menu-root-md-font-size !default;

$second-menu-text-transform:		$main-menu-root-text-transform !default;

$mega-link-color:			$color-gray-darker !default;
$mega-link-hover-color:		$color-primary !default;

$mega-menu-bar:				$color-primary !default;

$mega-dept-read-more-link-color:	$color-primary !default;
$mega-dept-read-more-link-hover-color:	$color-primary-dark !default;

$header-background-color:           $color-white !default;

$footer-image-push: 180px !default;

$footer-height-sm:	300px !default;
$footer-height-lg:	300px !default;

$footer-height-sm-not-logged-in: $footer-height-sm !default;
$footer-height-lg-not-logged-in: $footer-height-lg !default;

$font-size-sm: $font-size-base - 3;

// Font Colors
$font-white: 				$color-white !default;
$font-gray-lightest:		$color-gray-lightest !default;
$font-gray-lighter:			$color-gray-lighter !default;
$font-gray-light:			$color-gray-light !default;
$font-gray:					$color-gray !default;
$font-gray-dark:			$color-gray-dark !default;
$font-gray-darker:			$color-gray-darker !default;

$font-primary-color:		$color-primary !default;
$font-primary-color-dark: 	$color-primary-dark !default;
$font-secondary-color:		$color-secondary !default;
$font-tertiary-color:		$color-tertiary !default;
$font-favorite-color:		$color-favorite !default;

// Line-height
$line-height-base:       1.17647058824 !default; // 20/17
$font-line-height:		 floor($font-size-base * $line-height-base) !default; // ~22px

//== Padding, Margins
//
//## Define common padding and border radius sizes and more.

// Padding
$padding-vert: 		20px !default;
$padding-horz: 		20px !default;
$padding-vert-lg: 	($padding-vert * 2) !default;
$padding-horz-lg: 	($padding-horz * 2) !default;
$padding-vert-sm: 	($padding-vert / 2) !default;
$padding-horz-sm: 	($padding-horz / 2) !default;
$padding-all: 		$padding-vert $padding-horz !default;
$padding-all-lg: 	$padding-vert-lg $padding-horz-lg !default;

$padding-vert-xl: 	($padding-vert-lg * 2) !default;
$padding-horz-xl: 	($padding-horz-lg * 2) !default;

// Margins
$margin-vert: 		$padding-vert !default;
$margin-horz: 		$padding-horz !default;
$margin-vert-lg: 	($margin-vert * 2) !default;
$margin-horz-lg: 	($margin-horz * 2) !default;
$margin-vert-sm: 	$padding-vert-sm !default;
$margin-horz-sm: 	$padding-horz-sm !default;
$margin-all: 		$padding-all !default;
$margin-all-lg: 	$padding-all-lg !default;

$margin-vert-xl: 	($margin-vert-lg * 2) !default;
$margin-horz-xl: 	($margin-horz-lg * 2) !default;

//== Backgrounds
//
//## Backgrounds being used throughout the site

$bg-gray-dark:				$color-gray-dark !default;
$bg-gray-darker:			$color-gray-darker !default;
$bg-gray:					$color-gray !default;
$bg-gray-light:				$color-gray-light !default;
$bg-gray-lighter:			$color-gray-lighter !default;
$bg-gray-lightest:			$color-gray-lightest !default;
$bg-white:					$color-white !default;

$bg-primary:				$color-primary !default;
$bg-primary-dark:			$color-primary-dark !default;
$bg-secondary:				$color-secondary !default;
$bg-secondary-dark:			$color-secondary-dark !default;
$bg-tertiary:				$color-tertiary !default;
$bg-tertiary-hover:			$color-tertiary-dark !default;
$bg-quaternary:				$color-quaternary !default;

//== Buttons
//
//## For all things button related

// Colors
$btn-primary-bg:			$color-primary !default;
$btn-primary-bg-hover:		$color-primary-dark  !default;
$btn-primary-bg-active:		$color-primary-dark  !default;

$btn-secondary-bg:			$color-secondary !default;
$btn-secondary-bg-hover:	$color-secondary-dark !default;
$btn-secondary-bg-active:	$color-secondary-dark !default;

$btn-neutral-bg:			$color-white !default;
$btn-neutral-bg-hover:		$color-gray-darker !default;
$btn-neutral-bg-active:		$color-gray-darker !default;

// Padding
$btn-padding: 11px 12px !default;

//== Borders
//
//## Borders used throughout the site

$border-radius:			4px !default;

// Border Colors
$border-gray-lightest:		$color-gray-lightest !default;
$border-gray-lighter:		$color-gray-lighter !default;
$border-gray-light:			$color-gray-light !default;
$border-gray:				$color-gray !default;
$border-gray-dark:			$color-gray-dark !default;
$border-gray-darker:		$color-gray-darker !default;
$border-primary:	    	$color-primary !default;
$border-color-tertiary:		$color-tertiary !default;
$border-color-quaternary:	$color-quaternary !default;

// Borders
$border-size-thin:		1px !default;
$border-size-normal:	2px !default;
$border-size-thick:		3px !default;
$border-size-thicker:	7px !default;
$border-size-thickest:	10px !default;


// Shadows
$box-shadow: 		0px 5px 8px 0px rgba(204, 204, 204, 0.7) !default;
$box-shadow-top:	0px 0px 10px 0px rgba(204, 204, 204, 0.7) !default;

// #
$border-style-primary: 		         '#{$border-size-normal} solid #{$border-primary}' !default;
$border-style-primary-thin: 		'#{$border-size-thin} solid #{$border-primary}' !default;
$border-style-primary-thick: 		'#{$border-size-thick} solid #{$border-primary}' !default;
$border-style-primary-thicker: 	    '#{$border-size-thicker} solid #{$border-primary}' !default;
$border-style-primary-thickest: 	'#{$border-size-thickest} solid #{$border-primary}' !default;

// #
$border-style-gray-lightest: 			'#{$border-size-normal} solid #{$border-gray-lightest}' !default;
$border-style-gray-lighter: 			'#{$border-size-normal} solid #{$border-gray-lighter}' !default;
$border-style-gray-lighter-thin: 		'#{$border-size-thin} solid #{$border-gray-lighter}' !default;
$border-style-gray-lighter-thick: 		'#{$border-size-thick} solid #{$border-gray-lighter}' !default;
$border-style-gray-lighter-thicker: 	'#{$border-size-thicker} solid #{$border-gray-lighter}' !default;
$border-style-gray-lighter-thickest: 	'#{$border-size-thickest} solid #{$border-gray-lighter}' !default;

// #
$border-style-gray-light: 				'#{$border-size-normal} solid #{$border-gray-light}' !default;
$border-style-gray-light-thin: 			'#{$border-size-thin} solid #{$border-gray-light}' !default;
$border-style-gray-light-thick: 		'#{$border-size-thick} solid #{$border-gray-light}' !default;

// #
$border-style-gray: 			'#{$border-size-normal} solid #{$border-gray}' !default;
$border-style-gray-thin: 		'#{$border-size-thin} solid #{$border-gray}' !default;
$border-style-gray-thick: 		'#{$border-size-thick} solid #{$border-gray}' !default;

// #
$border-style-gray-dark: 			'#{$border-size-normal} solid #{$border-gray-dark}' !default;
$border-style-gray-dark-thin:		'#{$border-size-thin} solid #{$border-gray-dark}' !default;
$border-style-gray-dark-thick: 	    '#{$border-size-thick} solid #{$border-gray-dark}' !default;

// #
$border-style-gray-darker: 			'#{$border-size-normal} solid #{$border-gray-darker}' !default;
$border-style-gray-darker-thin: 	'#{$border-size-thin} solid #{$border-gray-darker}' !default;
$border-style-gray-darker-thick: 	'#{$border-size-thick} solid #{$border-gray-darker}' !default;

$border-style-quaternary-normal:	'#{$border-size-normal} solid #{$border-color-quaternary}' !default;
$border-style-tertiary-normal:		'#{$border-size-normal} solid #{$border-color-tertiary}' !default;

//== Statuses
//
//## For success/fail/warning messages

// Colors
$status-warning-color:			$color-danger !default;
$status-warning-border-color:	$color-warning !default;
$status-warning-bg:				$color-danger !default;
$status-success-color:			$color-success !default;
$status-success-border-color:	$color-success !default;
$status-success-bg:				$color-success !default;

//== Wordpress Theme Specific
//

// Social Colors
$facebook:		#3C5C9C !default;
$twitter:		#1CA8E1 !default;
$pinterest:		#C92228 !default;
$instagram:		#517ea3 !default;
$googleplus:	#D53B28 !default;
$youtube:		#D02727 !default;

//== Form Elements
//
//##
// Padding
$input-padding: 12px $padding-vert !default;

// Disabled
$disabled-color:		#EEEEEE !default;

$required-color:		$color-primary !default;

// Shadows
$box-shadow: 0 2px 8px 0 rgba(204, 204, 204, 0.7) !default;
$box-shadow-box: 0 0px 2px 0 rgba(204, 204, 204, 0.7) !default;

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

//== Grid system
//
//## Define your custom responsive grid.

//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         $padding-horz !default;

$icon-font-path: "../../vendor/bootstrap/fonts/" !default;

$reorder-color-base: 	$font-color-base !default;
$reorder-color-hover:   $link-base-color !default;

$s-text-bg:      		$color-tertiary !default;
$s-text-size-md:		30px !default;
$s-text-weight:			$font-bold !default;
$s-text-color:			$color-white !default;
$s-text-font:           $font-family-base !default;

$cta-text-bg:			$color-secondary-dark !default;
$cta-text-bg-hv:		$color-secondary !default;
$cta-text-mt: 			15% !default;

$logo-mobile-img-wid: 		100px !default;
$logo-mobile-img-m:			0 0 0 0 !default;
$logo-mobile-max-wid:		500px !default;
$logo-mobile-r1-img-wid:	100px !default;
$logo-mobile-r1-img-m:		0 -30px 0 -30px !default;
$logo-nav-mb:				0px !default;
$logo-nav-img-hei:			auto !default;
$logo-nav-img-wid:			200px !default;
$logo-nav-img-mar:			0 0 0 20px !default;
$logo-nav-lg-img-hei:		auto !default;
$logo-nav-lg-img-wid:		200px !default;
$logo-nav-lg-img-mar:		0 0 0 20px !default;

$mobile-sign-out-bg:    	$bg-primary !default;

$menu-li-mg: 				0 20px 0 20px !default;
$menu-li-mg-lg:				0 20px 0 20px !default;

// Banner
$site-banner-bg:	$color-primary !default;
$site-banner-text:	$color-white !default;

// Newsletter
$newsletter-title-font-size: 23px  !default;
$newsletter-title-font-color: $color-secondary !default;
$newsletter-btn-font-size: 22px !default;
$newsletter-bg: $color-gray-light !default;
