// =========== Base

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

*,
*:after,
*:before {
    @include box-sizing(border-box);
}

::-moz-selection { background: $color-neutral-90; color: $white; text-shadow: none; }
::selection { background: $color-neutral-90; color: $white; text-shadow: none; }

html {
    color: $color-neutral-70;
    font: 300 $font-size-base $font-family-body;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
    -webkit-text-size-adjust: 100%;
}

body {
    line-height: 1.5em;
}


// Headings
h1, h2, legend, h3, h4, h5, h6 {
    font-family: $font-family-heading;
    font-weight: 400;
    line-height: 1.5em;
    margin: 0 0 0.25em 0;
}

h1 { font-size: 2rem; }

h2,
legend {
    font-size: 1.5rem;
}

h3 { font-size: 1.3rem; }

h4 { font-size: 1.2rem; }

h5 { font-size: 1.1rem; }

h6 { font-size: 1rem; }


// Paragraphs
p {
    margin-bottom: $spacing;

    &.is-lead { font-size: $font-size-40; }
}


// Links
a {
    color: $color-brand-50;
    cursor: pointer;
    text-decoration: none;

    &:hover { color: $color-brand-60; }
}


// Other
small {
    color: $color-neutral-50;
    font-size: $font-size-20;
}

em { font-style: italic; }

strong { font-weight: bold; }

code, pre { font-family: 'courier new', monospace; }

pre { overflow-x: auto; }

abbr { border-bottom: 1px dotted $color-neutral-50; }

del { text-decoration: line-through; }

mark { background-color: lighten(yellow, 35%); }

hr {
    background-color: transparent;
    border: solid $color-neutral-30;
    border-width: 1px 0 0;
    clear: both;
    margin: 2.5rem $spacing;
}


// Lists
ul, ol { margin: 0 0 $spacing 1.5rem; }

ul { list-style: disc; }

ol { list-style: decimal; }

dl {
    margin-bottom: $spacing;

    dt { font-weight: bold; }
    dd { margin-left: $spacing; }

    &.advanced {
        @include grid-container;

        dt { @include grid(16, 0, 1); }

        dd { @include grid(32); }
    }
}