:root {
    /* colors */
    --color-darkgreen: #4f9879;
    --color-green: #7aba7a;
    --color-lightgreen: rgba(79, 152, 121, .33); /* #aecfc1; */
    --color-palegreen: rgba(79, 152, 121, .2); /* #dceae4; */
    --color-softred: #EC644B;
    --color-lightred: #F28E72;
    --color-swissred: #E30613;
    --color-white: #FFFFFF;
    --color-lightgray: #F5F5F5;
    --color-mediumgray: #E5E5E5;
    --color-gray-alt: #999999;
    --color-gray: #777777;
    --color-softblack: #333333;
    --color-dark: #1D1D1B;
    --color-yellow: #fef160;
    --color-darkyellow: rgb(243, 234, 0, .66); /* #F3EA00 */
    --color-lightyellow: rgba(255, 252, 177, .15); /* #FFFCB1 */
    --color-darkblue: #4f7998;
    --color-blue: #5E94BF;
    --color-blue-rgb: 94, 148, 191; /*#5E94BF */
    --color-lightblue: #73A5CD;
    --color-light-skyblue: #ECF7FF;
    --color-electric-blue: #2684FF;
    --color-powder-blue: #DEEBFF;
    --color-pale-ice-blue: #E6F7FF;
    --color-blue-alt: #91BFCF;
    --color-orange: #F5A04C;
    --color-olive: #908B00;
    --color-lightorange: #F9AC60;

    /* status colors */
    --color-success: var(--color-green);
    --color-info: var(--color-blue);
    --color-warning: var(--color-softred);
    --color-error: var(--color-swissred);
    --color-danger: var(--color-error);

    /* status broder and background colors */
    --color-success-background: rgba(122, 186, 122, .2);
    --color-success-border: rgba(122, 186, 122, .33);
    --color-info-background: rgba(94, 148, 191, .2);
    --color-info-border: rgba(94, 148, 191, .33);
    --color-warning-background: rgba(245, 160, 76, .2);
    --color-warning-border: rgba(245, 160, 76, .33);
    --color-error-background: rgba(227, 6, 19, .2);
    --color-error-border: rgba(227, 6, 19, .33);

    /* font sizes */
    --size-extra-large: 2.2rem;
    --size-large: 2rem;
    --size-large-mobile: 1.4rem;
    --size-subheader: 18px;
    --size-medium: var(--size-default);
    --size-default: 14px;
    --size-small: 12px;
    --size-xsmall: 11px;
    --size-label: var(--size-small);
    --size-button: var(--size-default);
    --size-title: 32px;

    /* wizard */
    --size-wizard-text: 16px;

    /* spacing */
    --spacing-large: 2rem;
    --spacing-default: 1rem;
    --spacing-half: .5rem;

    --space-large: 64px;
    --space-default: 32px;
    --space-half: 16px;
    --space-quarter: 8px;
    --space-eight: 4px;

    --item-height-xsmall: 24px;
    --item-height-small: 36px;
    --item-height: 52px;
    --item-height-large: 72px;
    --item-height-xlarge: 64px;

    /* typography */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Roboto", "Oxygen", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

    /* sidebar */
    --sidebar-width-large: 250px;
    --sidebar-margin: 32px;
    --sidebar-item-height: 52px;
    --sidebar-icon-margin: 14px;
    --sidebar-icon-size: 24px;
    --sidebar-header-size: 12px;
    --sidebar-header-line-height: 16px;

    /* header */
    --header-height: 70px;
    --header-default-font-size: 24px;

    /* content */
    --content-width: 1080px;
    --content-width-small: 550px;
    --content-width-larger: 740px;

    /* guide */
    --guide-width: 350px;

    /* bottom navigation */
    --bottom-navigation-height: calc(70px + env(safe-area-inset-bottom, 0));
}

:root,
.light-mode {

    /* status colors*/
    --color-disabled: var(--color-mediumgray);

    /* font colors */
    /* all fonts should use these colors and not from the main colors directly */
    --color-default: var(--color-dark);
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-gray);
    --color-light: var(--color-mediumgray);
    --color-alt: var(--color-white);
    --color-tertiary: var(--color-gray-alt);
    --color-custom-select-border: var(--color-lightgray);

    /* background colors */
    /* all backgrounds should use these colors and not from the main colors directly */
    --background: var(--color-lightgray);
    --background-blue: var(--color-blue);
    --bg-transparent-dark: rgba(0, 0, 0, 0.4);
    --background-secondary: var(--color-white);
    --background-dark: var(--color-softblack);
    --background-focus: var(--color-light-skyblue);
    --background-tertiary: var(--color-gray-alt);
    --background-quaternary: var(--color-mediumgray);
    --background-custom-select-hover: rgba(var(--color-blue-rgb), .075);
    --background-custom-select-selected: rgba(var(--color-blue-rgb), .3);
    --background-session-card: var(--color-white);
    
    --bottom-navigation-border-color: var(--color-mediumgray);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* status colors*/
        --color-disabled: var(--color-gray);
        
        /* font colors */
        --color-default: var(--color-lightgray);
        --color-primary: var(--color-blue);
        --color-secondary: var(--color-gray-alt);
        --color-light: var(--color-mediumgray);
        --color-alt: var(--color-white);
        --color-tertiary: var(--color-gray-alt);
        --color-custom-select-border: var(--color-gray);

        /* background colors */
        --background: var(--color-dark);
        --bg-transparent-dark: rgba(0, 0, 0, 0.4);
        --background-secondary: var(--color-softblack);
        --background-dark: var(--color-softblack);
        --background-focus: var(--color-softblack);
        --background-tertiary: var(--color-gray);
        --background-quaternary: var(--color-dark);
        --background-custom-select-hover: var(--color-dark);
        --background-custom-select-selected: var(--color-dark);
        --background-session-card: var(--color-softblack);

        --bottom-navigation-border-color: var(--color-gray);
    }
}
@media (prefers-color-scheme: light) {
    .dark-mode {
        /* status colors*/
        --color-disabled: var(--color-gray);

        /* font colors */
        --color-default: var(--color-lightgray);
        --color-primary: var(--color-blue);
        --color-secondary: var(--color-gray-alt);
        --color-light: var(--color-mediumgray);
        --color-alt: var(--color-white);
        --color-tertiary: var(--color-gray-alt);
        --color-custom-select-border: var(--color-gray);

        /* background colors */
        --background: var(--color-dark);
        --bg-transparent-dark: rgba(0, 0, 0, 0.4);
        --background-secondary: var(--color-softblack);
        --background-dark: var(--color-softblack);
        --background-focus: var(--color-softblack);
        --background-tertiary: var(--color-gray);
        --background-quaternary: var(--color-dark);
        --background-custom-select-hover: var(--color-dark);
        --background-custom-select-selected: var(--color-dark);
        --background-session-card: var(--color-softblack);
        
        --bottom-navigation-border-color: var(--color-gray);
    }
}

@media (max-width: 1199px) {
    :root {
        --size-title: 18px;
    }
}

@media (max-width: 768px) {
    :root {
        --header-default-font-size: 20px;
        --size-subheader: 16px;
        --size-title: 16px;

        --size-wizard-text: 14px;
        --size-default: 16px;
    }
}
