:root {
    /* body variables */
    --body-background: var(--light-100);
    --body-foreground: hsl(265, 8%, 40%);
    --body-font-family: var(--font-family-sans);

    /* heading customization variables */
    --heading-font-family: var(--font-family-sans);
    --heading-font-weight: 700;
    --heading-foreground: var(--black);
    --heading-line-height: 1.125;
    --heading-margin-top: var(--space-2);
    --heading-margin-bottom: var(--space-3);

    /* paragraph customization variables */
    --paragraph-margin-top: 0;
    --paragraph-margin-bottom: var(--space-3);

    /* list customization variables */
    --list-margin-top: 0;
    --list-margin-bottom: var(--space-3);

    /* code block variables */
    --code-background: transparent;
    --code-foreground: inherit;
    --code-border-radius: var(--border-radius);
    --code-font-family: var(--font-family-mono);
    --code-margin-top: 0;
    --code-margin-bottom: var(--space-3);

    /* horizontal rule variables */
    --rule-border-color: var(--border-color);
    --rule-border-width: var(--border-width);
    --rule-margin-top: var(--space-5);
    --rule-margin-bottom: var(--space-5);

    /* links variables */
    --link-foreground: inherit;
    --link-text-decoration: none;
    --link-hover-text-decoration: underline;
}

/* base page styles with minimum height and readable line-height */
body {
    background-color: var(--body-background);
    color: var(--body-foreground);
    font-family: var(--body-font-family);
    font-optical-sizing: auto;
    font-style: normal;
}

/* customize style for horizontal rules */
hr {
    border: 0;
    border-bottom: var(--rule-border-width) solid var(--rule-border-color);
    margin-bottom: var(--rule-margin-bottom);
    margin-top: var(--rule-margin-top);
}

/* heading styles */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-foreground);
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    margin-bottom: var(--heading-margin-bottom);
    margin-top: var(--heading-margin-top);
}
h1 { font-size: var(--font-size-4); }
h2 { font-size: var(--font-size-3); }
h3 { font-size: var(--font-size-2); }
h4 { font-size: var(--font-size-1); }
h5 { font-size: var(--font-size-1); }

/* paragraph styles */
p {
    line-height: inherit;
    margin-bottom: var(--paragraph-margin-bottom);
    margin-top: var(--paragraph-margin-top);
}

/* list styles */
dl, ol, ul {
    margin-top: var(--list-margin-top);
    margin-bottom: var(--list-margin-bottom);
}

/* code styles */
pre, code {
    background-color: var(--code-background);
    color: var(--code-foreground);
    border-radius: var(--code-border-radius);
    font-family: var(--code-font-family);
    font-size: inherit;
}
pre {
    margin-top: var(--code-margin-top);
    margin-bottom: var(--code-margin-bottom);
    overflow-x: auto;
}

/* links */
a {
    color: var(--link-foreground);
    text-decoration: var(--link-text-decoration);
}
a:hover {
    text-decoration: var(--link-hover-text-decoration);
}