// BrainSlug 1.0.0
// Variables
// --------------------------------------------------


// GLOBAL VALUES
// --------------------------------------------------

// OLD ----------------------------------------------
// Grays
// -------------------------
$black:                 #000 !default;
$grayDarker:            #222 !default;
$grayDark:              #333 !default;
$gray:                  #555 !default;
$grayLight:             #999 !default;
$grayLighter:           #F5F5F5 !default;
$white:                 #fff !default;


// Accent colors
// -------------------------
$blue:                  #2FA4E7 !default;
$blueDark:              #033C73 !default;
$green:                 #73A839 !default;
$red:                   #C71C22 !default;
$yellow:                #F7B42C !default;
$orange:                #DD5600 !default;
$pink:                  #F49AC1 !default;
$purple:                #9760B3 !default;
$brown:             	#A6763C !default;
//---------------------------------------------------


// Brand colours

$gray-darker: lighten(#000, 13.5%); // #222
$gray-dark: lighten(#000, 20%); // #333
$gray: lighten(#000, 33.5%); // #555
$gray-light: lighten(#000, 60%); // #999
$gray-lighter: lighten(#000, 93.5%); // #eee

$brand-primary: #db3c4e;
$brand-secondary: #2e2c31;
$brand-tertiary: #bbbfc0;
$brand-complementary: #1bb0ae;

$brand-success: #00b056;
$brand-info: #16a0ba;
$brand-warning: #f6a201;
$brand-danger: #932937;

// Base colours. For body, text and links.

$body-bg: #fff;
$text-color: #5f5f5f;
$link-color: $brand-complementary;
$link-hover-color: darken($link-color, 15%);


// Scaffolding
// -------------------------
$bodyBackground:        $white !default;
$textColor:             $text-color !default;


// Links
// -------------------------
$linkColor:             $link-color !default;
$linkColorHover:        darken($linkColor, 15%) !default;


// Typography
// -------------------------
@import url(https://fonts.googleapis.com/css?family=Istok+Web:400,400italic,700);

//$sansFontFamily:        "HelveticaNeue", "Helvetica Neue", Helvetica, 'ArialMT', Arial, sans-serif !default;
//$serifFontFamily:       Georgia, "Times New Roman", Times, serif !default;
//$monoFontFamily:        Menlo-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family:           'Istok Web', sans-serif !default;

$baseFontSize:          14px !default;
$baseFontFamily:        $font-family !default;
$baseLineHeight:        20px !default;
$altFontFamily:         $font-family !default;

//$headingsFontFamily:    'Telex', sans-serif !default; // empty to use BS default, $baseFontFamily
$headingsFontFamily:    $font-family !default;
$headingsFontWeight:    bold !default;    // instead of browser default, bold
$headingsColor:         $text-color !default; // empty to use BS default, $textColor


// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height

$fontSizeLarge:         $baseFontSize * 1.25 !default; // ~18px
$fontSizeSmall:         $baseFontSize * 0.85 !default; // ~12px
$fontSizeMini:          $baseFontSize * 0.75 !default; // ~11px

$paddingLarge:          11px 19px !default; // 44px
$paddingSmall:          2px 10px !default;  // 26px
$paddingMini:           0px 6px !default;   // 22px

$baseBorderRadius:      0px !default;
$borderRadiusLarge:     0px !default;
$borderRadiusSmall:     0px !default;


// Tables
// -------------------------
$tableBackground:                   transparent !default; // overall background-color
$tableBackgroundAccent:             $brand-tertiary !default; // for striping
$tableBackgroundHover:              #f5f5f5 !default; // for hover
$tableBorder:                       $brand-tertiary !default; // table and cell border

// Buttons
// -------------------------
$btnBackground:                     $white !default;
//$btnBackgroundHighlight:            darken($white, 10%) !default;
$btnBackgroundHighlight:            $white !default;
$btnBorder:                         $brand-tertiary !default;

$btnPrimaryBackground:              $brand-complementary !default;
//$btnPrimaryBackgroundHighlight:     adjust-hue($btnPrimaryBackground, 15%) !default;
$btnPrimaryBackgroundHighlight:     $brand-complementary !default;

$btnInfoBackground:                 $brand-info !default;
$btnInfoBackgroundHighlight:        $brand-info !default;

$btnSuccessBackground:              $brand-success !default;
$btnSuccessBackgroundHighlight:     $brand-success !default;

$btnWarningBackground:              $brand-warning !default;
$btnWarningBackgroundHighlight:     $brand-warning !default;

$btnDangerBackground:               $brand-danger !default;
$btnDangerBackgroundHighlight:      $brand-danger !default;

$btnInverseBackground:              $brand-secondary !default;
$btnInverseBackgroundHighlight:     $brand-secondary !default;


// Forms
// -------------------------
$inputBackground:               $white !default;
$inputBorder:                   $brand-tertiary !default;
$inputBorderRadius:             $baseBorderRadius !default;
$inputDisabledBackground:       $brand-tertiary !default;
$formActionsBackground:         #f5f5f5 !default;
$inputHeight:                   $baseLineHeight + 10px !default; // base line-height + 8px vertical padding + 2px top/bottom border


// Dropdowns
// -------------------------
$dropdownBackground:            $white !default;
$dropdownBorder:                $brand-tertiary !default;
$dropdownDividerTop:            #e5e5e5 !default;
$dropdownDividerBottom:         $white !default;

$dropdownLinkColor:             $brand-secondary !default;
$dropdownLinkColorHover:        $brand-primary !default;
$dropdownLinkColorActive:       $brand-primary !default;

$dropdownLinkBackgroundActive:  transparent !default;
$dropdownLinkBackgroundHover:   transparent !default;



// COMPONENT VARIABLES
// --------------------------------------------------


// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindexDropdown:          1000 !default;
$zindexPopover:           1010 !default;
$zindexTooltip:           1020 !default;
$zindexFixedNavbar:       1030 !default;
$zindexModalBackdrop:     1040 !default;
$zindexModal:             1050 !default;


// Sprite icons path
// -------------------------
$iconSpritePath:          image-path("glyphicons-halflings.png") !default;
$iconWhiteSpritePath:     image-path("glyphicons-halflings-white.png") !default;


// Input placeholder text color
// -------------------------
$placeholderText:         $grayLight !default;


// Hr border color
// -------------------------
$hrBorder:                $grayLighter !default;


// Horizontal forms & lists
// -------------------------
$horizontalComponentOffset:       180px !default;


// Wells
// -------------------------
$wellBackground:                  #f5f5f5 !default;


// Navbar
// -------------------------
$navbarCollapseWidth:             979px !default;
$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1 !default;

$navbarHeight:                    50px !default;
$navbarBackground:                $brand-primary !default;
$navbarBackgroundHighlight:       $navbarBackground !default;
$navbarBorder:                    $navbarBackground !default;

$navbarText:                      $white !default;
$navbarLinkColor:                 $white !default;
$navbarLinkColorHover:            $white !default;
$navbarLinkColorActive:           $navbarLinkColorHover !default;
$navbarLinkBackgroundHover:       darken($navbarBackground, 12%) !default;
//$navbarLinkBackgroundActive:      darken($navbarBackground, 12%) !default;
$navbarLinkBackgroundActive:      $brand-secondary !default;

$navbarBrandColor:                $navbarLinkColor !default;

// Inverted navbar
$navbarInverseBackground:                $brand-secondary !default;
$navbarInverseBackgroundHighlight:       lighten($navbarInverseBackground, 5%) !default;
$navbarInverseBorder:                    darken($navbarInverseBackground, 3%) !default;

$navbarInverseText:                      $white !default;
$navbarInverseLinkColor:                 $white !default;
$navbarInverseLinkColorHover:            $white !default;
$navbarInverseLinkColorActive:           $white !default;
$navbarInverseLinkBackgroundHover:       darken($navbarInverseBackground, 6%) !default;
$navbarInverseLinkBackgroundActive:      darken($navbarInverseBackground, 6%) !default;

$navbarInverseSearchBackground:          $white !default;
$navbarInverseSearchBackgroundFocus:     $white !default;
$navbarInverseSearchBorder:              $navbarInverseBackground !default;
$navbarInverseSearchPlaceholderColor:    $grayLight !default;

$navbarInverseBrandColor:                $navbarInverseLinkColor !default;


// Pagination
// -------------------------
$paginationBackground:                #fff !default;
$paginationBorder:                    #ddd !default;
$paginationActiveBackground:          #f5f5f5 !default;


// Hero unit
// -------------------------
$heroUnitBackground:              $grayLighter !default;
$heroUnitHeadingColor:            inherit !default;
$heroUnitLeadColor:               inherit !default;


// Form states and alerts
// -------------------------
$warningText:             darken($brand-warning, 10%) !default;
$warningBackground:       $brand-warning !default;
$warningBorder:           $brand-warning !default;

$errorText:               darken($brand-danger, 5%) !default;
$errorBackground:         $brand-danger !default;
$errorBorder:             $brand-danger !default;

$successText:             darken($brand-success, 5%) !default;
$successBackground:       $brand-success !default;
$successBorder:           $brand-success !default;

$infoText:                darken($brand-info, 10%) !default;
$infoBackground:          $brand-info !default;
$infoBorder:              $brand-info !default;


// Tooltips and popovers
// -------------------------
$tooltipColor:            #fff !default;
$tooltipBackground:       #000 !default;
$tooltipArrowWidth:       5px !default;
$tooltipArrowColor:       $tooltipBackground !default;

$popoverBackground:       #fff !default;
$popoverArrowWidth:       10px !default;
$popoverArrowColor:       #fff !default;
$popoverTitleBackground:  darken($popoverBackground, 3%) !default;

// Special enhancement for popovers
$popoverArrowOuterWidth:  $popoverArrowWidth + 1 !default;
$popoverArrowOuterColor:  rgba(0,0,0,.25) !default;



// GRID
// --------------------------------------------------


// Default 940px grid
// -------------------------
$gridColumns:             12 !default;
$gridColumnWidth:         60px !default;
$gridGutterWidth:         20px !default;
$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;

// 1200px min
$gridColumnWidth1200:     70px !default;
$gridGutterWidth1200:     30px !default;
$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;

// 768px-979px
$gridColumnWidth768:      42px !default;
$gridGutterWidth768:      20px !default;
$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;


// Fluid grid
// -------------------------
$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth) !default;
$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth) !default;

// 1200px min
$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200) !default;

// 768px-979px
$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768) !default;
$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768) !default;
