//
// Headings
// =============================================================================


//
// Variables
// ---------

// Font sizes
$h1-size: 48 !default;
$h2-size: 36 !default;
$h3-size: 28 !default;
$h4-size: 18 !default;
$h5-size: 16 !default;
$h6-size: 14 !default;
$giga-size: 80 !default;
$mega-size: 64 !default;
$kilo-size: 52 !default;

// Font family
$font-family-headings: "Helvetica", "Arial", sans-serif !default;


//
// Styles
// ------

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.giga, .mega, .kilo {
  color: getColor(text, heading);
  font-family: $font-family-headings;
  line-height: 1.25em;

  small,
  .small {
    color: getColor(text, secondary);
    font-weight: lighter;
    vertical-align: 0;
  }
}

h1, h2, h3,
.h1, .h2, .h3,
.giga, .mega, .kilo {
  margin: unitSize(3, -4) 0 unitSize(1, 2);

  small,
  .small { font-size: 65%; }
}

h4, h5, h6,
.h4, .h5, .h6 {
  margin: unitSize(1, 2) 0;

  small,
  .small { font-size: 75%; }
}

h1,
.h1 {
  font-size: pxToEm($h1-size * .75);

  @media (min-width: $bp-small) {
    font-size: pxToEm($h1-size);
  }
}

h2,
.h2 { font-size: pxToEm($h2-size * .75);

  @media (min-width: $bp-small) {
    font-size: pxToEm($h2-size);
  }
}

h3,
.h3 { font-size: pxToEm($h3-size * .75);

  @media (min-width: $bp-small) {
    font-size: pxToEm($h3-size);
  }
}

h4,
.h4 { font-size: pxToEm($h4-size); }

h5,
.h5 { font-size: pxToEm($h5-size); }

h6,
.h6 { font-size: pxToEm($h6-size); }


//
// Sizes
// -----

// Giga
.giga { font-size: pxToEm($giga-size * .75);

  @media (min-width: $bp-small) {
    font-size: pxToEm($giga-size);
  }
}

// Mega
.mega { font-size: pxToEm($mega-size * .75);

  @media (min-width: $bp-small) {
    font-size: pxToEm($mega-size);
  }
}

// Kilo
.kilo { font-size: pxToEm($kilo-size * .75);

  @media (min-width: $bp-small) {
    font-size: pxToEm($kilo-size);
  }
}
