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


// Colors
// --------------------------------------------------

$black = #000;
$grayDarker = #222;
$grayDark = #333;
$gray = #555;
$grayLight = #999;
$grayLighter = #ddd;
$grayLightest = #eee;
$white = #fff;

$brandPrimary = #428bca;
$brandSuccess = #5cb85c;
$brandInfo = #5bc0de;
$brandWarning = #f0ad4e;
$brandDanger = #d9534f;


// Text muted color
$textMuted = $grayLight;
$abbrBorderColor = $grayLight;
$headingsSmallColor = $grayLight;

$blockquoteSmallColor = $grayLight;
$blockquoteBorderColor = $grayLighter;

$pageHeaderBorderColor = $grayLighter;


// Bootstrap 2 colors
$blue = #049cdb;
$blueDark = #0064cd;
$green = #46a546;
$red = #9d261d;
$yellow = #ffc40d;
$orange = #f89406;
$pink = #c3325f;
$purple = #7a43b6;


// Backgrounds
// -------------------------

$backgroundColor = #f5f5f5;
$backgroundHighlightColor = #f9f9f9;
$backgroundHover = $backgroundColor;
$backgroundActive = $backgroundHover;

$primaryBackground = $brandPrimary;
$infoBackground = $brandInfo;
$successBackground = $brandSuccess;
$warningBackground = $brandWarning;
$dangerBackground = $brandDanger;


// Links
// -------------------------
$linkColor = $brandPrimary;
$linkHoverColor = darken($linkColor, 15%);


// Scaffolding
// -------------------------
$bodyBackground = $white;
$textColor = $grayDark;
$borderColor = $grayLighter;
$outlineColor = $gray;

$defaultAccentColor = $brandPrimary;
$defaultAccentColorHighlight = darken($defaultAccentColor, 15%);


// Typography
// -------------------------
$fontFamilySans = "Helvetica Neue", Helvetica, Arial, sans-serif;
$fontFamilySerif = Georgia, "Times New Roman", Times, serif;
$fontFamilyMono = Monaco, Menlo, Consolas, "Courier New", monospace;
$fontFamilyBase = $fontFamilySans;
$fontFamilyAlt = $serifFontFamily;

$fontSizeBase = 14px;
$fontSizeLarge = ceil(($fontSizeBase * 1.25)); // ~18px
$fontSizeSmall = ceil(($fontSizeBase * 0.85)); // ~12px

$fontSizeH1 = floor(($fontSizeBase * 2.6)); // ~36px
$fontSizeH2 = floor(($fontSizeBase * 2.15)); // ~30px
$fontSizeH3 = ceil(($fontSizeBase * 1.7)); // ~24px
$fontSizeH4 = ceil(($fontSizeBase * 1.25)); // ~18px
$fontSizeH5 = $fontSizeBase;
$fontSizeH6 = ceil(($fontSizeBase * 0.85)); // ~12px

$lineHeightBase = 1.428571429; // 20/14
$lineHeightComputed = floor(($fontSizeBase * $lineHeightBase)); // ~20px

$headingsFontFamily = inherit; // empty to use BS default, $fontFamilyBase
$headingsFontWeight = 500; // instead of browser default, bold
$headingsLineHeight = 1.1;
$headingsColor = inherit; // empty to use BS default, $textColor

$blockquoteFontSize = ($fontSizeBase * 1.25);


// Icons path
// -------------------------
$fontPath = "../../fonts";


// Components
// -------------------------
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

$paddingBaseVertical = 6px;
$paddingBaseHorizontal = 12px;

$paddingLargeVertical = 10px;
$paddingLargeHorizontal = 16px;

$paddingSmallVertical = 5px;
$paddingSmallHorizontal = 10px;

$paddingXsVertical = 1px;
$paddingXsHorizontal = 5px;

$lineHeightLarge = 1.33;
$lineHeightSmall = 1.5;

$borderRadiusBase = 4px;
$borderRadiusLarge = 6px;
$borderRadiusSmall = 3px;

$componentActiveColor = #fff;
$componentActiveBackground = $brandPrimary;

$caretWidthBase = 4px;
$caretWidthLarge = 5px;


// Tables
// -------------------------
$tableBackground = transparent; // overall background-color
$tableBackgroundAccent = $backgroundHighlightColor; // for striping
$tableHoverBackground = $HoverBackground; // for hover
$tableBorder = $borderColor; // table and cell border

$tableCellPadding = 8px;
$tableCondensedCellPadding = 5px;


// Buttons
// -------------------------
$btnBackground = $white;
$btnBorder = #ccc;
$btnColor = #333;

$btnPrimaryBackground = $primaryBackground;
$btnPrimaryBorder = darken($btnPrimaryBackground, 5%);
$btnPrimaryColor = $white;

$btnInfoBackground = $infoBackground;
$btnInfoBorder = darken($btnInfoBackground, 5%);
$btnInfoColor = $white;

$btnSuccessBackground = $successBackground;
$btnSuccessBorder = darken($btnSuccessBackground, 5%);
$btnSuccessColor = $white;

$btnWarningBackground = $warningBackground;
$btnWarningBorder = darken($btnWarningBackground, 5%);
$btnWarningColor = $white;

$btnDangerBackground = $dangerBackground;
$btnDangerBorder = darken($btnDangerBackground, 5%);
$btnDangerColor = $white;

$btnInverseBackground = #444;
$btnInverseBorder = darken($btnInverseBackground, 5%);
$btnInverseColor = $white;

$btnLinkDisabledColor = $grayLight;


// Forms
// -------------------------
$inputBackground = $white;
$inputDisabledBackground = $grayLighter;

$inputColor = $gray;
$inputBorder = #ccc;
$inputBorderRadius = $borderRadiusBase;
$inputBorderFocus = #66afe9;

$inputColorPlaceholder = $grayLight;

$inputHeightBase = ($lineHeightComputed + ($paddingBaseVertical * 2) + 2);
$inputHeightLarge = (ceil($fontSizeLarge * $lineHeightLarge) + ($paddingLargeVertical * 2) + 2);
$inputHeightSmall = (floor($fontSizeSmall * $lineHeightSmall) + ($paddingSmallVertical * 2) + 2);

$legendColor = $grayDark;
$legendBorderColor = #e5e5e5;

$inputGroupAddonBackground = $grayLighter;
$inputGroupAddonBorderColor = $inputBorder;

$formActionsBackground = $backgroundColor;


// Dropdowns
// -------------------------

$dropdownBackground = $white;
$dropdownBorder = rgba(0,0,0,.15);
$dropdownFallbackBorder = #ccc;
$dropdownDividerBackground = #e5e5e5;

$dropdownLinkColor = $grayDark;
$dropdownLinkHoverColor = darken($grayDark, 5%);
$dropdownLinkHoverBackground = #f5f5f5;

$dropdownLinkActiveColor = $componentActiveColor;
$dropdownLinkActiveBackground = $componentActiveBackground;


// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these =)

$zindexNavbar = 1000;
$zindexDropdown = 1000;
$zindexPopover = 1010;
$zindexTooltip = 1030;
$zindexFixedNavbar = 1030;
$zindexModalBackground = 1040;
$zindexModal = 1050;


//== Media queries breakpoints
// -------------------------

// Extra small screen / phone
$screenXs = 480px;
$screenXsMin = $screenXs;
$screenPhone = $screenXsMin;

// Small screen / tablet
$screenSm = 768px;
$screenSmMin = $screenSm;
$screenTablet = $screenSmMin;

// Medium screen / desktop
$screenMd = 992px;
$screenMdMin = $screenMd;
$screenDesktop = $screenMdMin;

// Large screen / wide desktop
$screenLg = 1200px;
$screenLgMin = $screenLg;
$screenLgDesktop = $screenLgMin;

// So media queries don't overlap when required, provide a maximum
$screenXsMax = ($screenSmMin - 1);
$screenSmMax = ($screenMdMin - 1);
$screenMdMax = ($screenLgMin - 1);


// layout Grid
// --------------------------------------------------

$gridColumns = 12;
$gridGutterWidth = 30px;
// Point at which the navbar becomes uncollapsed.
$gridFloatBreakpoint = $screenSmMin;
// Point at which the navbar begins collapsing.
$gridFloatBreakpointMax = ($gridFloatBreakpoint - 1);


// Container sizes
// --------------------------------------------------
//## Define the maximum width of `.container` for different screen sizes.

$containerTablet = ((720px + $gridGutterWidth));
$containerSm = $containerTablet;

$containerDesktop = ((940px + $gridGutterWidth));
$containerMd = $containerDesktop;

$containerLargeDesktop = ((1140px + $gridGutterWidth));
$containerLg = $containerLargeDesktop;


// Navbar
// --------------------------------------------------
//##

// Basics of a navbar
$navbarHeight = 40px;
$navbarMarginBottom = $lineHeightComputed;
$navbarBorderRadius = $borderRadiusBase;
$navbarPaddingHorizontal = floor(($gridGutterWidth / 2));
$navbarPaddingVertical = (($navbarHeight - $lineHeightComputed) / 2);
$navbarCollapseMaxHeight = 340px;

$navbarDefaultColor = #777;
$navbarDefaultBackground = #f8f8f8;
$navbarDefaultBorder = darken($navbarDefaultBackground, 6.5%);

$navbarDefaultLinkColor = #777;
$navbarDefaultLinkHoverColor = #333;
$navbarDefaultLinkHoverBackground = transparent;
$navbarDefaultLinkActiveColor = #555;
$navbarDefaultLinkActiveBackground = darken($navbarDefaultBackground, 6.5%);
$navbarDefaultLinkDisabledColor = #ccc;
$navbarDefaultLinkDisabledBackground = transparent;

$navbarLinkHoverBackground = transparent;
$navbarLinkActiveBackground = darken($navbarDefaultBackground, 5%);


// Navbar brand label
$navbarDefaultBrandColor = $navbarDefaultLinkColor;
$navbarDefaultBrandHoverColor = darken($navbarDefaultBrandColor, 10%);
$navbarDefaultBrandHoverBackground = transparent;

// Navbar toggle
$navbarDefaultToggleHoverBackground = #ddd;
$navbarDefaultToggleIconBarBackground = #888;
$navbarDefaultToggleBorderColor = #ddd;


// Inverted navbar
// Reset inverted navbar basics
$navbarInverseColor = $grayLight;
$navbarInverseBackground = #222;
$navbarInverseBorder = darken($navbarInverseBackground, 10%);

$navbarInverseLinkColor = $grayLight;
$navbarInverseLinkHoverColor = $white;
$navbarInverseLinkHoverBackground = transparent;
$navbarInverseLinkActiveColor = $navbarInverseLinkHoverColor;
$navbarInverseLinkActiveBackground = darken($navbarInverseBackground, 10%);
$navbarInverseLinkDisabledColor = #444;
$navbarInverseLinkDisabledBackground = transparent;

$navbarInverseBrandColor = $navbarInverseLinkColor;
$navbarInverseBrandHoverColor = #fff;
$navbarInverseBrandHoverBackground = transparent;

$navbarInverseToggleHoverBg = #333;
$navbarInverseToggleIconBarBg = #fff;
$navbarInverseToggleBorderColor = #333;

$navbarInverseSearchBackground = lighten($navbarInverseBackground, 25%);
$navbarInverseSearchBackgroundFocus = $white;
$navbarInverseSearchBorder = $navbarInverseBackground;
$navbarInverseSearchPlaceholderColor = #ccc;


// Pagination
// -------------------------
$paginationBackground = #fff;
$paginationBorder = $borderColor;
$paginationActiveBackground = $backgroundActive;
$paginationColor = $linkColor;

$paginationHoverColor = $linkHoverColor;
$paginationHoverBackground = $grayLighter;
$paginationHoverBorder = #ddd;

$paginationActiveColor = #fff;
$paginationActiveBackground = $brandPrimary;
$paginationActiveBorder = $brandPrimary;

$paginationDisabledColor = $grayLight;
$paginationDisabledBg = #fff;
$paginationDisabledBorder = #ddd;



//== Form states and alerts
// -------------------------
$stateSuccessText = #3c763d;
$stateSuccessBackground = #dff0d8;
$stateSuccessBorder = darken(spin($stateSuccessBackground, -10), 5%);

$stateInfoText = #31708f;
$stateInfoBackground = #d9edf7;
$stateInfoBorder = darken(spin($stateInfoBackground, -10), 7%);

$stateWarningText = #8a6d3b;
$stateWarningBackground = #fcf8e3;
$stateWarningBorder = darken(spin($stateWarningBackground, -10), 5%);

$stateDangerText = #a94442;
$stateDangerBackground = #f2dede;
$stateDangerBorder = darken(spin($stateDangerBackground, -10), 5%);



// Tooltips
// -------------------------

$tooltipMaxWidth = 200px;
$tooltipColor = #fff;
$tooltipBackground = #000;
$tooltipOpacity = .9;
$tooltipArrowWidth = 5px;
$tooltipArrowColor = $tooltipBackground;



// Popovers
// -------------------------

$popoverBackground = #fff;
$popoverBorderColor = rgba(0,0,0,.2);
$popoverFallbackBorderColor = #ccc;

$popoverArrowWidth = 10px;
$popoverArrowColor = #fff;
$popoverArrowOuterWidth = $popoverArrowWidth + 1;
$popoverArrowOuterColor = fadein($popoverBorderColor, 5%);
$popoverArrowOuterFallbackColor = darken($popoverFallbackBorderColor, 5%);

$popoverMaxWidth = 276px;
$popoverTitleBackground = darken($popoverBackground, 3%);


//== Labels
// -------------------------

$labelDefaultBackground = $grayLight;
$labelPrimaryBackground = $brandPrimary;
$labelSuccessBackground = $brandSuccess;
$labelInfoBackground = $brandInfo;
$labelWarningBackground = $brandWarning;
$labelDangerBackground = $brandDanger;

$labelColor = #fff;
$labelLinkHoverColor = #fff;


//== Modals
// -------------------------

$modalInnerPadding = 20px;
$modalTitlePadding = 15px;
$modalTitleLineHeight = $lineHeightBase;

$modalContentBackground = #fff;
$modalContentBorderColor = rgba(0,0,0,.2);
$modalContentFallbackBorderColor = #999;

$modalBackdropBackground = #000;
$modalBackdropOpacity = .5;
$modalHeaderBorderColor = #e5e5e5;
$modalFooterBorderColor = $modalHeaderBorderColor;

$modalLg = 900px;
$modalMd = 600px;
$modalSm = 300px;


//== Alerts
// -------------------------

$alertPadding = 15px;
$alertBorderRadius = $borderRadiusBase;
$alertLinkFontWeight = bold;

$alertSuccessBackground = $stateSuccessBackground;
$alertSuccessText = $stateSuccessText;
$alertSuccessBorder = $stateSuccessBorder;

$alertInfoBackground = $stateInfoBackground;
$alertInfoText = $stateInfoText;
$alertInfoBorder = $stateInfoBorder;

$alertWarningBackground = $stateWarningBackground;
$alertWarningText = $stateWarningText;
$alertWarningBorder = $stateWarningBorder;

$alertDangerBackground = $stateDangerBackground;
$alertDangerText = $stateDangerText;
$alertDangerBorder = $stateDangerBorder;




// Tree
// -------------------------
$treeRowHoverBackground = $hoverBackground;
$treeRowSelectedBackground = #0088CC;
$treeRowSelectedColor = #fff;


// data Grid
// --------------------------------------------------

$gridBackground = $tableBackground;
$gridHeaderBackground = $grayLightest;
$gridBorder = $tableBorder;
$gridBorderRadius = $borderRadiusBase;
$gridRowEvenBackground = $white;
$gridRowOddBackground = $grayLightest;
$gridSelectedBackground = $grayLighter;
$gridSelectedColor = $black;
$gridHoverBackground = lighten($gridSelectedBackground, 15%);


// Accordions
// -------------------------
$accordionBorderColor = #e5e5e5;


// TitlePane
// -------------------------
$titlePaneBorderColor = $borderColor;



// Hr border color
// -------------------------
$hrBorder = $borderColor;


// Wells
// -------------------------
$wellBackground = $backgroundColor;
$wellBorder = darken($wellBackground, 7%);