:root {
    /* light theme vars (default) */
    --font: 'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji' !important;
    --rem: 16px;

    --theme: #fff;
    --theme-invert: #000;

    --primary-0: #ebf6ff;
    --primary-1: #D5E9F8;
    --primary-2: #ADD3F2;
    --primary-3: #79C0F8;
    --primary-4: #4DABF5;
    --primary-5: #2196F3;
    --primary-6: #0B79D1;
    --primary-7: #085B9C;
    --primary-8: #0A3C63;
    --primary-9: #051D30;
    --primary-10: #020E17;

    --gray-0: #fff;
    --gray-25: #FCFCFC;
    --gray-50: #F3F3F3;
    --gray-100: #E9E9E9;
    --gray-200: #D9D9D9;
    --gray-300: #CCC;
    --gray-400: #AAA;
    --gray-500: #9E9E9E;
    --gray-600: #7E7E7E;
    --gray-700: #5D5D5D;
    --gray-800: #3D3D3D;
    --gray-999: #000;

    --client-app-bg: #E9EBEB;

    --border-rad: 1.25rem;
    --border-clr: var(--gray-200);

    --text-clr: var(--primary-9);
    --text-clr2: var(--gray-700);
    --text-clr-inverted: #fff;
    --colorTextDisabled: rgba(0,0,0,.25);

    --focused-outline: 3px solid var(--primary-1);

    --sidebar-bg-mobile: var(--theme);
    --sidebar-btn: var(--gray-200);
    --sidebar-btn-hover: var(--gray-400);
    --sidebar-btn-active: var(--theme);
    --sidebar-btn-hide-bg: var(--gray-700);

    --scroll-bg: var(--gray-200);
    --scroll-track: var(--gray-200);
    --scroll-thumb: var(--gray-600);
    --scroll-active: var(--primary-6);

    --flashlight-clr: var(--primary-6);
    --card-bg: var(--theme);
    --card-brd-clr: var(--gray-100);
    --card-list-icon: var(--gray-400);
    --card-score-brd-clr: var(--gray-100);
    --card-score-default-bg: var(--card-bg);
    --card-score-default-tx: var(--primary-7);
    --card-score-hover-bg: var(--primary-0);
    --card-score-hover-tx: var(--primary-7);
    --card-score-active-bg: var(--primary-7);
    --card-score-active-tx: var(--theme);
    --card-score-disabled-bg: var(--theme);
    --card-score-disabled-tx: var(--gray-500);
    --card-tab-hShadow: linear-gradient(to bottom, transparent 50%, var(--gray-25) 85%,var(--gray-50) 100%);
    --card-tab-default-bg: linear-gradient(to bottom, var(--card-bg) 85%, var(--gray-50) 100%);
    --card-tab-default-tx: var(--gray-700);
    --card-tab-active-bg: var(--card-bg);
    --card-tab-active-tx: var(--primary-7);
    --card-tab-hover-bg: linear-gradient(to bottom, var(--card-bg) 85%, var(--gray-50) 100%);
    --card-tab-hover-tx: var(--primary-6);
    --card-tab-disabled-bg: linear-gradient(to bottom, var(--gray-25) 85%, var(--gray-50) 100%);
    --card-tab-disabled-tx: var(--gray-400);

    --tooltip-bg: var(--gray-800);
    --tooltip-tx: ver(--theme);
    --tooltip-fnt-size: 13;

    --ribbon-left: var(--gray-600);
    --ribbon-right: var(--gray-800);

    --spinner-shadow: rgba(255, 255, 255, .7);

    @media screen and (max-width: 767px) {
        /*--rem: 14px;*/
    }
}

@media (prefers-color-scheme: brown) {
    :root {
        /* dark theme vars (default) */
        --primary-0: #E8D8C5;
        --primary-1: #FEF8F2;
        --primary-2: #F7E1CA;
        --primary-3: #E9C7A2;
        --primary-4: #DCB386;
        --primary-5: #CF9F6A;
        --primary-6: #A97944;
        --primary-7: #9A652B;
        --primary-8: #724411;
        --primary-9: #5E390F;
        --primary-10: #2A1804;

        --client-app-bg: #FFFFFF;
    }
}