:root {
    color-scheme: light;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --black: #f1f3f5;
        --white: #111315;
        --gray-100: #191c20;
        --gray-200: #343a43;
        --gray-300: #596372;
        --gray-400: #949eac;
        --gray-500: #a2acb9;
        --gray-600: #b2bbc7;
        --gray-700: #ced4dc;
        --gray-800: #dde1e7;
        --gray-900: #f1f3f5;
        --surface-raised: #20242a;
    }

    nav {
        background: rgba(17, 19, 21, 0.9);
    }

    nav.scrolled,
    .tl-controls {
        background: rgba(17, 19, 21, 0.95);
    }

    .hero {
        background: linear-gradient(135deg, #191c20 0%, #111315 100%);
    }

    .stat-item,
    .experience-content,
    .opensource-card,
    .writing-card,
    .blog-card,
    .talk-card,
    .tl-card,
    .choice-card,
    .modal-content {
        background: var(--surface-raised);
    }

    /* These sections already use an inverse palette in the light theme. */
    .contact,
    .blog-footer,
    .talks-footer,
    .tl-footer {
        --black: #080a0d;
        --white: #f1f3f5;
        --gray-300: #ced4dc;
        --gray-400: #a2acb9;
        --gray-600: #b2bbc7;
    }

    .callout-warning {
        background: #302819;
        border-color: #9a7b32;
    }

    .experience-description a,
    .experience-description a:visited {
        color: var(--black);
    }

    input::placeholder {
        color: var(--gray-500);
        opacity: 1;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    .subscribe-form input[type="email"]:focus-visible {
        outline: 2px solid #b2bbc7;
        outline-offset: 4px;
    }

    ::selection {
        color: #111315;
        background: #ced4dc;
    }

    /* Preserve the fixed colors and contrast of embedded article artwork. */
    .article-diagram {
        background: #ffffff;
        color: #212529;
        border-radius: 0.5rem;
    }

    @media (max-width: 768px) {
        .nav-links {
            background: var(--surface-raised);
        }
    }
}