:root {
    --content-size: 1.25rem;
    --content-size-sm: 1rem;
    --content-line-height: 1.5;
    --content-width: 52.5rem;
    --content-padding: 0.65rem;

    /* squish things down a little on mobile so more text fits on the screen */
    @media(max-width: 640px) {
        --content-line-height: 1.25;
        --content-size: 1.15rem;
        --content-size-sm: 0.9rem;
    }

    /* light-mode colors (warm "paper" theme, harmonized with dark mode) */
    --bg-color: hsl(40deg 30% 97%);
    /* text */
    --content-color: hsl(30deg 12% 22%);
    --content-color-faded: hsl(30deg 8% 38%);
    /* links */
    --primary-color: hsl(202deg 55% 32%);
    /* indicators, hover effects, etc */
    --accent-color: hsl(18deg 75% 45%);
    --accent-color-faded: hsl(14deg 35% 50%);
    /* misc */
    --navbar-color: hsl(220deg 12% 34%);
    --navbar-accent-color: hsl(18deg 80% 55%);
    --heading-color: hsl(30deg 18% 25%);
    --link-color: var(--primary-color);
    --link-color-visited: var(--accent-color-faded);
    --nav-link-color: white;
    --neutral-gray: hsl(30deg 6% 32%);
    --inline-code-bg: hsl(40deg 22% 91%);
    --inline-code-color: var(--content-color);

    /* dark-mode colors (defined here so that we only have to update them in one place) */
    --dark-bg-color: hsl(220deg 10% 13%);
    --dark-content-color: hsl(30deg 10% 75%);
    --dark-content-color-faded: hsl(25deg 6% 50%);
    --dark-primary-color: hsl(220deg 15% 40%);
    --dark-accent-color: hsl(18deg 70% 55%);
    --dark-accent-color-faded: hsl(18deg 30% 45%);
    --dark-navbar-color: hsl(220deg 12% 18%);
    /* dark mode navbar is much close to the page background,
    so it doesn't need a separate accent color like light mode */
    --dark-navbar-accent-color: var(--dark-accent-color);
    --dark-heading-color: hsl(35deg 25% 88%);
    --dark-link-color: hsl(202deg 50% 50%);
    --dark-link-color-visited: hsl(270deg 33% 55%);
    --dark-nav-link-color: var(--dark-heading-color);
    --dark-neutral-gray: hsl(220deg 10% 45%);
    --dark-inline-code-bg: hsl(220deg 7.5% 21%);
    --dark-inline-code-color: hsl(18deg 10% 90%);

    &[data-theme="dark"] {
        --bg-color: var(--dark-bg-color);
        --content-color: var(--dark-content-color);
        --content-color-faded: var(--dark-content-color-faded);
        --primary-color: var(--dark-primary-color);
        --accent-color: var(--dark-accent-color);
        --accent-color-faded: var(--dark-accent-color-faded);
        --navbar-color: var(--dark-navbar-color);
        --navbar-accent-color: var(--dark-navbar-accent-color);
        --heading-color: var(--dark-heading-color);
        --link-color: var(--dark-link-color);
        --link-color-visited: var(--dark-link-color-visited);
        --nav-link-color: var(--dark-nav-link-color);
        --neutral-gray: var(--dark-neutral-gray);
        --inline-code-bg: var(--dark-inline-code-bg);
        --inline-code-color: var(--dark-inline-code-color);
    }

    &:not([data-theme="light"]) {
        @media(prefers-color-scheme: dark) {
            color-scheme: dark;
            --bg-color: var(--dark-bg-color);
            --content-color: var(--dark-content-color);
            --content-color-faded: var(--dark-content-color-faded);
            --primary-color: var(--dark-primary-color);
            --navbar-color: var(--dark-navbar-color);
            --navbar-accent-color: var(--dark-navbar-accent-color);
            --accent-color: var(--dark-accent-color);
            --accent-color-faded: var(--dark-accent-color-faded);
            --heading-color: var(--dark-heading-color);
            --link-color: var(--dark-link-color);
            --link-color-visited: var(--dark-link-color-visited);
            --nav-link-color: var(--dark-nav-link-color);
            --neutral-gray: var(--dark-neutral-gray);
            --inline-code-bg: var(--dark-inline-code-bg);
            --inline-code-color: var(--dark-inline-code-color);
        }
    }
}