$fontSize-min:          16px;
  $fontSize-max:          21px;
  $lineHeight-base:       1.5;
  $lineHeight-base-px:    $fontSize-min * $lineHeight-base + 0px;



  // Modular Scale Settings
  $msWidth-min:           480px;
  $msWidth-max:           1280px;
  $msFactor:              1.3;


// Nothing to change here
$ms1:                   $msFactor;
$ms2:                   $msFactor * $msFactor;
$ms3:                   $msFactor * $msFactor * $msFactor;
$ms4:                   $msFactor * $msFactor * $msFactor * $msFactor;
$ms5:                   $msFactor * $msFactor * $msFactor * $msFactor * $msFactor;
$ms6:                   $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor;
$ms7:                   $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor;
$ms8:                   $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor;
$ms9:                   $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor * $msFactor;
$msFont-min:            $fontSize-min;
$msFont-max:            $fontSize-max;


// Font Map
$dh-fontsizes: (
  'ms-2':               12px,
  'ms-1':               15px,
  'ms0':                $fontSize-min,
  'ms1':                $fontSize-min * $ms1,
  'ms2':                $fontSize-min * $ms2,
  'ms3':                $fontSize-min * $ms3,
  'ms4':                $fontSize-min * $ms4,
  'ms5':                $fontSize-min * $ms5,
  'ms6':                $fontSize-min * $ms6,
  'ms7':                $fontSize-min * $ms7,
  'ms8':                $fontSize-min * $ms8,
  'ms9':                $fontSize-min * $ms9,
);

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
	#{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
	@each $property in $properties {
	  #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
	}
  }

  @media screen and (min-width: $max-vw) {
	@each $property in $properties {
	  #{$property}: $max-value;
	}
  }
}

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

// Shorthand Version
@mixin ft($args...) {
  @include fluid-type($args...);
}

@mixin s-H1-text-style($weight: 800) {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, 48px, 96px);
  line-height: s-line-height(H1);
  font-weight: 800;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  letter-spacing: -1.5px;
  text-rendering: optimizeLegibility;
}

@mixin s-H2-text-style($weight: 700) {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, 36px, 60px);
  line-height: s-line-height(H2);
  font-weight: 700;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  letter-spacing: -0.5px;
  text-rendering: optimizeLegibility;
}

@mixin s-H3-text-style($weight: 600) {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, 28px, 48px);
  line-height: s-line-height(H3);
  font-weight: 600;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  letter-spacing: 0px;
  text-rendering: optimizeLegibility;
}

@mixin s-H4-text-style($weight: 600) {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, 24px, 34px);
  line-height: s-line-height(H4);
  font-weight: 600;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  letter-spacing: .25px;
  text-rendering: optimizeLegibility;
}

@mixin s-H5-text-style($weight: 500) {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, 20px, 24px);
  line-height: s-line-height(H5);
  font-weight: 500;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  letter-spacing: 0px;
  text-rendering: optimizeLegibility;
}

@mixin s-H6-text-style($weight: 500) {
  @include fluid-type(font-size, $msWidth-min, $msWidth-max, 18px, 20px);
  line-height: s-line-height(H6);
  font-weight: 700;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  letter-spacing: .15px;
  text-rendering: optimizeLegibility;
}

@mixin s-subtitle2-text-style($weight: semibold) {
  font-size:   s-font-size(subtitle2);
  line-height: s-line-height(subtitle2);
  font-weight: s-font-weight($weight);
  font-family: $s-theme-font-family;
  letter-spacing: .1px;
  text-rendering: optimizeLegibility;
}

@mixin s-subtitle1-text-style($weight: normal) {
  font-size:   s-font-size(subtitle1);
  line-height: s-line-height(subtitle1);
  font-weight: s-font-weight($weight);
  letter-spacing: .15px;
  text-rendering: optimizeLegibility;
}

@mixin s-body2-text-style($weight: normal) {
  font-size:   s-font-size(body2);
  line-height: s-line-height(body2);
  font-weight: s-font-weight($weight);
  letter-spacing: .7px;
  font-family: $s-theme-font-family;
}

@mixin s-body1-text-style($weight: normal) {
  font-size:   s-font-size(body1);
  line-height: s-line-height(body1);
  font-weight: s-font-weight($weight);
  font-family: $s-theme-font-family;
  letter-spacing: .7px;
  text-rendering: optimizeLegibility;
}

@mixin s-caption-text-style($weight: normal) {
  font-size:   s-font-size(caption);
  line-height: s-line-height(caption);
  font-weight: s-font-weight($weight);
  font-family: $s-theme-font-family;
  letter-spacing: .4px;
  text-rendering: optimizeLegibility;
}

@mixin s-button-text-style($weight: semibold) {
  font-size:   s-font-size(button);
  line-height: s-line-height(button);
  font-weight: s-font-weight($weight);
  font-family: $s-theme-font-family;
  text-rendering: optimizeLegibility;
  letter-spacing: .4px;
  // text-transform: uppercase;
}

@mixin s-overline-text-style($weight: normal) {
  font-size:   s-font-size(overline);
  line-height: s-line-height(overline);
  font-weight: s-font-weight($weight);
  font-family: $s-theme-font-family;
  // text-transform: uppercase;
  letter-spacing: 1px;
  text-rendering: optimizeLegibility;
}

@mixin s-link-text-style($weight: normal) {
  line-height: s-line-height(link);
  font-weight: s-font-weight($weight);
  font-family: $s-theme-font-family;
  text-rendering: optimizeLegibility;
  text-decoration: none;
  cursor: pointer;
}

@mixin s-list-text-style($weight: normal) {
  font-size:   s-font-size(list);
  line-height: s-line-height(list);
  font-weight: s-font-weight($weight);
  font-family: $s-theme-font-family;
  text-rendering: optimizeLegibility;
}