:root {
    --paper: #fefff5; /* #fff5fe;  rgba(187, 0, 170, 0.03); */
    --ink: rgba(0, 0, 0, 0.85);
    --muted: rgba(0, 0, 0, 0.6);
    --faint: rgba(0, 0, 0, 0.3);
    --hdg: rgba(187, 0, 170, 0.8);
    --ui: rgba(153, 204, 255, 1);
    --ui2: rgba(153, 204, 255, 0.8);
    --ui-dark: rgb(0, 127, 255);
    --ui-bg: rgba(153, 204, 255, 0.25);
    --ui-bg2: #FFF;
    --hl-paper: rgba(255, 238, 68, 0.10);
    --link: #007FFF;
    --visited: #004080;
    --tag: rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #1f001c;
        --ink: rgba(255, 255, 255, 0.9);
        --muted: rgba(255, 255, 255, 0.4);
        --faint: rgba(255, 255, 255, 0.2);
        --hdg: #AB0;
        --ui: #4da6ff;
        --ui2: #007fff;
        --ui-dark: rgb(0, 127, 255);
        --ui-bg: rgba(153, 204, 255, 0.25);
        --ui-bg2: rgba(153, 204, 255, 0.1);
        --hl-paper: rgba(255, 238, 68, 0.10);
        --link: rgba(204, 229, 255, 0.84);
        --visited: rgba(204, 229, 255, 0.84);
        --tag: rgba(255, 255, 255, 0.15);
    }
}

.dark {
    --paper: #1f001c;
    --ink: rgba(255, 255, 255, 0.9);
    --muted: rgba(255, 255, 255, 0.4);
    --faint: rgba(255, 255, 255, 0.2);
    --hdg: #AB0;
    --ui: #4da6ff;
    --ui2: #007fff;
    --ui-dark: rgb(0, 127, 255);
    --ui-bg: rgba(153, 204, 255, 0.25);
    --ui-bg2: rgba(153, 204, 255, 0.1);
    --hl-paper: rgba(255, 238, 68, 0.10);
    --link: rgba(204, 229, 255, 0.84);
    --visited: rgba(204, 229, 255, 0.84);
    --tag: rgba(255, 255, 255, 0.15);

    color: var(--ink);
    background-color: var(--paper);
}