/*=========================================================
44 Web Design Framework
-----------------------------------------------------------
Project      : 433
Client       : Vehicle Safety Solutions Ltd

File         : typography.css
Version      : 1.0.0

Author       : Ian Latus
Company      : 44 Web Design

Purpose
-------
Provides consistent typography styling throughout
the website.

Contents
--------
1. Headings
2. Paragraphs
3. Lists
4. Strong & Emphasis
5. Small Text

=========================================================*/


/*=========================================================
Dependencies

variables.css
base.css

=========================================================*/


/*=========================================================
1. Headings
=========================================================*/

h1,
h2,
h3,
h4,
h5,
h6 {

    font-weight: 700;
    line-height: 1.2;
    color: var(--colour-dark);
    margin-bottom: var(--space-sm);

}

h1 {
    font-size: var(--font-size-3xl);
}

h2 {
    font-size: var(--font-size-2xl);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
}

h5 {
    font-size: var(--font-size-md);
}

h6 {
    font-size: var(--font-size-sm);
}


/*=========================================================
2. Paragraphs
=========================================================*/

p {

    margin-bottom: var(--space-md);

    font-size: var(--font-size-sm);

    line-height: var(--line-height);

    color: var(--colour-dark);

}


/*=========================================================
3. Lists
=========================================================*/

li {

    line-height: var(--line-height);

}


/*=========================================================
4. Strong & Emphasis
=========================================================*/

strong {

    font-weight: 700;

}

em {

    font-style: italic;

}


/*=========================================================
5. Small Text
=========================================================*/

small {

    font-size: var(--font-size-xs);

}