:root {
    /* common */
    --bgColor: #fff;
    --bgColor_1: #aaa;
    --color: #000;
    --shadowColor: 0, 0, 0;
    --borderColor: #444;
    --brandLogoTextColor: #000;

    /* body */
    --bodyBgColorDefault: var(--bgColor);
    --bodyBgColorCustom: var(--bgColor_1);
    --textColor: var(--color);

    /* top menu */
    --topMenuColor: var(--color);
    --topMenuBgColor: var(--bgColor);
    --topMenuBoxShadow:
        0 2px 4px rgba(var(--shadowColor), 0.1),
        0 8px 16px rgba(var(--shadowColor), 0.08);

    /* side menu */
    --sideMenuColor: var(--color);
    --sideMenuBgColor: var(--bgColor);
    --sideMenuBorder: 1px solid var(--borderColor);
    --sideMenuBoxShadow: 2px 0 10px rgba(var(--shadowColor), 0.2);

    /* search menu */
    --searchMenuColor: var(--color);
    --searchMenuBgColor: var(--bgColor);
    --searchMenuBorder: 2px solid var(--borderColor);
    --searchMenuBoxShadow: 2px 0 10px rgba(var(--shadowColor), 0.2);
    
    /* footer */
    --footerBgColor: var(--bgColor);
    --footerTextColor: var(--textColor);
    --footerBoxShadow:
        0 -2px 4px rgba(var(--shadowColor), 0.1),
        0 -8px 16px rgba(var(--shadowColor), 0.08);
    --footerBtnBorder: 3px solid var(--color);
    --footerBtnBgColor: var(--bgColor);
    --footerBtnTextColor: var(--color);

    /* Link */
    --linkColor: var(--color);
    --linkHoverColor: #0c8059;
    --linkDangerColor: red;
    
    /* Button */
    --btnBgColor: var(--bgColor);
    --btnTextColor: var(--color);
    --btnBorder: 2px solid var(--color);

    --btnDangerColor: red;

    /* selector */
    --selectorBgColor: var(--bgColor);
    --selectorTextColor: var(--textColor);
    --selectorBorder: 2px solid var(--color);

    /* Card Section */
    --cardSectionBgColor: var(--bgColor);
    --cardSectionTopBorder: 0.2rem solid var(--color);
    --cardSectionBoxShadow: 0 0.2rem 2rem rgba(var(--shadowColor), 0.1);

    --cardSectionTitleBottomBorder: 0.125rem solid var(--borderColor);
    
    /* card */
    --cardBgColor: var(--bgColor);
    --cardBottomBorder: 1px solid var(--borderColor);
    --cardBoxShadow: 0 0.2rem 2rem rgba(var(--shadowColor), 0.1);
    --cardTextColor: var(--textColor);
    
    --toolbar-control-height: 28px;
}

:root.dark {
    --bgColor: #1e1f22;
    --bgColor_1: #2a2b2f;
    --color: #e4e6eb;
    --shadowColor: 255, 255, 255;
    --borderColor: #3a3b3f;
    --brandLogoTextColor: #e4e6eb;
}

:root.light {
    --bgColor: #f7f8fa;
    --bgColor_1: #e9ebef;
    --color: #1f2933;
    --shadowColor: 0, 0, 0;
    --borderColor: #555;
    --brandLogoTextColor: #111827;
}

:root.light-sky {
    --bgColor: #ddf2ff;
    --bgColor_1: #c2ebff;
    --color: #1e3a4c;
    --shadowColor: 0, 0, 0;
    --borderColor: #c6dbe6;
    --brandLogoTextColor: #0f2a38;
}

:root.light-green {
    --bgColor: #f4fbf6;
    --bgColor_1: #e3f3e8;
    --color: #1f3d2b;
    --shadowColor: 0, 0, 0;
    --borderColor: #c7e3cf;
    --brandLogoTextColor: #163524;
}
/*
@font-face {
    font-family: Michroma;
    src: 
        url(../fonts/Michroma/Michroma-Regular.woff2) format("woff2"), 
        url(../fonts/Michroma/Michroma-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*/