@import "mathsass/dist/math";

/* ==========================================================================
   Core
   ========================================================================== */

$min_width: 600;
$max_width: 1800;

$lineHeight: 1.5;
$scaleFactor: 1.618;

/* Font Sizes
/* ========================================================================== */

$font-h1: 1rem * pow($scaleFactor, 3); // 4.25rem
$font-h2: (1rem * pow($scaleFactor, 4)) / 2; // 3.25rem
$font-h3: (1rem * pow($scaleFactor, 5)) / 4;// 2.625rem
$font-h4: 1rem * 2; // 2.125rem
$font-h5: 1rem * $scaleFactor; // 1.5rem
$font-h6: (1rem * pow($scaleFactor, 3)) / 4; // 1.0625rem
$font-p: 1rem; // 1rem
$font-small: (1rem * $scaleFactor) / 2; // .75rem
$font-mini: 1rem / 2; // .5rem

:root {
  font-size: 14px;

  [class*='icon-12'] {
    font-size: 16px;
  }

  [class*='icon-16'] {
    font-size: 24px;
  }
}

@media (min-width: #{$min_width}px) and (max-width: #{$max_width}px){
  :root {
    font-size: 16px;
  }
}

@media (min-width: #{$max_width}px){
  :root {
    font-size: 18px;
  }
}

@mixin h1 {
  font-size: $font-h1;
  line-height: calc(3rem * #{$lineHeight});
}

@mixin h2 {
  font-size: $font-h2;
  line-height: calc(3rem * #{$lineHeight});
}

@mixin h3 {
  font-size: $font-h3;
  line-height: calc(2rem * #{$lineHeight});
}

@mixin h4 {
  font-size: $font-h4;
  line-height: calc(2rem * #{$lineHeight});
}

@mixin h5 {
  font-size: $font-h5;
  line-height: calc(2rem * #{$lineHeight});
}

@mixin h6 {
  font-size: $font-h6;
  line-height: calc(1rem * #{$lineHeight});
}