/* Global Variables
------------------------------------------------------- */

$base-spacing: 16px;
$base-spacing-large: $base-spacing*2;
$base-spacing-small: $base-spacing/2;
$border-radius: 4px;

// bottom margin for special clearfix (for example: applied to form select elements)

$cfxmb-bottom-margin: 1rem;

// link transition
$transition-time: 0.25s;

/* Typography Variables
------------------------------------------------------- */

/*
Typekit (for instance)
body: ff-tisa-web-pro 400 / 400  italic
heads: futura-pt 400 / 500 / 500 italic
*/

$sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
$serif: Georgia, Times, "Times New Roman", serif;
$alt-font: Monaco, Menlo, Consolas, "Courier New", monospace;

$base-font-family: $serif;

/*
Include the variable $base-font-size-n (base font size number), 
so we can include the same number in our font-size mixin as is in the $base-font-size variable
*/

$base-font-size: 18px;
$base-font-size-n: 18;
$base-line-height: 1.5em;

$heading-font-family: $sans;
$heading-font-weight: 700;

/* Color Variables
------------------------------------------------------- */

$page-background: #fff;

$base-text-color: #333;
$heading-color: #333;

$base-color-1: #111;
$base-color-2: #222;
$base-color-3: #333;

// Background colors
$background-color-1: #111;
$background-color-2: #222;
$background-color-3: #333;
$background-color-4: #444;
$background-color-5: #555;
$background-color-6: #666;

// Light text colors
$light-text-color-1: #fff;
$light-text-color-2: #f9f9f9;
$light-text-color-3: #f1f1f1;

$link-color: purple;
$link-color-hover: darken($link-color, 25%);

$important: red;
$success: green;
$warning: orange;

$blockquote-left-border: #999;

/* Generic
------------------------------------------------------- */
// generic.normalize.scss
// generic.box-sizing.scss

/* Base
------------------------------------------------------- */
// base.page.scss
// base.images.scss
// base.links.scss
// base.type.scss

/* Modules - generic
------------------------------------------------------- */

// modules.alerts.scss
// modules.forms.scss

$label-color: $base-text-color;
$label-margin: 0 0 0.5rem 0;
$label-font-size: 1rem;
$label-line-height: 1em;
$label-error-color: red;

$placeholder-color: $base-text-color;
$placeholder-margin: 0!important;
$placeholder-padding: 0!important;
$placeholder-font-size: 1rem!important;
$placeholder-line-height: 1em!important;

$input-background-color: white;
$input-border: 1px solid #000; 
$input-font-family: $sans; 
$input-color: #000;
$input-font-size: 1rem;
$input-line-height: 1em;
$input-margin: 0 0 1rem 0;
$input-padding: 0.5rem;
$input-width: 100%;

$textarea-line-height: 1.35em;

$input-border-hover: 1px solid blue; 
$input-border-focus: 1px solid orange; 

$input-radius: 5px; 
$input-rounded: 20px; 

// file, checkboxes, radio buttons

$input-check-margins: 0 5px 0 0; 

$select-background-color: white; 
$select-border: 1px solid #000; 
$select-color: #000; 
$select-font-family: $sans; 
$select-font-size: 1rem;
$select-line-height: 1em;
$select-margin: 0 0 1rem 0;
$select-padding: 0.5rem;
$select-width: 100%;

$fieldset-border: 1px solid #000;
$fieldset-margin: 0 0 1rem 0; 
$fieldset-padding: 1rem; 

$fieldset-background-color: white; 
$fieldset-legend-margin: 0; 
$fieldset-legend-padding: 0 1rem; 
$fieldset-legend-font-family: $sans; 
$fieldset-font-weight: bold;

// modules.buttons.scss 

$button-padding: var;
$button-big-padding: var;

// modules.tables.scss

/* Modules - layout (grid)
------------------------------------------------------- */

// Grid
// Setting container-max-width at 100% allows for edge-to-edge layout 
// (and edge-to-edge background color even when a wrap is used)
// The (optional) wrap sets a max content width

// |-------------------- screen --------------------|
// |--p--|------------ container -------------|--p--|
// |----------|---------- wrap ----------|----------|

$container-max-width: 100%;
$container-pad: 0 40px;
$container-pad-mobile: 0 10px;
$wrap-max-width: 1200px;
$wrap-min-width: 100px;

// modules.layout.scss

$pad: var;
$pad-small: var;
$pad-big: var;

/* Modules - navigation
------------------------------------------------------- */

// modules.nav-global.scss

$nav-global-font: $sans; 
$nav-global-font-size: 1rem; 
$nav-global-line-height: 1em; 
$nav-global-float: right; 

// modules.nav-main.scss

$nav-holder-bg: #666; // the container bg
$nav-button-pad: 1rem; 
$nav-mobile-button-pad: 1rem;
$nav-bg: #666; 
$nav-bg-hover: #999; 
$nav-color: #fff; 
$nav-color-hover: #fff; 
$nav-border-color: #ccc; 
$brand-pad: 40px 0;
$brand-bg: #ccc;

// modules.nav-utility.scss

$utility-nav-holder-bg: #333; // the container bg
$utility-nav-bg: #333; 
$utility-nav-color: #ccc; 
$utility-nav-pad: 1rem;
$utility-search-button-pad: 10px; 
$utility-nav-hover: #fff; 
$utility-nav-bg-hover: #999; 

// modules.nav-utility.scss (search bar)

$navbar-search-holder-pad: 0.7rem 0 0 0; // tweak this so the top/bottom padding fits with $utility-nav-pad
$navbar-search-margin-left: 1rem;
$navbar-search-form-width: 200px; 
$navbar-search-pad: 9px 20px 6px 40px; 
$navbar-search-bg-left: 15px; // icon placement
$navbar-search-bg-top: 8px; // icon placement
$navbar-search-bg-color: #ddd; 
$navbar-search-bg-color-hover: white; 
$navbar-search-bg-color-focus: white; 
$navbar-search-font-size: 14px; 
$navbar-search-line-height: 14px;

// modules.nav-mobile.scss

/* Modules - Add-ons
------------------------------------------------------- */
// modules.responsiveslides.scss
// modules.accordions.scss

/* Customizations
------------------------------------------------------- */
// custom.scss

/* Media
------------------------------------------------------- */
// media.print.scss

/* Responsive Breakoints
------------------------------------------------------- */

$break-xs: 480px;
$break-sm: 768px;
$break-md: 992px;
$break-lg: 1200px;

// -------------------------------------------------------