:root {
    --primary-main: var(--red-700);
    --primary-light: var(--red-400);
    --primary-dark: var(--red-800);
    --primary-contrastText: var(--white);

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

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

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