@import "compass";
@import "susy";

@include global-reset;
@include reset-html5;

// border-box-sizing()
@include border-box-sizing;

// Settings --------------------------------------------------------------
$responsive-embeds-default-ratio : 1 !default;

$tagsHeight                      : 26px;
$tagsDefaultColor                : #eb6b22;

// Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that off:
$legacy-support-for-ie6          : false;
// $legacy-support-for-ie7       : true;

$experimental-support-for-opera  : false;
$experimental-support-for-khtml  : false;

// Grid -------------------------------------------------------------------
$total-columns                   : 7;              // a 7-column grid
$column-width                    : 60px;           // each column is 4em wide
$gutter-width                    : 20px;           // 1em gutters between columns
$grid-padding                    : 10px;           // grid-padding equal to gutters
$break                           : 12;             // a 12-column grid

// Typography -------------------------------------------------------------
$sans-serif                      : "Helvetica Neue", Helvetica, sans-serif;
$serif                           : Georgia, Times, "Times New Roman", serif;
$monospace                       : "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace;

// Vertical Ryhthm --------------------------------------------------------
$base-font-size                  : 16px;           // Font-size of your body copy.
$base-line-height                : 12px;           // Setting the base-line-height half.
$relative-font-sizing            : true;           // Set to false if you want to use absolute pixels in sizing your typography.

$fs-h1                           : 40px;
$fs-h2                           : 35px;
$fs-h3                           : 32px;
$fs-h4                           : 28px;
$fs-h5                           : 24px;
$fs-h6                           : 12px;

// Colors ------------------------------------------------------------------
$white                           : #fff;
$black                           : #252525;

$brand-color                     : #3b5998;
$action-color                    : #67a54b;
$function-color                  : #f2f2f2;
$alert-color                     : #b22727;

$brand-color-light               : lighten( $brand-color, 10% );
$brand-color-lighter             : lighten( $brand-color, 20% );
$brand-color-dark                : darken( $brand-color, 15% );
$brand-color-darker              : darken( $brand-color, 25% );

$action-color-light              : lighten( $action-color, 10% );
$action-color-lighter            : lighten( $action-color, 20% );
$action-color-dark               : darken( $action-color, 15% );
$action-color-darker             : darken( $action-color, 25% );

$function-color-light            : lighten( $function-color, 10% );
$function-color-lighter          : lighten( $function-color, 20% );
$function-color-dark             : darken( $function-color, 15% );
$function-color-darker           : darken( $function-color, 25% );

$alert-color-light               : lighten( $alert-color, 10% );
$alert-color-lighter             : lighten( $alert-color, 20% );
$alert-color-dark                : darken( $alert-color, 15% );
$alert-color-darker              : darken( $alert-color, 25% );