/* Base */
/* ---- */

$lineHeightToSizeRatio: 20/14;

$baseFontFamily:  "Helvetica Neue", Helvetica, Arial, sans-serif;
$baseFontSize:    14px;
$baseLineHeight:  $baseFontSize * $lineHeightToSizeRatio;

$fontSize0: ($baseFontSize * 0.85);    /* ~12px */
$fontSize1: $baseFontSize;             /*  14px */
$fontSize2: ($baseFontSize * 1.25);    /* ~18px */
$fontSize3: ($baseFontSize * 1.75);    /* ~24px */

$lineHeight0: ($baseLineHeight * 0.75); /* 15px */;
$lineHeight1: $baseLineHeight;          /* 20px */
$lineHeight2: ($baseLineHeight * 1.25); /* 25px */
$lineHeight3: ($baseLineHeight * 1.50); /* 30px */

$imgHeight0: $lineHeight0 * 0.8; /* 12px */;
$imgHeight1: $lineHeight1 * 0.8; /* 16px */
$imgHeight2: $lineHeight2 * 0.8; /* 20px */
$imgHeight3: $lineHeight3 * 0.8; /* 24px */

$spacingSize1: $baseLineHeight / 2;
$spacingSize0: $spacingSize1 * 0.35;
$spacingSize2: $spacingSize1 * 2;

$inputHeight: ($baseLineHeight / 2) * 3; /* 30px */
$inputFilterHeight: $baseLineHeight;     /* 20px */

$inputSize1: 220px;
$inputSize0: $inputSize1 - 120px;
$inputSize2: $inputSize1 + 120px;

$notAllowedCursor: not-allowed;

/* colors */

$baseColor:     #444;
$altColor:      #444;
$inverseColor:  #fff;
$disabledColor: #999;

$baseBgColor:     #fff;
$altBgColor:      #ececec;
$inverseBgColor:  #333;
$disabledBgColor: #f9f9f9;
$stripedBgColor:  #fafafa;
$bgColorHover:    #f5f5f5;

$baseBorderColor:    #ccc;
$altBorderColor:     #fff;
$inverseBorderColor: #000;

$darkRed:      #ce040d;
$red:          #ee4136;
$lightRed:     #ff725c;
$pastelRed:    #ffdfdf;
$darkOrange:   #ff6300;
$orange:       #ffa700;
$yellow:       #ffde37;
$pastelYellow: #fbf5d5;
$purple:       #5e2ca5;
$lightPurple:  #a463f2;
$darkPink:     #d5008f;
$hotPink:      #ff41b4;
$pink:         #ff8fd2;
$darkGreen:    #137752;
$green:        #51a351;
$lightGreen:   #9eebcf;
$pastelGreen:  #dff0d8;
$navy:         #001b44;
$darkBlue:     #00449e;
$blue:         #357edd;
$lightBlue:    #96ccff;
$pastelBlue:   #d9edf7;

/* basics colors */

$linkColor:      $blue;
$linkColorHover: darken($linkColor, 15%);

$inputBgColor:          $baseBgColor;
$inputColor:            $baseColor;
$inputDisabledColor:    $altBgColor;
$inputFocusColor:       rgba(82, 168, 236, 0.8);
$inputHighlightBgColor: $blue;

$tabBgColor:       $altBgColor;
$tabBgColorHover:  darken($altBgColor, 5%);
$tabBgColorActive: $inverseBgColor;
$tabColor:         $baseColor;
$tabColorActive:   $inverseColor;
$tabColorDisabled: $disabledColor;

$tooltipBgColor:   $inverseBgColor;
$tooltipColor:     $inverseColor;

$btnBorder:         $baseBorderColor;
$btnBg:             darken($baseBgColor, 3%);
$btnBgHover:        darken($btnBg, 10%);
$btnColor:          $baseColor;
$btnColorHover:     #333;

$btnAltBg:          darken($altBgColor, 4%);
$btnAltBgHover:     darken($btnAltBg, 10%);
$btnAltColor:       $btnColor;

$baseText:         $baseColor;
$baseTextHover:    $baseText;
$baseBg:           $baseBgColor;
$baseBgHover:      $baseBg;
$baseBorder:       $baseBorderColor;

$altText:          $altColor;
$altTextHover:     $altColor;
$altBg:            $altBgColor;
$altBgHover:       $altBg;
$altBorder:        $altBorderColor;

$mutedText:        $disabledColor;
$mutedTextHover:   darken($mutedText, 10%);
$mutedBg:          $disabledBgColor;
$mutedBgHover:     darken($mutedBg, 5%);
$mutedBorder:      darken(adjust_hue($mutedBg, -10), 7%);

/* emphasis colors */

$btnWarningBg:      $orange;
$btnWarningBgHover: darken($btnWarningBg, 5%);
$btnWarningColor:   $inverseColor;

$btnDangerBg:       $red;
$btnDangerBgHover:  darken($btnDangerBg, 10%);
$btnDangerColor:    $inverseColor;

$btnInfoBg:         $blue;
$btnInfoBgHover:    darken($btnInfoBg, 10%);
$btnInfoColor:      $inverseColor;

$btnSuccessBg:      $green;
$btnSuccessBgHover: darken($btnSuccessBg, 10%);
$btnSuccessColor:   $inverseColor;

$btnInverseBg:      $inverseBgColor;
$btnInverseBgHover: darken($btnInverseBg, 10%);
$btnInverseColor:   $inverseColor;

$warningText:      darken($orange, 5%);
$warningTextHover: darken($warningText, 10%);
$warningBg:        $pastelYellow;
$warningBgHover:   darken($warningBg, 5%);
$warningBorder:    darken(adjust_hue($warningBg, -10), 7%);

$dangerText:       darken($red, 5%);
$dangerTextHover:  darken($dangerText, 10%);
$dangerBg:         $pastelRed;
$dangerBgHover:    darken($dangerBg, 5%);
$dangerBorder:     darken(adjust_hue($dangerBg, -10), 7%);

$infoText:         darken($blue, 5%);
$infoTextHover:    darken($infoText, 10%);
$infoBg:           $pastelBlue;
$infoBgHover:      darken($infoBg, 5%);
$infoBorder:       darken(adjust_hue($infoBg, -10), 7%);

$successText:      darken($green, 5%);
$successTextHover: darken($successText, 10%);
$successBg:        $pastelGreen;
$successBgHover:   darken($successBg, 5%);
$successBorder:    darken(adjust_hue($successBg, -10), 7%);

$inverseText:      $inverseColor;
$inverseTextHover: darken($inverseText, 10%);
$inverseBg:        $inverseBgColor;
$inverseBgHover:   darken($inverseBg, 5%);
$inverseBorder:    darken(adjust_hue($inverseBg, -10), 7%);

/* explicit colors */

$darkRedTextHover:      darken($darkRed, 10%);
$darkRedBgHover:        darken($darkRed, 5%);
$redTextHover:          darken($red, 10%);
$redBgHover:            darken($red, 5%);
$lightRedTextHover:     darken($lightRed, 10%);
$lightRedBgHover:       darken($lightRed, 5%);
$pastelRedTextHover:    darken($pastelRed, 10%);
$pastelRedBgHover:      darken($pastelRed, 5%);
$darkOrangeTextHover:   darken($darkOrange, 10%);
$darkOrangeBgHover:     darken($darkOrange, 5%);
$orangeTextHover:       darken($orange, 10%);
$orangeBgHover:         darken($orange, 5%);
$yellowTextHover:       darken($yellow, 10%);
$yellowBgHover:         darken($yellow, 10%);
$pastelYellowTextHover: darken($pastelYellow, 10%);
$pastelYellowBgHover:   darken($pastelYellow, 5%);
$purpleTextHover:       darken($purple, 10%);
$purpleBgHover:         darken($purple, 5%);
$lightPurpleTextHover:  darken($lightPurple, 10%);
$lightPurpleBgHover:    darken($lightPurple, 5%);
$darkPinkTextHover:     darken($darkPink, 10%);
$darkPinkBgHover:       darken($darkPink, 5%);
$hotPinkTextHover:      darken($hotPink, 10%);
$hotPinkBgHover:        darken($hotPink, 5%);
$pinkTextHover:         darken($pink, 10%);
$pinkBgHover:           darken($pink, 5%);
$darkGreenTextHover:    darken($darkGreen, 10%);
$darkGreenBgHover:      darken($darkGreen, 5%);
$greenTextHover:        darken($green, 10%);
$greenBgHover:          darken($green, 5%);
$lightGreenTextHover:   darken($lightGreen, 10%);
$lightGreenBgHover:     darken($lightGreen, 5%);
$pastelGreenTextHover:  darken($pastelGreen, 10%);
$pastelGreenBgHover:    darken($pastelGreen, 5%);
$navyTextHover:         darken($navy, 10%);
$navyBgHover:           darken($navy, 5%);
$darkBlueTextHover:     darken($darkBlue, 10%);
$darkBlueBgHover:       darken($darkBlue, 5%);
$blueTextHover:         darken($blue, 10%);
$blueBgHover:           darken($blue, 5%);
$lightBlueTextHover:    darken($lightBlue, 10%);
$lightBlueBgHover:      darken($lightBlue, 5%);
$pastelBlueTextHover:   darken($pastelBlue, 10%);
$pastelBlueBgHover:     darken($pastelBlue, 5%);


$btnDarkRedBg:           $darkRed;
$btnDarkRedBgHover:      $darkRedBgHover;
$btnDarkRedColor:        $inverseColor;

$btnRedBg:               $red;
$btnRedBgHover:          $redBgHover;
$btnRedColor:            $inverseColor;

$btnLightRedBg:          $lightRed;
$btnLightRedBgHover:     $lightRedBgHover;
$btnLightRedColor:       $inverseColor;

$btnPastelRedBg:         $pastelRed;
$btnPastelRedBgHover:    $pastelRedBgHover;
$btnPastelRedColor:      $baseColor;

$btnDarkOrangeBg:        $darkOrange;
$btnDarkOrangeBgHover:   $darkOrangeBgHover;
$btnDarkOrangeColor:     $inverseColor;

$btnOrangeBg:            $orange;
$btnOrangeBgHover:       $orangeBgHover;
$btnOrangeColor:         $inverseColor;

$btnYellowBg:            $yellow;
$btnYellowBgHover:       $yellowBgHover;
$btnYellowColor:         $baseColor;

$btnPastelYellowBg:      $pastelYellow;
$btnPastelYellowBgHover: $pastelYellowBgHover;
$btnPastelYellowColor:   $baseColor;

$btnPurpleBg:            $purple;
$btnPurpleBgHover:       $purpleBgHover;
$btnPurpleColor:         $inverseColor;

$btnLightPurpleBg:       $lightPurple;
$btnLightPurpleBgHover:  $lightPurpleBgHover;
$btnLightPurpleColor:    $inverseColor;

$btnDarkPinkBg:          $darkPink;
$btnDarkPinkBgHover:     $darkPinkBgHover;
$btnDarkPinkColor:       $inverseColor;

$btnHotPinkBg:           $hotPink;
$btnHotPinkBgHover:      $hotPinkBgHover;
$btnHotPinkColor:        $inverseColor;

$btnPinkBg:              $pink;
$btnPinkBgHover:         $pinkBgHover;
$btnPinkColor:           $inverseColor;

$btnDarkGreenBg:         $darkGreen;
$btnDarkGreenBgHover:    $darkGreenBgHover;
$btnDarkGreenColor:      $inverseColor;

$btnGreenBg:             $green;
$btnGreenBgHover:        $greenBgHover;
$btnGreenColor:          $inverseColor;

$btnLightGreenBg:        $lightGreen;
$btnLightGreenBgHover:   $lightGreenBgHover;
$btnLightGreenColor:     $baseColor;

$btnPastelGreenBg:       $pastelGreen;
$btnPastelGreenBgHover:  $pastelGreenBgHover;
$btnPastelGreenColor:    $baseColor;

$btnNavyBg:              $navy;
$btnNavyBgHover:         $navyBgHover;
$btnNavyColor:           $inverseColor;

$btnDarkBlueBg:          $darkBlue;
$btnDarkBlueBgHover:     $darkBlueBgHover;
$btnDarkBlueColor:       $inverseColor;

$btnBlueBg:              $blue;
$btnBlueBgHover:         $blueBgHover;
$btnBlueColor:           $inverseColor;

$btnLightBlueBg:         $lightBlue;
$btnLightBlueBgHover:    $lightBlueBgHover;
$btnLightBlueColor:      $inverseColor;

$btnPastelBlueBg:        $pastelBlue;
$btnPastelBlueBgHover:   $pastelBlueBgHover;
$btnPastelBlueColor:     $baseColor;

/* borders */

$borderSize1: 1px;
$borderSize0: $borderSize1 * 1;
$borderSize2: $borderSize1 * 2;

$borderRadius1: 4px;
$borderRadius0: 2px;
$borderRadius2: 6px;

/* tabs */

$tabDividerSize: 4px;

/* z-index */

$tooltipZIndex:  1100;
$dropdownZIndex: 1200;
// 1300 is reserved for app specific things like nav bars, etc
// modals should appear on top of everything though
$modalZIndex:    1400;