@import "../themes/liberty.mixins";


@mixin typography() {
    // Typography
    // --------------------------------------------------

    /// @prop - Font weight of all headings
    $headings-font-weight: 400 !default;

    /// @prop - Line height of all headings
    $headings-line-height: 1.5 !default;

    /// @prop - Font size of heading level 1
    $h1-font-size: 2.857em !default;

    /// @prop - Font size of heading level 2
    $h2-font-size: 2.286em !default;

    /// @prop - Font size of heading level 3
    $h3-font-size: 2em !default;

    /// @prop - Font size of heading level 4
    $h4-font-size: 1.714em !default;

    /// @prop - Font size of heading level 5
    $h5-font-size: 1.2em !default;

    /// @prop - Font size of heading level 6
    $h6-font-size: 1.2em !default;

    /// @prop - Default Font family
    $default-font-family: "Roboto", sans-serif;

    /// @prop - PT Serif Font Family
    $pt-font-family: "PT Serif", serif;


    html {
        font-family: var(--lu-font-family);
    }

    a {
        background-color: transparent;
        color: lu-color(primary, base);
    }


    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @include margin(0);
    }

    h1 {
        font-family: var(--h1-font-family, $default-font-family);
        font-size: var(--h1-font-size, $h1-font-size);
        font-weight: var(--h1-font-weight, $headings-font-weight);

        line-height: $headings-line-height;
    }

    h2 {
        font-family: var(--h2-font-family, $default-font-family);
        font-size: var(--h2-font-size, $h2-font-size);
        font-weight: var(--h2-font-weight, $headings-font-weight);

        line-height: $headings-line-height;
    }

    h3 {
        font-family: var(--h3-font-family, $default-font-family);
        font-size: var(--h3-font-size, $h3-font-size);
        font-weight: var(--h3-font-weight, $headings-font-weight);

        line-height: $headings-line-height;
    }

    h4 {
        font-family: var(--h4-font-family, $default-font-family);
        font-size: var(--h4-font-size, $h4-font-size);
        font-weight: var(--h4-font-weight, $headings-font-weight);

        line-height: $headings-line-height;
    }

    h5 {
        font-family: var(--h5-font-family, $default-font-family);
        font-size: var(--h5-font-size, $h5-font-size);
        font-weight: var(--h5-font-weight, $headings-font-weight);

        line-height: $headings-line-height;

        text-transform: uppercase;
    }

    h6 {
        font-family: var(--h6-font-family, $default-font-family);
        font-size: var(--h6-font-size, $h6-font-size);
        font-weight: var(--h6-font-weight, 500);

        line-height: $headings-line-height;
    }

    p {
        @include margin(0.6em, 0, 1em, 0);
        font-family: var(--p-font-family, $default-font-family);
        font-size: var(--p-font-size, 1em);
        font-weight: var(--p-font-weight, $headings-font-weight);

        line-height: $headings-line-height;
    }

    small {
        font-size: 75%;
    }
}