// =============================================================================
// TYPE (Settings)
// =============================================================================


// Stencil Variables
// -----------------------------------------------------------------------------
//
// These scoped variables are created by BigCommerce.
// All variables that are not from Foundation should be placed here.
//
// 1. Choose whether to include the BigCommerce class names.
//
// -----------------------------------------------------------------------------

$exportCSS--type:               true; // 1

$html-fontSize:                 $fontSize-root;
$html-fontSize--smallUp:        $fontSize-root;
$html-fontSize--mediumUp:       $fontSize-root;
$html-fontSize--largeUp:        $fontSize-root;

$body-fontSize:                 fontSize("base");

$code-font-size:                null;

// Anchor tags
$anchor-transition:             color 0.15s ease;

// Blockquote vars
$blockquote-borderColor:        null;
$blockquote-borderStyle:        null;
$blockquote-borderWidth:        null;
$blockquote-fontSize:           fontSize("large");
$blockquote-fontWeight:         null;
$blockquote-lineHeight:         lineHeight("large");
$blockquote-margin:             null;

$blockquote-cite-content:       null;
$blockquote-cite-margin:        spacing("third") 0 0;
$blockquote-cite-lineHeight:    lineHeight("base");

// Headings
$heading-marginTop:             spacing("single") + spacing("half");
$heading-textTransform:         uppercase;



// Foundation Variables
// -----------------------------------------------------------------------------
//
// These variables come directly from:
// /vendor/foundation/foundation/components/*
// Declaring the variables here, you can adjust them all to your design,
// leaving the vendor framework untouched.
//
// -----------------------------------------------------------------------------

// We use these to define default font stacks
$font-family-sans-serif:        fontFamily("sans");
$font-family-serif:             fontFamily("serif");
$font-family-monospace:         fontFamily("mono");

// We use these to define default font weights
$font-weight-normal:            fontWeight("normal");
$font-weight-bold:              fontWeight("bold");

// We use these to control various global styles
$body-bg:                       stencilColor("body-bg");
$body-font-color:               stencilColor("color-textBase");
$body-font-family:              stencilFontFamily("body-font"), Arial, Helvetica, sans-serif;
$body-font-weight:              stencilFontWeight("body-font");
$body-font-style:               null;

// We use this to control font-smoothing
$font-smoothing:                antialiased;

// We use these to control header font styles
$header-font-family:            stencilFontFamily("headings-font"), Arial, Helvetica, sans-serif;
$header-font-weight:            stencilFontWeight("headings-font");
$header-font-style:             null;
$header-font-color:             stencilColor("color-textHeading");
$header-line-height:            null;
$header-top-margin:             spacing("double");
$header-bottom-margin:          spacing("half");
$header-text-rendering:         null;
$header-letter-spacing:         letterSpacing("small");

// We use these to control header font sizes
$h1-font-size:                  fontSize("largest");
$h2-font-size:                  fontSize("larger");
$h3-font-size:                  fontSize("large");
$h4-font-size:                  fontSize("small");
$h5-font-size:                  fontSize("smaller");
$h6-font-size:                  fontSize("smallest");


// These control how subheaders are styled.
$subheader-line-height:         lineHeight("small");
$subheader-font-color:          stencilColor("subheader-font-color");
$subheader-font-weight:         fontWeight("normal");
$subheader-bottom-margin:       spacing("half");

// A general <small> styling
$small-font-size:               60%;
$small-font-color:              stencilColor("color-textSecondary");

// We use these to style paragraphs
$paragraph-font-family:         null;
$paragraph-font-weight:         null;
$paragraph-font-size:           null;
$paragraph-line-height:         null;
$paragraph-margin-bottom:       spacing("single");
$paragraph-aside-font-size:     null;
$paragraph-aside-line-height:   null;
$paragraph-aside-font-style:    null;
$paragraph-text-rendering:      null;

// We use these to style <code> tags
$code-color:                    null;
$code-font-family:              null;
$code-font-weight:              null;
$code-background-color:         null;
$code-border-size:              null;
$code-border-style:             null;
$code-border-color:             null;
$code-padding:                  null;

// We use these to style anchors
$anchor-text-decoration:        underline;
$anchor-text-decoration-hover:  null;
$anchor-font-color:             color("link", "text");
$anchor-font-color-hover:       color("link", "text-hover");

// We use these to style the <hr> element
$hr-border-width:               container("borderSize");
$hr-border-style:               solid;
$hr-border-color:               container("borderColor");
$hr-margin:                     spacing("single") + spacing("third");

// We use these to style lists
$list-font-family:              null;
$list-font-size:                null;
$list-line-height:              null;
$list-margin-bottom:            spacing("single");
$list-style-position:           outside;
$list-side-margin:              1.15rem;
$list-ordered-side-margin:      1.15rem;
$list-side-margin-no-bullet:    0;
$list-nested-margin:            1.2rem;
$definition-list-header-weight: fontWeight("bold");
$definition-list-header-margin-bottom: spacing("quarter");
$definition-list-margin-bottom: spacing("single");

// We use these to style blockquotes
$blockquote-font-color:         null;
$blockquote-padding:            null;
$blockquote-border:             null;
$blockquote-cite-font-size:     fontSize("base");
$blockquote-cite-font-color:    stencilColor("blockquote-cite-font-color");
$blockquote-cite-link-color:    null;

// Acronym styles
$acronym-underline:             1px dotted color("greys", "lighter");

// We use these to control padding and margin
$microformat-padding:           null;
$microformat-margin:            null;

// We use these to control the border styles
$microformat-border-width:      null;
$microformat-border-style:      null;
$microformat-border-color:      null;

// We use these to control full name font styles
$microformat-fullname-font-weight:  null;
$microformat-fullname-font-size:    null;

// We use this to control the summary font styles
$microformat-summary-font-weight:   null;

// We use this to control abbr padding
$microformat-abbr-padding:          null;

// We use this to control abbr font styles
$microformat-abbr-font-weight:      null;
$microformat-abbr-font-decoration:  null;
