/*doc
---
title: Typography
name: typo
category: CSS
---
In general we should not use typography classes but instead use the correct semantic elements which in almost all
cases should have the correct styling.
*/

/*doc
---
title: Headings
name: headings
parent: typo
---
```html_example
<h1>H1 using the larger font size with golden  <small>This is a smaller text withing the header</small></h1>
<h2>H2 <small>$font-size-larger</small></h2>
<h3>H3 <small>$font-size-base</small></h3>
```
*/

/*doc
---
title: Body copy
name: body_copy
parent: typo
---
```html_example
<p class="lead">
  <strong>.lead</strong> Bacon ipsum dolor amet brisket chicken shank, turducken venison shoulder beef ribs.
  Shoulder kielbasa cupim filet mignon. Ham pork chop andouille bacon turducken jowl fatback filet mignon meatloaf landjaeger.
  Pork belly boudin brisket tri-tip sirloin hamburger shankle tenderloin meatball venison picanha frankfurter.
  Kevin picanha andouille meatball, sirloin kielbasa ribeye corned beef pork belly bacon ground round.
  Pancetta swine flank prosciutto meatball. Swine ball tip chicken hamburger pork sirloin.
</p>
<p>
  Bacon ipsum dolor amet brisket chicken shank, turducken venison shoulder beef ribs.
  Shoulder kielbasa cupim filet mignon. Ham pork chop andouille bacon turducken jowl fatback filet mignon meatloaf landjaeger.
  Pork belly boudin brisket tri-tip sirloin hamburger shankle tenderloin meatball venison picanha frankfurter.
  Kevin picanha andouille meatball, sirloin kielbasa ribeye corned beef pork belly bacon ground round.
  Pancetta swine flank prosciutto meatball. Swine ball tip chicken hamburger pork sirloin.
</p>
```
*/
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic|Source+Sans+Pro:400,400italic,600,600italic,700,700italic);
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500,500i,700');

$regular: 400;
$semi-bold: 500;
$bold: 700;

$font-family-sans-serif: "Fira Sans", Arial, sans-serif;
$font-family-serif: "Merriweather", "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif;

$font-size-base: 16px;
$font-size-large: ceil(($font-size-base * 1.125)); // ~18px
$font-size-larger: 22px;
$font-size-medium-large: ceil(($font-size-base * 2.5)); // 40px
$font-size-very-large: ceil(($font-size-base * 3.73)); // 56px
$font-size-extremly-large: ceil(($font-size-base * 5.625)); // 90px
$font-size-small: ceil(($font-size-base * 0.85)); // ~14px
$font-size-smaller: ceil(($font-size-base * 0.75)); // ~12px

$font-size-h1: $font-size-base * 3.5; // 56px
$font-size-h2: $font-size-large; // 18px
$font-size-h3: $font-size-base; // 16px

$line-height-base-small: 1.1;
$line-height-base: 1.375; // 22/16
$line-height-computed: floor(($font-size-base * $line-height-base)); // 22px
$line-height-very-large: floor(($font-size-very-large * $line-height-base-small)); // 77px
$line-height-extremly-large: floor(($font-size-extremly-large * $line-height-base-small)); // 123px

$headings-font-weight: $semi-bold;
$headings-color: $text-color-dark;

$line-height-large: 1.5;
$line-height-small: 1.5;

//** Load fonts from this directory.
$icon-font-path: "bootstrap/";

h1 {
  font-weight: $bold;

  small {
    display: block;
    font-size: $font-size-large; // ~18px
    margin-top: $space;
  }
}

.lead {
  font-weight: normal;
}