$baseFontSize: 14px !default;

$fontSizeLarge: ceil($baseFontSize * 1.25);

$baseLineHeight:        1.428571429; // 20/14
$baseLineHeightComputed:    floor($baseFontSize * $baseLineHeight); // ~20px
$baseBorderRadius:      2px !default;


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


// Accent colors
// -------------------------
$blue:                  #049cdb !default;
$blueDark:              #0064cd !default;
$green:                 #46a546 !default;
$red:                   #9d261d !default;
$yellow:                #ffc40d !default;
$orange:                #f89406 !default;
$pink:                  #c3325f !default;
$purple:                #7a43b6 !default;


// Content stuff
// -------------------------
$contentPadding: 10px;


// Bar stuff
// -------------------------
$barHeight: 44px !default;
$barLineHeight: 44px !default;
$barTitleFontSize: $fontSizeLarge;
$barTitleLineHeightComputed: 26px;//$barHeight - 2;
$barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2);
$barPaddingPortrait: 8px;
$barPaddingLandscape : 5px;


// Forms
// -------------------------
$inputBackground:               $white !default;
$inputBorder:                   #ccc !default;
$inputBorderRadius:             4px !default;
$inputDisabledBackground:       $grayLighter !default;
$formActionsBackground:         #f5f5f5 !default;
$inputHeight:                   $baseFontSize + 10px; // base line-height + 8px vertical padding + 2px top/bottom border


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


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


// Lists
// -------------------------
$listItemBorder: 1px solid #ddd;


// Panels
// -------------------------
$panelOpenWidth: 270px;
$panelAnimationSpeed: 200ms;



// 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;