:root {
    --primary-main: var(--yellow-700);
    --primary-light: var(--yellow-400);
    --primary-dark: var(--yellow-800);
    --primary-link: var(--yellow-link);  /* OKLCH-darkened so the brand link clears WCAG AA on white */
    --primary-contrastText: rgba(0, 0, 0, 0.87);  /* pale brand needs dark text on its primary surfaces */

    --secondary-main: var(--red-500);
    --secondary-light: var(--red-300);
    --secondary-dark: var(--red-700);
    --secondary-contrastText: var(--white);
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-main: var(--yellow-200);
        --primary-light: var(--yellow-50);
        --primary-dark: var(--yellow-400);
        --primary-contrastText: rgba(0, 0, 0, 0.87);

        --secondary-main: var(--red-200);
        --secondary-light: var(--red-50);
        --secondary-dark: var(--red-400);
        --secondary-contrastText: rgba(0, 0, 0, 0.87);
    }
}