html {
    --aside-bg: #eef;
    --aside-fg: hsl(200, 70%, 30%);
    --example-bg: #fcfaee;
    --example-fg: #574b0f;
    --link-fg: blue;
    --listing-bg: #ccc;
    --listing-fg: #333;
    --masthead-bg: #eee;
    --masthead-fg: #789;
    --muted-fg: #333;
    --note-bg: #e9fbe9;
    --note-fg: hsl(120, 70%, 30%);
    --page-bg: white;
    --page-fg: black;
    --visited-fg: purple;
    --warning-bg: red;
    --warning-fg: white;

    --heading-font-stack: ui-rounded, system-ui, Arial, sans-serif;
    --page-font-stack: system-ui, Arial, sans-serif;
    --code-font-stack: ui-monospace, "Cascadia Code", monospace;
    --serif-font-stack: ui-serif, serif;
}

@media (prefers-color-scheme: dark) {
    html {
        --aside-bg: #224;
        --aside-fg: #eef;
        --example-bg: #442;
        --example-fg: #fcfaee;
        --link-fg: yellow;
        --listing-bg: #333;
        --listing-fg: #ccc;
        --masthead-bg: #222;
        --masthead-fg: #789;
        --muted-fg: #ccc;
        --note-bg: #242;
        --note-fg: #e9fbe9;
        --page-bg: black;
        --page-fg: white;
        --visited-fg: gold;
    }
}

@media print {
    html {
        --aside-bg: white;
        --aside-fg: black;
        --example-bg: white;
        --example-fg: black;
        --link-fg: black;
        --listing-bg: white;
        --listing-fg: black;
        --masthead-bg: white;
        --masthead-fg: #789;
        --muted-fg: #333;
        --note-bg: white;
        --note-fg: black;
        --page-bg: white;
        --page-fg: black;
        --visited-fg: black;
        --warning-bg: white;
        --warning-fg: black;
    }
}