// We use these to define default font stacks
$brand-font-folder: '~@momentum-ui/core/fonts' !default;
$font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;

$brand-font-bold: 'CiscoSansTT Bold', $font-family-sans-serif;
$brand-font-bold-oblique: 'CiscoSansTT Bold Oblique', $font-family-sans-serif;
$brand-font-extra-light: 'CiscoSansTT Extra Light', $font-family-sans-serif;
$brand-font-extra-light-oblique: 'CiscoSansTT Extra Light Oblique',
  $font-family-sans-serif;
$brand-font-heavy: 'CiscoSansTT Heavy', $font-family-sans-serif;
$brand-font-heavy-oblique: 'CiscoSansTT Heavy Oblique', $font-family-sans-serif;
$brand-font-light: 'CiscoSansTT Light', $font-family-sans-serif;
$brand-font-light-Oblique: 'CiscoSansTT Light Oblique', $font-family-sans-serif;
$brand-font-regular: 'CiscoSansTT Regular', $font-family-sans-serif;
$brand-font-regular-oblique: 'CiscoSansTT Regular Oblique',
  $font-family-sans-serif;
$brand-font-thin: 'CiscoSansTT Thin', $font-family-sans-serif;
$brand-font-thin-oblique: 'CiscoSansTT Thin Oblique', $font-family-sans-serif;

$brand-font-medium: 'CiscoSans-Medium', $font-family-sans-serif;

$body-font-family: $brand-font-regular;

// TODO: Replace variables in app.
$brand-font-cisco-TT-Bold: $brand-font-bold;
$brand-font-cisco-TT-Bold-Oblique: $brand-font-bold-oblique;
$brand-font-cisco-TT-Extra-Light: $brand-font-extra-light;
$brand-font-cisco-TT-Extra-Light-Oblique: $brand-font-extra-light-oblique;
$brand-font-cisco-TT-Heavy: $brand-font-heavy;
$brand-font-cisco-TT-Heavy-Oblique: $brand-font-heavy-oblique;
$brand-font-cisco-TT-Light: $brand-font-light;
$brand-font-cisco-TT-Light-Oblique: $brand-font-light-Oblique;
$brand-font-cisco-TT-Regular: $brand-font-regular;
$brand-font-cisco-TT-Regular-Oblique: $brand-font-regular-oblique;
$brand-font-cisco-TT-Thin: $brand-font-thin;
$brand-font-cisco-TT-Thin-Oblique: $brand-font-thin-oblique;

$font-size-base: 14px;
$font-size-large: ceil($font-size-base * 1.1);

// ~16px
$font-size-small: ceil($font-size-base * 0.85);

// ~12px

$font-size-h1: floor($font-size-base * 2.9);

// ~40px
$font-size-h2: floor($font-size-base * 2.3);

// ~32px
$font-size-h3: ceil($font-size-base * 1.7);

// ~24px
$font-size-h4: ceil($font-size-base * 1.25);

// ~18px
$font-size-h5: $font-size-base;
$font-size-h6: ceil($font-size-base * 0.85);
$line-height-base: 1.428571429; // 20/14
$line-height-computed: floor(($font-size-base * $line-height-base));

// We use these to define default font weights
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;
$font-color-primary: $md-gray-90;

$text-color: $md-gray-70;

// We use these to control header font styles
$header-font-family: $body-font-family !default;
$header-font-weight: $font-weight-normal !default;
$header-font-style: normal !default;
$header-font-color: $md-gray-70 !default;

$header-line-height: 1.4 !default;
$header-top-margin: 0.2rem !default;
$header-bottom-margin: 0.5rem !default;
$header-text-rendering: optimizeLegibility !default;

// We use these to control header font sizes
$title-heading-font-size: rem-calc(62) !default;
$h1-font-size: rem-calc(48) !default;
$h2-font-size: rem-calc(36) !default;
$h3-font-size: rem-calc(26) !default;
$h4-font-size: rem-calc(20) !default;
$h5-font-size: rem-calc(16) !default;
$h6-font-size: rem-calc(14) !default;

// We use these to control header size reduction on small screens
$h1-font-reduction: 0 !default;
$h2-font-reduction: 0 !default;
$h3-font-reduction: 0 !default;
$h4-font-reduction: 0 !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

$base-font-size: $rem-base;

// These control how subheaders are styled.
$subheader-line-height: 1.4 !default;
$subheader-font-color: scale-color(
  $header-font-color,
  $lightness: 35%
) !default;
$subheader-font-weight: $font-weight-normal !default;
$subheader-top-margin: 0.2rem !default;
$subheader-bottom-margin: 0.5rem !default;

// A general <small> styling
$small-font-size: 0.875 !default;

$small-font-color: scale-color($header-font-color, $lightness: 35%) !default;

// We use these to style paragraphs
$paragraph-font-family: inherit !default;
$paragraph-font-weight: $font-weight-normal !default;
$paragraph-font-size: rem-calc(14) !default;

$paragraph-line-height: 1.6 !default;
$paragraph-margin-bottom: rem-calc(20) !default;
$paragraph-aside-font-size: rem-calc(14) !default;
$paragraph-aside-line-height: 1.35 !default;
$paragraph-aside-font-style: italic !default;
$paragraph-text-rendering: optimizeLegibility !default;

// body-small/est styling
$body-small-font-size: rem-calc(12) !default;
$body-smallest-font-size: rem-calc(10) !default;

$lead-font-size: rem-calc(14) !default;

// We use these to style <code> tags
$code-color: $md-gray-90 !default;
$code-font-family: $font-family-monospace !default;
$code-font-weight: $font-weight-normal !default;
$code-background-color: transparent !default;

//scale-color($md-gray-70, $lightness: 70%) !default;
$code-border-size: 0px !default;

$code-border-style: solid !default;
$code-border-color: scale-color(
  $code-background-color,
  $lightness: -10%
) !default;
$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;

// We use these to style anchors
$anchor-text-decoration: none !default;
$anchor-text-decoration-hover: none !default;
$anchor-font-color: $md-theme-60 !default;
$anchor-font-color-hover: $md-theme-70 !default;

// We use these to style the <hr> element
$hr-border-width: 1px !default;
$hr-border-style: solid !default;
$hr-border-color: $md-gray-20 !default;
$hr-margin: rem-calc(20) !default;

// We use these to style lists
$list-font-family: $paragraph-font-family !default;
$list-font-size: $paragraph-font-size !default;
$list-line-height: $paragraph-line-height !default;
$list-margin-bottom: $paragraph-margin-bottom !default;
$list-style-position: outside !default;
$list-side-margin: 1rem !default;
$list-ordered-side-margin: 1.5rem !default;

$list-side-margin-no-bullet: 0 !default;
$list-nested-margin: rem-calc(20) !default;
$definition-list-header-weight: $font-weight-bold !default;
$definition-list-header-margin-bottom: 0.3rem !default;
$definition-list-margin-bottom: rem-calc(12) !default;

// We use these to style blockquotes
$blockquote-font-color: inherit !default;
$blockquote-padding: rem-calc(9 20 0 19) !default;
$blockquote-border-width: 4px !default;
$blockquote-padding: 0.5rem 1rem calc(0.25rem + #{$blockquote-border-width})
  1rem !default;
$blockquote-border: $blockquote-border-width solid !default;
$blockquote-border-color: $md-gray-50 !default;

$blockquote-cite-font-size: rem-calc(13) !default;
$blockquote-cite-font-color: inherit !default;
$blockquote-cite-link-color: $blockquote-cite-font-color !default;

// Acronym styles
$acronym-underline: 1px dotted $md-gray-20 !default;

// line height (px) divided by font-size
$title-heading-line-height: rem-calc(80) / $title-heading-font-size !default;
$h1-line-height: rem-calc(64) / $h1-font-size !default;
$h2-line-height: rem-calc(48) / $h2-font-size !default;
$h3-line-height: rem-calc(32) / $h3-font-size !default;
$h4-line-height: rem-calc(32) / $h4-font-size !default;
$h5-line-height: rem-calc(24) / $h5-font-size !default;
$h6-line-height: rem-calc(24) / $h6-font-size !default;
$paragraph-line-height: rem-calc(24) / $paragraph-font-size !default;
$body-small-line-height: rem-calc(16) / $body-small-font-size !default;
$body-smallest-line-height: rem-calc(16) / $body-smallest-font-size !default;

//------------------------------------
//    #FONT-SIZE-VARIABLES
//    create font size map to zurb's foundation
//------------------------------------
$fontSizes: (
  dl: $paragraph-font-size,
  dt: $paragraph-font-size,
  dd: $paragraph-font-size,
  li: $paragraph-font-size,
  title-heading: $title-heading-font-size,
  h1: $h1-font-size,
  h2: $h2-font-size,
  h3: $h3-font-size,
  h4: $h4-font-size,
  h5: $h5-font-size,
  h6: $h6-font-size,
  pre: $paragraph-font-size,
  code: $paragraph-font-size,
  p: $paragraph-font-size,
  blockquote: $paragraph-font-size,
  th: $paragraph-font-size,
  td: $paragraph-font-size,
  small: $small-font-size,
  body-small: $body-small-font-size,
  body-smallest: $body-smallest-font-size,
);

//------------------------------------
//    #FONT-FACES-VARIABLES
//    create font size map to cisco fonts
//------------------------------------

$fontFaces: (
  title-heading: $brand-font-thin,
  h1: $brand-font-thin,
  h2: $brand-font-light,
  h3: $brand-font-light,
  h4: $brand-font-light,
  h5: $brand-font-light,
  h6: $brand-font-light,
  pre: $brand-font-light,
  code: $font-family-monospace,
  kbd: $brand-font-light,
  p: $brand-font-light,
  small: $brand-font-regular,
  body-small: $brand-font-regular,
  body-smallest: $brand-font-regular,
);

$fontVariations: (
  h1--bold: $brand-font-extra-light,
  h2--light: $brand-font-extra-light,
  h2--bold: $brand-font-regular,
  h3--light: $brand-font-extra-light,
  h3--bold: $brand-font-regular,
  h4--bold: $brand-font-regular,
  h5--bold: $brand-font-regular,
  h5--heavy: $brand-font-bold,
  body--bold: $brand-font-regular,
  body--heavy: $brand-font-bold,
  body-small--light: $brand-font-light,
  body-small--bold: $brand-font-bold,
  body-smallest--light: $brand-font-light,
  body-smallest--bold: $brand-font-bold,
);

$fontColors: (
  primary: $md-gray-90,
  alternate: $md-black-100,
  secondary: $md-gray-70,
  disabled: $md-gray-50,
);

//------------------------------------
//    #LINE-HEIGHT-VARIABLES
//    create line height map to cisco fonts
//------------------------------------

$lineHeights: (
  title-heading: $title-heading-line-height,
  h1: $h1-line-height,
  h2: $h2-line-height,
  h3: $h3-line-height,
  h4: $h4-line-height,
  h5: $h5-line-height,
  h6: $h6-line-height,
  p: $paragraph-line-height,
  ul: $list-line-height,
  ol: $list-line-height,
  dl: $list-line-height,
  body-small: $body-small-line-height,
  body-smallest: $body-smallest-line-height,
);

// Text alignment class names
$align-class-names: small-only, small, medium-only, medium, large-only, large,
  xlarge-only, xlarge, xxlarge-only, xxlarge;

// Text alignment breakpoints
$align-class-breakpoints: $small-only, $small-up, $medium-only, $medium-up,
  $large-only, $large-up, $xlarge-only, $xlarge-up, $xxlarge-only, $xxlarge-up;