:root {
    --bg: #f7f7f7;
    --text: #212224;
    --subtext: rgba(0, 0, 0, 0.5);
    --text-secondary: #e5e7ec;

    --option-bg: #e2e2e2;
    --option-border: #5a626a;

    --option-bg-hover: #7a8490;
    --option-border-hover: #4b535b;

    --option-bg-checked: #7a2020;
    --option-border-checked: #c35353;

    --button-bg: #2c2e33;
    --button-border: #374151;

    --button-bg-hover: #000;

    --toast-success: #27ae60;
    --toast-neutral: #34495e;
    --toast-error: #c0392b;

    --toast-border: rgb(255, 255, 255, 0.35);

    --contacts-border: rgb(0, 0, 0);
    --contactlist-item-border: rgb(0, 0, 0);

    --checklist-text-checked: rgba(0, 0, 0, 0.85);
    --checklist-bg-checked: #53c362;

    --checkmark-border: #7a2020;
    --checkmark-border-hover: #c7c7c7;
    --checkmark-border-checked: #ddd;

    --checkmark-check-icon: #7a2020;

    --footer-bg: #111827;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #151515;
        --text: #e5e7eb;
        --subtext: rgba(255, 255, 255, 0.5);

        --option-bg: #454c53;
        --option-border: #5a626a;

        --option-bg-hover: #7a8490;
        --option-border-hover: #4b535b;

        --option-bg-checked: #7a2020;
        --option-border-checked: #c35353;

        --button-bg: #26a349;
        --button-border: #374151;

        --button-bg-hover: #000000;

        --toast-success: #27ae60;
        --toast-neutral: #34495e;
        --toast-error: #c0392b;

        --toast-border: rgb(255, 255, 255, 0.35);

        --contacts-border: rgba(255, 255, 255, 0.35);

        --checklist-text-checked: rgba(255, 255, 255, 0.85);
        --checklist-bg-checked: #368f42;

        --checkmark-border: rgba(255, 255, 255, 0.35);
        --checkmark-border-hover: #ddd;
        --checkmark-border-checked: #ddd;

        --checkmark-check-icon: rgba(255, 255, 255, 0.35);

        --footer-bg: #070a12;
    }
}