/*
---
name: Headers
category: Foundations/Headers
tag: text
---
The foundations provide headers from `h1` to `h6`. Those headers vary in colors, font sizes,
font weights and font families.

```html
<h1>Bitnami rocks!</h1>
<h2>Bitnami rocks!</h2>
<h3>Bitnami rocks!</h3>
<h4>Bitnami rocks!</h4>
<h5>Bitnami rocks!</h5>
<h6>Bitnami rocks!</h6>

<!-- With anchors -->
<h1><a href="#">Bitnami rocks!</a></h1>
<h2><a href="#">Bitnami rocks!</a></h2>
<h3><a href="#">Bitnami rocks!</a></h3>
```
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: color('text');
  font-weight: normal;
  font-family: $type-headings;
  margin: margin('normal') 0 margin('small');

  // Fix the color of the links inside a header
  a,
  a:hover,
  a:active {
    color: inherit;
  }
}

//TODO Fix the ratios to adjust to the real sizes once we get the final type base size
//TODO Fix the margin bottom for each header

h1 {
  // Interstate Light 42px
  // 30px margin-bottom
  font-size: type-scale('giant'); // Computed 39.056px
}

h2 {
  // Interstate Light 30px
  // 25px margin-bottom
  font-size: type-scale('enormous'); // Computed 31.248px
}

h3 {
  // Interstate Light 24px
  // 20px margin-bottom
  font-size: type-scale('bigger'); // Computed 25px
}

h4 {
  // Interstate Regular 24px
  // 20px margin-bottom
  font-size: type-scale('big'); // Computed 25px
  font-weight: 500;
  text-transform: uppercase;
}

h5,
h6 {
  // Interstate Bold 20px
  // 20px margin-bottom
  font-size: type-scale('big'); // Computed 20px
  font-weight: bold;
}