///////////////////////////////////////////////////////////////////////////////
// SASS Typography
// 2019-02-11
//
// PostNord
///////////////////////////////////////////////////////////////////////////////


// ----------------------------------------------------------------------------
// Typography, setup for rem
// ----------------------------------------------------------------------------

html {
    font-family: "StagSansWeb-Book";
    font-size: 62.5%;
    body {
        // Body font size 16px
        font-size: 1.6rem;
    }
}

// ----------------------------------------------------------------------------
// Typography, size variables
// ----------------------------------------------------------------------------

$pn-type-mega:              7.2rem;
$pn-type-hero:              4.8rem;
$pn-type-jumbo:             3.2rem;
$pn-type-bigshot:           2.4rem;
$pn-type-chief:             2rem;
$pn-type-common:            1.6rem;
$pn-type-small:             1.4rem;
$pn-type-tiny:              1.2rem;

// ----------------------------------------------------------------------------
// Typography, hierarchy
// ----------------------------------------------------------------------------

h1, h2, h3, h4, h5, h6 { 
    font-family: "StagSansWeb-Medium";
}

.pn-type-mega,
.pn-type-hero,
.pn-type-jumbo,
.pn-type-bigshot,
.pn-type-chief,
.pn-type-common,
.pn-type-small,
.pn-type-tiny
{
    font-family: "StagSansWeb-Medium";
    line-height: 1.2;
    margin: 0;
    margin-bottom: $pn-space-common;
}

.pn-type-chief-book,
.pn-type-common-book,
p,
.pn-type-small-book,
.pn-type-tiny-book
{
    font-family: "StagSansWeb-Book";
    line-height: 1.2;
    margin: 0;
    margin-bottom: $pn-space-common;
}

.pn-type-mega {
    font-size: $pn-type-mega;
    margin-bottom: $pn-space-chief;
}

.pn-type-hero {
    font-size: $pn-type-hero;
    margin-bottom: $pn-space-chief;
}

.pn-type-jumbo {
    font-size: $pn-type-jumbo;
    margin-bottom: $pn-space-chief;
}

.pn-type-bigshot {
    font-size: $pn-type-bigshot;
    margin-bottom: $pn-space-chief;
}

.pn-type-chief,
.pn-type-chief-book
{
    font-size: $pn-type-chief;
    margin-bottom: $pn-space-chief;
}

.pn-type-common,
.pn-type-common-book
{
    // No need for this because this in the base font
    // font-size: 1,6rem;
}

.pn-type-small,
.pn-type-small-book
{
    font-size: $pn-type-small;
}

.pn-type-tiny,
.pn-type-tiny-book
{
    font-size: $pn-type-tiny;
}