$primary-color: #000;
$secondary-color: hotpink;
$alert-color: #c60f12; // Used by error page
$success-color: #48b07a;
$warning-color: #f08a24;
$info-color: #a0d3e8;
$body-bg: #ffffff;
$js-body-font-color: #333;
$js-buy-trail-color: #fd9e2f;
$js-price-discount-color: #c60f12;
$js-primary-link-color: $primary-color;
$js-primary-link-hover-color: darken($js-primary-link-color,20);
$js-header-background-color: #eef1f2;
$button-bg-color: $primary-color; // This is a Foundation setting
////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Main areas and layout
//
$js-min-page-width: 320px;
$js-max-page-width: 1200px;
$js-left-area-width: 20%;
$js-left-area-padding-right: 20px;
$js-main-area-width-2-col: 80%;
$js-main-area-width-3-col: 60%;
$js-right-area-width: 20%;
$js-page-padding-left: 20px;
$js-page-padding-right: 20px;
$js-main-area-padding-left: 20px;
$js-main-area-padding-right: 20px;
$js-standard-page-max-width: 920px;
//
// Logo
//
$js-logo-wrapper-max-width: 206px; // Actual file-width divided by 2;
$js-logo-wrapper-margin: 18px 20px 18px $js-page-padding-left;
$js-logo-wrapper-margin-medium: 18px 20px 18px $js-page-padding-left;
$js-logo-wrapper-margin-small: 18px 0; // Centered logo on small
//
// Fonts & Typography
//
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: "Merriweather", Georgia, Cambria, "Times New Roman", Times, serif;
$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
$font-family-description: "Merriweather", Georgia, Cambria, "Times New Roman", Times, serif;
$font-family-header: $font-family-sans-serif;
// Controller for fonts
$body-font-family: $font-family-sans-serif;
$paragraph-font-family: $font-family-sans-serif;
$button-font-family: $font-family-sans-serif;
$js-description-font-family: $font-family-serif;
$font-transform-header: uppercase;
$font-weight-normal: normal;
$font-weight-bold: bold;
$js-body-font-size: 14px; // Has to be PX, used in calculations
$js-description-font-size: 1.1em;
// We use these to control header font styles
$header-font-family: $font-family-header;
$header-font-weight: $font-weight-bold;
$header-font-style: normal;
$header-font-color: grey-scale(16);
$header-line-height: 1.4;
$header-top-margin: .2rem;
$header-bottom-margin: .5rem;
$header-text-rendering: optimizeLegibility;
// We use these to control header font sizes
$h1-font-size: rem-calc(28);
$h2-font-size: rem-calc(24);
$h3-font-size: rem-calc(20);
$h4-font-size: rem-calc(16);
$h5-font-size: rem-calc(14);
$h6-font-size: 1rem;
// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(5);
$h2-font-reduction: rem-calc(5);
$h3-font-reduction: rem-calc(5);
$h4-font-reduction: rem-calc(5);
$h5-font-reduction: 0;
$h6-font-reduction: 0;
// We use these to style paragraphs
$paragraph-font-weight: $font-weight-normal;
$paragraph-font-size: 0.875rem; // 14px
$paragraph-line-height: 1.6;
$paragraph-margin-bottom: rem-calc(12);
$paragraph-aside-font-size: rem-calc(14);
$paragraph-aside-line-height: 1.35;
$paragraph-aside-font-style: italic;
$paragraph-text-rendering: optimizeLegibility;
// We use these to style anchors
$anchor-text-decoration: none;
$anchor-text-decoration-hover: none;
$anchor-font-color: $js-primary-link-color;
$anchor-font-color-hover: $js-primary-link-hover-color;
// These control how subheaders are styled.
$subheader-line-height: 1.4;
$subheader-font-color: scale-color($header-font-color, $lightness: 35%);
$subheader-font-weight: $font-weight-normal;
$subheader-top-margin: .2rem;
$subheader-bottom-margin: .5rem;