:root {
    --app-background: #f2f2f7;
    --screen-background: #f2f2f7;
    --card-background: #FFFFFF;
    --card-text: #324355;
    --card-border: #FFFFFF;
    --card-header-background: #FAFAFC;
    --card-header-text: #01A499;
    --primary: #01A499;
    --primary-transparent: rgba(1, 164, 153, 0.06);
    --primary-button-hover-background: #40BCA8FF;
    --primary-button-text: #FFFFFF;
    --disabled-button-text: #324355;
    --text-primary: #324355;
    --text-secondary: #01A499;
    --danger-background: #FAFAFC;
    --danger-text: #D32F2F;
    --success-background: #FAFAFC;
    --success-text: #01A499;
    --modal-background: #f2f2f7;
    --modal-text: #324355;
    --input-background: #FFFFFF;
    --input-border: #eeeef4;
    --input-label: #8CA0B6;
    --input-text: #324355;
    --switch-off-color: #dedee3;

    --card-background-default: #fff;
    --card-background-transparent: rgba(255, 255, 255, 0.6);
    --card-background-highlight: #fffdec;
    --card-text-default: #324355;
    --card-text-neutral: #8ca0b6;
    --text-color-contrast: #000;
    --text-color-contrast-20: rgba(120, 120, 128, 0.2);
    --text-color-contrast-60: rgba(60, 60, 67, 0.6);
    --disabled-text-color: rgba(50, 67, 85, 0.32);

    --highlight-option-color: #f7f7f7; /* select active option */
    --card-boder-color-default: #eeeef4; /* used border color */
    --card-boder-color-accent: #c4c7d0; /* used as hr color */
    --card-text-accent: #989eb1; /* table header texts */

    --color-blue-dark: #324355;
    --color-blue: #8ca0b6;
    --color-blue-light: #c9d7e5; /* sheet modal handle */
    --color-blue-lighter: #e8f0fe; /* used for highlight items bg */

    --input-background-error: #fff6f5;
}

@media (prefers-color-scheme: dark) {
    :root {
        --app-background: #162029;
        --screen-background: #162029;
        --card-background: #202f3d;
        --card-text: #fff;
        --card-border: #202f3d;
        --card-header-background: #19252f;
        --card-header-text: #01A499;
        --primary: #01A499;
        --primary-transparent: rgba(1, 164, 153, 0.06);
        --primary-button-hover-background: #40BCA8FF;
        --primary-button-text: #FFFFFF;
        --disabled-button-text: #FFFFFF;
        --text-primary: #fff;
        --text-secondary: #01A499;
        --danger-background: #202f3d;
        --danger-text: #D32F2F;
        --success-background: #202f3d;
        --success-text: #01A499;
        --modal-background: #19252f;
        --modal-text: #f2f2f7;
        --input-background: #202f3d;
        --input-border: #40BCA8;
        --input-label: #8CA0B6;
        --input-text: #fff;
        --switch-off-color: #4b5c6e;

        --card-background-default: #202f3d;
        --card-background-transparent: rgba(32, 47, 61, 0.6);
        --card-background-highlight: #324355;
        --card-text-default: #c9d7e5;
        --card-text-neutral: #8ca0b6;
        --text-color-contrast: #fff;
        --text-color-contrast-20: rgba(255, 255, 255, 0.2);
        --text-color-contrast-60: rgba(255, 255, 255, 0.6);
        --disabled-text-color: rgba(201, 205, 225, 0.32);

        --highlight-option-color: #324355;
        --card-boder-color-default: #4e6985;
        --card-boder-color-accent: #7594b3;
        --card-text-accent: #f4f7f8;

        --color-blue-dark: #c9d7e5;
        --color-blue: #8ca0b6;
        --color-blue-light: #4e6985;
        --color-blue-lighter: #4b5c6e;

        --input-background-error: #482621;
    }
}

[data-theme-preference="light"] {
    --app-background: #f2f2f7;
    --screen-background: #f2f2f7;
    --card-background: #FFFFFF;
    --card-text: #324355;
    --card-border: #FFFFFF;
    --card-header-background: #FAFAFC;
    --card-header-text: #01A499;
    --primary: #01A499;
    --primary-transparent: rgba(1, 164, 153, 0.06);
    --primary-button-hover-background: #40BCA8FF;
    --primary-button-text: #FFFFFF;
    --disabled-button-text: #324355;
    --text-primary: #324355;
    --text-secondary: #01A499;
    --danger-background: #FAFAFC;
    --danger-text: #D32F2F;
    --success-background: #FAFAFC;
    --success-text: #01A499;
    --modal-background: #f2f2f7;
    --modal-text: #324355;
    --input-background: #FFFFFF;
    --input-border: #eeeef4;
    --input-label: #8CA0B6;
    --input-text: #324355;
    --switch-off-color: #dedee3;

    --card-background-default: #fff;
    --card-background-transparent: rgba(255, 255, 255, 0.6);
    --card-background-highlight: #fffdec;
    --card-text-default: #324355;
    --card-text-neutral: #8ca0b6;
    --text-color-contrast: #000;
    --text-color-contrast-20: rgba(120, 120, 128, 0.2);
    --text-color-contrast-60: rgba(60, 60, 67, 0.6);
    --disabled-text-color: rgba(50, 67, 85, 0.32);

    --highlight-option-color: #f7f7f7; /* select active option */
    --card-boder-color-default: #eeeef4; /* used border color */
    --card-boder-color-accent: #c4c7d0; /* used as hr color */
    --card-text-accent: #989eb1; /* table header texts */

    --color-blue-dark: #324355;
    --color-blue: #8ca0b6;
    --color-blue-light: #c9d7e5; /* sheet modal handle */
    --color-blue-lighter: #e8f0fe; /* used for highlight items bg */

    --input-background-error: #fff6f5;
}

[data-theme-preference="dark"] {
    --app-background: #162029;
    --screen-background: #162029;
    --card-background: #202f3d;
    --card-text: #fff;
    --card-border: #202f3d;
    --card-header-background: #19252f;
    --card-header-text: #01A499;
    --primary: #01A499;
    --primary-transparent: rgba(1, 164, 153, 0.06);
    --primary-button-hover-background: #40BCA8FF;
    --primary-button-text: #FFFFFF;
    --disabled-button-text: #FFFFFF;
    --text-primary: #fff;
    --text-secondary: #01A499;
    --danger-background: #202f3d;
    --danger-text: #D32F2F;
    --success-background: #202f3d;
    --success-text: #01A499;
    --modal-background: #19252f;
    --modal-text: #f2f2f7;
    --input-background: #202f3d;
    --input-border: #40BCA8;
    --input-label: #8CA0B6;
    --input-text: #fff;
    --switch-off-color: #4b5c6e;

    --card-background-default: #202f3d;
    --card-background-transparent: rgba(32, 47, 61, 0.6);
    --card-background-highlight: #324355;
    --card-text-default: #c9d7e5;
    --card-text-neutral: #8ca0b6;
    --text-color-contrast: #fff;
    --text-color-contrast-20: rgba(255, 255, 255, 0.2);
    --text-color-contrast-60: rgba(255, 255, 255, 0.6);
    --disabled-text-color: rgba(201, 205, 225, 0.32);

    --highlight-option-color: #324355;
    --card-boder-color-default: #4e6985;
    --card-boder-color-accent: #7594b3;
    --card-text-accent: #f4f7f8;

    --color-blue-dark: #c9d7e5;
    --color-blue: #8ca0b6;
    --color-blue-light: #4e6985;
    --color-blue-lighter: #4b5c6e;

    --input-background-error: #482621;
}

body {
    background-color: var(--app-background);
    --ef-ui-context-dots: var(--color-blue-light);
}