:root {


    --colorText: #f2f2f2;
    --colorPrimary: #AF695A;
    --colorSecondary: hsl(11, 35%, 55%);
    --colorBorder: hsl(11, 35%, 42%);
    --colorHover: hsl(11, 35%, 56%);
    --colorActive: hsl(11, 35%, 48%);

    --colorIconText: #f2f2f2;
    --colorIconBorder: hsl(11, 35%, 47%);
    --colorIconHover: hsl(11, 35%, 57%);
    --colorIconActive: hsl(11, 35%, 54%);

    --colorMenuText: #f2f2f2;
    --colorMenuBG: hsl(11, 35%, 57%);
    --colorMenuBorder: hsl(11, 35%, 47%);
    --colorMenuHover: hsl(11, 35%, 52%);

    --colorTipText: #f2f2f2;
    --colorTipBG: hsl(11, 35%, 54%);
    --colorTipBorder: hsl(11, 35%, 42%);


    /* scrollbar */
    --scrollbar-color: rgba(0, 0, 0, 0.2);
    --scrollbar-color-hover: rgba(0, 0, 0, 0.3);
    --scrollbar-color-size: 6px;
    /* selection */
    --selection-color: #fff;
    --selection-color-bg: #338fff;
    /* body */
    --body-color: var(--colorText);
    --body-font-size: 13px;
    /* search */
    --search-color-bg: var(--colorHover);
    --search-color-input: var(--colorText);
    --search-color-input-bg: var(--colorBorder);
    /* top */
    --top-color-bg: var(--colorPrimary);
    --top-color-border: transparent;
    --top-size-border: 0px;
    --top-btn-color: var(--colorText);
    --top-btn-color-hover: var(--colorText);
    --top-btn-color-active: var(--colorText);
    --top-btn-color-bg: transparent;
    --top-btn-color-bg-hover: var(--colorHover);
    --top-btn-color-bg-active: var(--colorActive);
    /* left*/
    --left-width: 110px;
    --left-color-bg: var(--colorPrimary);
    --left-color-border: transparent;
    --left-size-border: 0px;
    --left-item-color: var(--colorText);
    --left-item-color-hover: var(--colorText);
    --left-item-color-active: var(--colorText);
    --left-item-color-bg: transparent;
    --left-item-color-bg-hover: var(--colorHover);
    --left-item-color-bg-active: var(--colorActive);
    /* right */
    --right-color-bg: var(--colorHover);
    --right-item-color: var(--colorIconText);
    --right-item-color-hover: var(--colorIconText);
    --right-item-color-active: var(--colorIconText);
    --right-item-color-border: transparent;
    --right-item-color-border-hover: var(--colorIconBorder);
    --right-item-color-border-active: var(--colorIconBorder);
    --right-item-color-bg: transparent;
    --right-item-color-bg-hover: var(--colorIconHover);
    --right-item-color-bg-active: var(--colorIconActive);
    /* modal */
    --modal-color-bg: var(--colorSecondary);
    --modal-header-color: var(--colorText);
    --modal-header-color-bg: var(--colorPrimary);
    --modal-header-btn-color: var(--colorText);
    --modal-header-btn-color-hover: var(--colorText);
    --modal-header-btn-color-active: var(--colorText);
    --modal-header-btn-color-bg: transparent;
    --modal-header-btn-color-bg-hover: var(--colorHover);
    --modal-header-btn-color-bg-active: var(--colorActive);
    --modal-body-color: var(--colorText);
    --modal-body-color-bg: var(--colorSecondary);
    --modal-body-primary-color: var(--colorText);
    --modal-body-primary-color-bg: var(--colorPrimary);
    --modal-footer-color-bg: var(--colorSecondary);
    --modal-footer-color-border: var(--colorBorder);
    --modal-footer-size-border: 1px;
    /* menu */
    --menu-color-bg: var(--colorMenuBG);
    --menu-color-shadow: rgba(0, 0, 0, 0.35);
    --menu-color-subtn: var(--colorMenuText);
    --menu-color-subtn-hover: var(--colorMenuText);
    --menu-item-color: var(--colorMenuText);
    --menu-item-color-hover: var(--colorMenuText);
    --menu-item-color-disabled: #272727;
    --menu-item-color-bg: var(--colorMenuBG);
    --menu-item-color-bg-hover: var(--colorMenuHover);
    --menu-item-color-bg-disabled: #fff;
    --menu-item-color-divider: var(--colorMenuBorder);
    /* btn */
    --btn-color: var(--colorText);
    --btn-color-hover: var(--colorText);
    --btn-color-active: var(--colorText);
    --btn-color-bg: var(--colorSecondary);
    --btn-color-bg-hover: var(--colorHover);
    --btn-color-bg-active: var(--colorActive);
    --btn-color-border: var(--colorBorder);
    --btn-color-border-hover: var(--colorBorder);
    --btn-color-border-active: var(--colorBorder);
    --btn-size-border: 1px;
    --btn-color-primary: var(--colorText);
    --btn-color-primary-hover: var(--colorText);
    --btn-color-primary-active: var(--colorText);
    --btn-color-primary-bg: var(--colorHover);
    --btn-color-primary-bg-hover: var(--colorPrimary);
    --btn-color-primary-bg-active: var(--colorActive);
    --btn-color-primary-border: var(--colorBorder);
    --btn-color-primary-border-hover: var(--colorBorder);
    --btn-color-primary-border-active: var(--colorBorder);
    --btn-size-primary-border: 1px;
    /* input */
    --input-color: var(--colorText);
    --input-color-bg: var(--colorMenuBG);
    --input-color-bg-disabled: #f0f0f0;
    --input-color-border: var(--colorBorder);
    --input-color-border-hover: var(--colorBorder);
    --input-color-border-active: var(--colorBorder);
    --input-size-border: 1px;
    /* toolTip */
    --toolTip-color: var(--colorTipText);
    --toolTip-color-border: var(--colorTipBorder);
    --toolTip-color-bg: var(--colorTipBG);
    --toolTip-size-border: 2px;
    /* basic */
    --hr-color-border: var(--colorBorder);
    --hr-size-border: 2px;
}