/*----------------------------------------------------------------------------*\
    TYPOGRAPHY
\*----------------------------------------------------------------------------*/

/*  Variables
\*----------------------------------------------------------------------------*/

$link-color-default:		#000;
$link-color-hover:			#333;
$link-color-active:			#000;
$link-color-visited:		#000;

$link-decoration-default:	underline;
$link-decoration-hover:		none;
$link-decoration-active: 	underline;
$link-decoration-visited: 	underline;

/*  HEADINGS
\*----------------------------------------------------------------------------*/

body {
    font-family: $font-base;
    font-weight: 300;
    font-size: 1.7rem;
    line-height: 3.3rem;
    color: #122836;
}

h1,h2,h3,h4,h5,h6 {color: color(tertiary);}
h1, h2, h3 {
    font-family: $font-heading;
    padding: 0;
    margin: 0;
    font-weight: 700;
}

h1 {
    font-size: 3.4rem;
    line-height: 4.3rem;
    padding-bottom: 3rem;

    @include media-query(xxl) {
        font-size: 4.2rem;
        line-height: 5.2rem;
    }
}

h2 {
    font-size: 3rem;
    line-height: 4.2rem;
    padding-bottom: 1.5rem;

    @include media-query(xxl) {
        font-size: 3.6rem;
        line-height: 4.8rem;
        padding-bottom: 3rem;
    }
}

h3 {
    font-size: 3rem;
    line-height: 4.2rem;
}

h4 {
    font-family: $axiforma-bold;
    font-size: 1.5rem;
    line-height: 1.8rem;
    text-transform: uppercase;
    color: rgba(color(tertiary), 0.4);
    padding-bottom: 0.5rem;
    letter-spacing: 1px;
}

// Links
a:not(.button) {
    // Default
    color: $link-color-default;
    text-decoration: $link-decoration-default;

    // Hover
    &:hover {
        color: $link-color-hover;
        text-decoration: $link-decoration-hover;
    }

    // Active
    &:active {
        color: $link-color-active;
        text-decoration: $link-decoration-active;
    }

    // Visited
    &:visited {
        color: $link-color-visited;
        text-decoration: $link-decoration-visited;
    }
}