:root {
    --light-primary: #445e91;
    --light-on-primary: #ffffff;
    --light-secondary: #575e71;
    --light-on-secondary: #ffffff;
    --light-primary-container: #d8e2ff;
    --light-on-primary-container: #2b4678;
    --light-surface: #f9f9ff;
    --light-on-surface: #1a1b20;
    --light-surface-container-1: #ffffff;
    --light-surface-container-2: #f3f3fa;
    --light-surface-container-3: #eeedf4;
    --light-surface-container-4: #e8e7ef;
    --light-surface-container-5: #e2e2e9;

    --dark-primary: #adc6ff;
    --dark-on-primary: #112f60;
    --dark-secondary: #bfc6dc;
    --dark-on-secondary: #293041;
    --dark-primary-container: #2b4678;
    --dark-on-primary-container: #d8e2ff;
    --dark-surface: #111318;
    --dark-on-surface: #e2e2e9;
    --dark-surface-container-1: #0c0e13;
    --dark-surface-container-2: #1a1b20;
    --dark-surface-container-3: #1e1f25;
    --dark-surface-container-4: #282a2f;
    --dark-surface-container-5: #33353a;

    --primary: var(--light-primary);
    --on-primary: var(--light-on-primary);
    --secondary: var(--light-secondary);
    --on-secondary: var(--light-on-secondary);
    --primary-container: var(--light-primary-container);
    --on-primary-container: var(--light-on-primary-container);
    --surface: var(--light-surface);
    --on-surface: var(--light-on-surface);
    --surface-container-1: var(--light-surface-container-1);
    --surface-container-2: var(--light-surface-container-2);
    --surface-container-3: var(--light-surface-container-3);
    --surface-container-4: var(--light-surface-container-4);
    --surface-container-5: var(--light-surface-container-5);
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: var(--dark-primary);
        --on-primary: var(--dark-on-primary);
        --secondary: var(--dark-secondary);
        --on-secondary: var(--dark-on-secondary);
        --primary-container: var(--dark-primary-container);
        --on-primary-container: var(--dark-on-primary-container);
        --surface: var(--dark-surface);
        --on-surface: var(--dark-on-surface);
        --surface-container-1: var(--dark-surface-container-1);
        --surface-container-2: var(--dark-surface-container-2);
        --surface-container-3: var(--dark-surface-container-3);
        --surface-container-4: var(--dark-surface-container-4);
        --surface-container-5: var(--dark-surface-container-5);
    }
}