// =Body
html {
    font-size: var(--unit);
}
body {
    // colors
    --body-color: var(--text-default);
    --body-background-color: var(--body-default);

    // props
    font-family: var(--font-text);
    font-size: var(--body-text-size);
    line-height: var(--body-text-line);
    color: var(--body-color);
    background-color: var(--body-background-color);
}

// // =Placeholder
@include placeholder(var(--placeholder-default));

// =Link
a {
    color: var(--link-default-color);
}
a:hover {
    @include transition;
    color: var(--link-default-hover-color);
}

// =Heading
h1,
h2,
h3,
h4,
h5,
h6 {
    --heading-font-size: inherit;
    --heading-line-height: inherit;

    font-family: var(--font-heading);
    font-style: normal;
    font-weight: bold;
    letter-spacing: -0.01em;
    font-size: var(--heading-font-size);
    line-height: var(--heading-line-height);
    color: var(--heading-default);
    text-rendering: optimizeLegibility;

    & a {
        color: inherit !important;
        display: block;
        text-decoration: none;
    }
    & a:hover {
        color: inherit !important;
        opacity: 0.75;
        text-decoration: underline;
    }
}

// =List
ul,
ol {
    margin-left: 20px;
}
li li {
    font-size: 1em;
}


// =Nav
nav ul,
nav ol {
    margin-left: 0;
    list-style: none;
}

// =Dl
dt {
    font-weight: bold;
}
dd + dt {
    margin-top: 0.25em;
}

// =Address
address {
    font-style: normal;
}

// =Figure
figure {
    & > img,
    & > iframe,
    & > pre,
    & > div {
        vertical-align: middle;
    }
}