/* ========================================================================== */
/* Base
/* ========================================================================== */
*,
::before,
::after  {
    box-sizing: border-box;
    border: 0;
    border-style: solid;
    border-color: currentColor;
}

html,
body {
    margin: 0;
    line-height: var(--line-height);
}

html {
    accent-color: var(--color-primary);
    font-family: var(--font-family-ui);
    font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
    font-optical-sizing: auto;
    font-size: var(--font-size);
    font-weight: var(--font-weight);
}

a,
a code {
    color: var(--link-color);
}

a {
    text-decoration: underline;
}

:where(abbr, dfn)[title] {
    cursor: help;
    border-bottom: 1px dotted;
}

b,
strong {
    color: var(--strong-color);
    font-weight: var(--strong-font-weight);
}

blockquote {
    margin: 1.5rem 0;
    padding: var(--blockquote-padding);
    border-width: var(--blockquote-border-width);
    border-color: var(--blockquote-border-color);
    background: var(--blockquote-background);
    color: var(--blockquote-color);
}

code,
kbd,
samp,
pre {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-mono);
}

kbd {
    padding: .2em .75em .3em .75em;
    border-color: var(--kbd-border-color);
    border-radius: var(--border-radius);
    background: var(--kbd-background);
    color: var(--kbd-color);
    box-shadow: none;
}

code,
pre {
    font-size: var(--font-size-mono);
    font-weight: var(--font-weight-mono);
}

hr {
    border-color: var(--hr-color);
    border-top-width: var(--hr-height);
}

input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder-color) !important;
}

mark {
    border-radius: var(--border-radius-xs);
    box-shadow: 0 0 0 1px var(--marked-background);
    background: var(--marked-background);
    color: var(--marked-color);
}

p {
    margin-top: 1em;
    margin-bottom: 1em;
}