@media (prefers-color-scheme: dark) {
    :root {
        --color-blue: #005eb2;

        --color-surface: var(--color-gray-950);
        --color-surface-secondary: color-mix(in lch, var(--color-gray-950), var(--color-text) 6%);
        --color-surface-tertiary: var(--color-gray-900);
        --color-text: var(--color-white);
        --color-text-muted: var(--color-gray-300);
        --color-border: var(--color-gray-800);
        --color-marketing-list-item: var(--color-text);
        --color-marketing-supporting-text: var(--color-text-muted);

        --hub-quick-link-bg: var(--color-surface-tertiary);

        --green-theme-callout-bg: color-mix(in lch, #03a28d 20%, transparent);
        --green-theme-callout-fg: var(--color-text);
        --white-theme-callout-bg: var(--color-surface-secondary);
        --white-theme-callout-fg: var(--color-text);
    }

    .site-header .brand {
        filter: brightness(1.15);
    }
}