:root {
    --primary-main: var(--teal-700);
    --primary-light: var(--teal-400);
    --primary-dark: var(--teal-800);
    --primary-contrastText: #fff;

    --secondary-main: var(--amber-500);
    --secondary-light: var(--amber-300);
    --secondary-dark: var(--amber-700);
    --secondary-contrastText: #fff;
}

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

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