@font-face {
    font-family: 'IBM Plex Sans';
    font-style:  normal;
    font-weight: normal;
    src:         url('/IBMPlexSans-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style:  normal;
    font-weight: bold;
    src:         url('/IBMPlexSans-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Garet Variable';
    font-style:  normal;
    font-weight: 50 950;
    src:         url('/GaretVariable.woff2') format('woff2-variations');
}

::selection {
    background-color: var(--select--bg);
    color:            var(--select--fg);
}

img::selection {
    background-color: var(--select--img-bg);
}

html,
pre,
code {
    font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
}

html,
body,
main {
    height: 100%;
}

html {
    background-color: prop(--colors --bg);
    color:            prop(--colors --fg);
    font-family:      $font-fam--text;
    font-size:        px-to-em($font-size, 16px);
    line-height:      $line-height;
}

body {
    margin:  0;
    padding: 0;
}

pre,
code {
    font-family: $font-fam--mono;
}

code {
    color: var(--code--fg);
}

pre {
    margin:     ($line-height * 1em) 0 0;
    overflow-x: auto;

    code {
        color: currentColor;
    }
}

strong {
    color:       prop(--colors --fg-lo);
    font-weight: bold;
}

ul,
ol {
    margin:     ($line-height * 1em) 0 0;
    padding:    0;
    list-style: none;
}

li {
    position:     relative;
    padding-left: $subcontent--indent;

    &::before {
        display:     inline-block;
        position:    absolute;
        width:       $subcontent--indent;
        margin-left: -1 * $subcontent--indent;
        color:       prop(--colors --fg-hi);
        font-family: $font-fam--mono;
    }
}

ul > li::before {
    content: '-';
}

ol {
    counter-reset: cnt;

    > li {
        counter-increment: cnt;

        &::before {
            content: counter(cnt) '.';
        }
    }
}

ul ul {
    margin-top: 0;
}

dl {
    margin:  ($line-height * 1em) 0 0;
    padding: 0;
}

dt,
dd {
    display: inline-block;
}

dt {
    color:       prop(--colors --fg-lo);
    font-weight: bold;

    &::after {
        content:     ':';
        color:       prop(--colors --fg);
        font-weight: normal;
    }
}

dd {
    margin: 0 3ch 0 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin:                ($line-height * 2em) 0 0;
    font-family:           $font-fam--large;
    font-size:             1em;
    font-weight:           600;
    line-height:           1.2;
    font-feature-settings: 'ss02' 1;

    + h1,
    + h2,
    + h3,
    + h4,
    + h5,
    + h6 {
        margin-top: $line-height * 1em;
    }
}

h1,
h2 {
    color: var(--heading--fg);
}

h1 {
    text-transform: uppercase;
}

p {
    margin:  ($line-height * 1em) 0 0;
    hyphens: auto;
}

:link,
:visited {
    position: relative;
    z-index:  1;
    margin:   0 -.3em;
    padding:  .2em .3em;
    color:    var(--link--idle--fg);

    &:hover {
        background-color: var(--link--hover--bg);
        color:            var(--link--hover--fg);
        text-decoration:  none;
    }

    strong {
        color: currentColor;
    }
}

hr {
    height:           1px;
    margin:           ($line-height * 1em) 0;
    border:           0;
    background-color: prop(--colors --obj);
}

blockquote,
pre {
    margin:       ($line-height * 1em) 0 0 1px;
    padding-left: calc(#{$subcontent--indent} - 3px);
    border-left:  2px solid prop(--colors --obj);
}