// -----------------------------------------------------------------------------
// Variables
// -----------------------------------------------------------------------------

// This stylesheet is for variables only.

// Anything other than variables will result in duplication of styles
// in every stylesheet that imports this file.

// -----------------------------------------------------------------------------
// Fonts stacks
// -----------------------------------------------------------------------------
$f-sans:            Helvetica, Arial, sans-serif;

$f-body:            'Akzidenz', $f-sans;
$f-header:          'Akzidenz', $f-sans;
$f-subheader:       'Akzidenz', $f-sans;
$f-block-title:     'Akzidenz_Condensed', $f-sans;
$f-cart-label:      'Akzidenz_Condensed', $f-sans;
$f-btn:             'Akzidenz', $f-sans;
$f-form:            'Akzidenz', $f-sans;
$f-condensed:       'Akzidenz_Condensed', $f-sans;

// -----------------------------------------------------------------------------
// Primary color palette
// -----------------------------------------------------------------------------

// http://chir.ag/projects/name-that-color
// Order by hexcode 0 -> 9 -> a -> f

$black:         #000;
$mine-shaft:    #1e1e1e;
$heavy-metal:   #252525;
$shark:         #2f3238;
$gravel:        #484848;
$boulder:       #525252;
$grey:          #747474;
$dark-grey:     #787878;
$mercury:       #e5e5e5;
$pumice:        #dedede;
$off-white:     #fafafa;
$white:         #fff;
$alt-off-white: #f4f4f4;
$light-gray:    #a1a1a1;

$pear:          #adbe15;
// $key-lime:      #c3d42a;
$key-lime:      #bece13;
$fruit-punch:   #dd3737;
$orange:        #fd6023;
$coral:         #fe7743;

// Other colors
$cod-gray:      #1b1b1b;
$storm-clouds:  #474747;
$pewter:        #626262;
$granite-grey:  #868686;
$light-charcoal:#898989;
$citron:        #9caa22;
$citron-dark:   #9cac00;
$silver:        #aaa;
$brushed-steel: #b2b2b2;
$aluminum:      #ddd;
$tangerine:     #fe6f37;

// -----------------------------------------------------------------------------
// Color declarations
// -----------------------------------------------------------------------------

// Text colors
$t-header:              $black;
$t-subheader:           $mine-shaft;
$t-body:                $mine-shaft;
$t-inverse:             $white;

$t-subheader-text:      $light-charcoal;
$t-pager:               $light-charcoal;

$t-price:               $pear;
$t-inventory:           $tangerine;

$t-accent:              $pear;
$t-accent-hero:         $key-lime;
$t-accent-other:        $tangerine;

$t-link:                $black;
$t-link-underline:      $pear;
$t-link-hover:          $pear;

$t-success:             $pear;
$t-notice:              $orange;
$t-error:               $fruit-punch;

$t-form:                $mine-shaft;
$t-form-title:          $mine-shaft;
$t-form-input:          $boulder;
$t-form-label:          $shark;
$t-required:            $coral;

// Icon colors
$i-header:              $pewter;
$i-header-hover:        $pear;
$i-close:               $light-charcoal;
$i-plus:                $light-gray;

// Background colors
$bg-main:               $white;
$bg-main-inverse:       $black;
$bg-other:              $off-white;
$bg-accent:             $key-lime;

$bg-header:             $white;
$bg-header-inverse:     $black;
$bg-main-nav-hover:     $mine-shaft;
$bg-skip-drop:          $alt-off-white;
$bg-mobile-nav:         $mine-shaft;
$bg-mobile-sub-nav:     $alt-off-white;
$bg-mobile-block-nav:   $alt-off-white;

$bg-breadcrumbs:        $off-white;

$bg-title:              $off-white;
$bg-block-title:        $black;
$bg-body-highlight:     $mercury;
$bg-product-section:    $off-white;
$bg-footer:             $white;
$bg-footer-inverse:     $heavy-metal;

$bg-form:               $white;
$bg-form-title:         $off-white;
$bg-form-input:         $off-white;
$bg-form-label:         $off-white;

$bg-toolbar:            $off-white;

$bg-shadow:             $silver;

$gr-overlay:    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
$gr-overlay-inverse:    linear-gradient(rgba(255, 255, 255, 0), rgba(225, 225, 225, 1));

// Border colors
$border-accent:             $key-lime;

$border-nav:                $gravel;
$border-skip-link:          $mine-shaft;
$border-body:               $mercury;
$border-form:               $pumice;

$border-success:            $pear;
$border-notice:             $orange;
$border-error:              $fruit-punch;

// Buttons styles
$t-btn-primary:             $black;
$t-btn-primary-hover:       $key-lime;
$t-btn-secondary:           $key-lime;
$t-btn-secondary-hover:     $white;
$t-btn-other:               $boulder;
$t-btn-other-hover:         $white;
$t-btn-flat:                $white;
$t-btn-flat-hover:          $key-lime;

$bg-btn-primary:                #c3d802;
$bg-btn-primary-hover:          $storm-clouds;
$bg-btn-secondary:              $pewter;
$bg-btn-secondary-hover:        $key-lime;
$bg-btn-other:                  $off-white;
$bg-btn-other-hover:            $silver;
$bg-btn-flat:                   $grey;
$bg-btn-flat-hover:             $black;

// $gr-green:      linear-gradient($key-lime, #9caa22);
$gr-green:      linear-gradient(#c7da0f, #c3d802);
$gr-black:      linear-gradient(#575757, #1d1d1d);
$gr-white:      linear-gradient($white, #efefef);
$gr-grey:       linear-gradient(#c6c6c6, #afafaf);

$gr-btn-primary:                $gr-green;
$gr-btn-primary-hover:          $gr-black;
$gr-btn-secondary:              $gr-black;
$gr-btn-secondary-hover:        $gr-green;
$gr-btn-other:                  $gr-white;
$gr-btn-other-hover:            $gr-grey;

$border-btn-primary:            $citron-dark;
$border-btn-primary-hover:      $storm-clouds;
$border-btn-secondary:          $storm-clouds;
$border-btn-secondary-hover:    $citron-dark;
$border-btn-other:              $aluminum;
$border-btn-other-hover:        $brushed-steel;

// -----------------------------------------------------------------------------
// Media Queries
// -----------------------------------------------------------------------------

$break-xs: 480px;
$break-md: 768px;
$break-lg: 1024px;
$break-xl: 1280px;

@mixin respond-to($media) {
    @if $media == xs {
        @media only screen and (max-width: $break-xs) { @content; }
    }
    @else if $media == sm {
        @media only screen and (min-width: $break-xs + 1) and (max-width: $break-md) { @content; }
    }
    @else if $media == md {
        @media only screen and (min-width: $break-md + 1) and (max-width: $break-lg) { @content; }
    }
    @else if $media == lg {
        @media only screen and (min-width: $break-lg + 1) and (max-width: $break-xl) { @content; }
    }
}

//Retina displays
$mq-retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx)';

@mixin retina {
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx) {
        @content;
    }
}

// -----------------------------------------------------------------------------
// BB - Compatibility - Not ideal but saves from having to rename all the
// variables every time we want to try and make consitent
// Can build as we go
// -----------------------------------------------------------------------------

$border-grey:       $border-body;
$link-blue:         $t-link;
$link-blue-hover:   $t-link-hover;
$t-black:           $t-body;
$t-grey:            $t-body;