@import 'variables';

html {
    font-size: $font-size-root;
    -webkit-tap-highlight-color: transparent;

    @media ($screen-lg) {
        font-size: $font-size-root-lg;
    }
}

body {
    font-family: $font-family-base;
    font-size: $font-size-base;
    font-weight: $font-weight-normal;
    line-height: $line-height;
    color: $text-color;
    background: #fff;
    margin: 0;

    // Controversial! But prevents text flickering in
    // Safari/Firefox when animations are running
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


//
// Quickly fade in all content after
// fonts have loaded. Not quite useful,
// but beautiful.
//
.hero,
.header,
.section,
.content {
    .row {
        transition: .15s ease-out;

        .wf-loading & {
            opacity: 0;
        }

        .wf-active &,
        .wf-inactive & {
            opacity: 1;
        }
    }
}


//
// Headings
//
h1, h2, h3, h4, h5 { // stylelint-disable-line selector-list-comma-newline-after
    color: $headings-color;
    font-family: $headings-font-family;
    font-weight: $headings-font-weight;
    line-height: $headings-line-height;
    margin-top: $spacer;
    margin-bottom: $spacer;

    &:first-child {
        margin-top: 0;
    }
}

p,
ul,
ol {
    margin: 0 0 $spacer;
}


//
// Links
//
a {
    color: $link-color;

    &:hover,
    &:focus {
        color: lighten($link-color, 10%);
    }
}


//
// Lists
//
ul,
ol {
    margin-left: 0;
    padding-left: $spacer;
}


.lead {
    color: $brand-03;
    font-size: $font-size-large;
}