// The role of the config sass file is two fold. Adjust !defaults as set in lower level modules
// and to set theme variables.

// Typically, commented out variables signify a !default setting at a
// lower level module.



// CSS3 defaults
// *-------------------------------------------------------------------------------
// $default-box-sizing: border-box;


/////// Typography configuration
// *-------------------------------------------------------------------------------
$font-size: 12;

$heading-1: 46;
$heading-2: 32;
$heading-3: 28;
$heading-4: 18;
$heading-5: 18;
$heading-6: 18;

$line: $font-size * 1.5;
$small-point-size: 10;
$large-point-size: 14;

$primary-font-family: #{"Helvetica Neue", Arial, sans-serif};
$secondary-font-family: #{"Helvetica Neue", Arial, sans-serif};
$heading-font-family: #{"Helvetica Neue", Arial, sans-serif};


/////// Default webfont directory
// *-------------------------------------------------------------------------------
$fontDir: "fonts/";

/////// Default image directory
// *-------------------------------------------------------------------------------
$imgDir: "images/";

/////// OOCSS generic base colors
// *-------------------------------------------------------------------------------
$alpha-primary:   #5a2e2e;        // red
$bravo-primary:   #3e4147;        // green
$charlie-primary: #fffedf;        // yellow
$delta-primary:   #2a2c31;        // blue
$echo-primary:    #dfba69;        // accent

$alpha-gray:      #333;           //black

/////// Color math
// *-------------------------------------------------------------------------------
@import "color-scale";


/////// Semantic variables
// *-------------------------------------------------------------------------------
// abstract 'white' value to easily applied to semantic class objects
$white:                                #fff;

// primary header font color
$primary-header-color:                 $alpha-gray;

// default heading font weight
$heading-font-weight:                  normal;

// primary font color for the app
$primary-text:                         $alpha-gray;

// default `href` link color
$href-color:                           $delta-color;

// default shadow colors
$shadow-color:                         fade-out($alpha-color, 0.5);

// default border color
$border-color:                         $alpha-color;



/////// HTML 5 feature colors
// *-------------------------------------------------------------------------------
// used with the `ins` tag
// http://www.w3schools.com/tags/tag_ins.asp
$ins-color:                            $charlie-color;

// used with the `mark` tag
// http://www.w3schools.com/html5/tag-mark.asp
$mark-color:                           $charlie-color;

// webkit tap highlight color
$webkit-tap-hightlight:                $delta-color;

// overrides the default content selection color in the browser
$selection-color:                      $charlie-color;
$selection-text-color:                 $primary-text;


/////// @media breakpoint defaults
// *-------------------------------------------------------------------------------
$tablet:                    "screen and (max-width: 64em)";
$tablet-portrait:           "screen and (max-width: 50em) and (orientation: portrait)";
$tablet-landscape:          "screen and (max-width: 50em) and (orientation: landscape)";

$mobile:                    "screen and (max-width: 30em)";
$mobile-portrait:           "screen and (max-width: 30em) and (orientation : portrait)";
$mobile-landscape:          "screen and (max-width: 30em) and (orientation : landscape)";
