// ============================================================================
// HTML
// ============================================================================


// [1] Ensure the page always fills at least the entire height of the viewport
// [2] Force scrollbars to always be visible to prevent awkward jumps when
// navigating between path-to-images
// [3] Overrides smartphone text resizing algorithms:
// https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
// [4] Triggers browser hyphenation based off of declared language:
// http://thenewcode.com/429/Classic-Typography-Effects-Hyphenation
html {
    @include typography-kerning();
    @include typography-ligatures-common();
    @include typography-smoothing(light-on-dark);

    margin: 0;
    min-height: 100%; // [1]
    // overflow-y: scroll; // [2]
    padding: 0;

    // background-color: c(base, background); // Set on `<html>` to keep the background color present if the browser bounces at a scrolling boundary

    color: c(base, type);
    direction: $global-type-direction;
    // font-family: $font-family-primary-preload; // See Type Loading section below
    font-family: $font-family-primary;
    font-size: $global-type-size;
    font-weight: $global-type-weight;
    line-height: $global-type-line-height;
    text-size-adjust: 100%; // [3]
}


// Type loading
// https://helpx.adobe.com/typekit/using/font-events.html
.wf {
    &-loading {

    }

    &-inactive {

    }

    &-active {
        font-family: $global-type-family;
    }
}


// Applies `border-box` to all HTML elements:
// https://github.com/AllThingsSmitty/css-protips#inherit-box-sizing
*,
*::before,
*::after {
    box-sizing: border-box;
}
