:root {

    --color-theme: #009688;
    /* 主字体色彩 */    
    --color-text-primary: #505153;
    --color-text-regular: #666666;
    --color-text-secondary: #999999;
    --color-text-heavy: #333333;

    /* 辅助字体颜色，各主题通用 */
    --color-text-placeholder: #a8abb2;
    --color-text-icon: #bbbbbb;
    --color-text-disabled: #a8abb2;

    /* 特殊字体颜色 */
    --color-text-sidetop: #ffffff;


    /* 边框：所有组件元素用border，表格、卡片、布局等用border-lighter */
    --color-border: #e6e6e6;
    --color-border-hover: #d2d2d2;
    --color-border-light: #e6e6e6;
    --color-border-lighter: #ebeef5;
    --color-border-logo: #1e273d;
    --color-border-header: #1e273d;

    /* 背景：bg-body是全局背景色 */
    --color-bg-body: #f4f6fa;
    --color-bg-light: #ebeef5;
    --color-bg-lighter: #f4f6fa;

    /* 组件背景色，各主题通用 */
    --color-bg-table-header: #fafafa;
    --color-bg-mobile-shade: #00000040;
    --color-bg-tab-title: #ffffff;

    /* 主题导航栏、侧边栏、主题色 */
    --color-bg-header: #25304b;
    --color-bg-logo: #25304b;
    --color-text-header: #ffffffb3;
    --color-text-logo: #ffffffb3;
    --color-text-header-hover: #ffffff;
    --color-text-header-this: #ffffff;
    --color-bg-side: #25304b;
    --color-bg-side-child: #0000004d;
    --color-text-side: #ffffffb3;
    --color-text-side-this: #ffffff;
    --color-text-sidetop: #ffffffb3;
    --color-text-side-hover: #ffffff;
    --color-bg-theme: #009688;
    --color-bg-theme-light: #00968899;
    --color-bg-theme-trans: #00968822;
    --color-bg-theme-trans-light: #00968811;
    --color-bg-this: #00968899;

    --color-text-nav-this: #ffffff;

    /* 其他通用组件背景色，各主题通用 */
    --color-bg-scrollbar: #d1d1d1;
    --color-bg-scrollbar-hover: #b8b8b8;
    --color-border-nav-more: #8c8c8c;

    /* 状态颜色，各主题通用 */
    --color-reqiured: #ed4014;
    --color-danger: #ff5722;
    --color-danger-bg: #ff572233;
    --color-danger-light: #ffa39e;
    --color-warning: #ffb800;
    --color-warning-bg: #ffb80033;
    --color-warning-light: #ffe58f;
    --color-success: #5fb878;
    --color-success-bg: #5fb87833;
    --color-success-light: #b7eb8f;
    --color-info: #01AAED;
    --color-blue: #1890ff;
    --color-blue-bg: #1890ff33;
    --color-blue-light: #91d5ff;
    --color-muted: #c2c2c2;
    --color-grey: #8c8c8c;
    --color-grey-bg: #8c8c8c33;
    --color-grey-light: #cccccc;
    --color-process: #ff920f;

    --color-link: #007bff;
}

.theme-elementui{
    --color-bg-header:#25304b;

    --color-text-primary: #303133;
    --color-text-regular: #606366;
    --color-text-secondary: #909399;
    --color-text-placeholder: #c0c4cc;

    --color-theme: #409eff;
    --color-success: #67c23a;
    --color-warning: #e6a23c;
    --color-danger: #f56c6c;
    --color-info: #909399;

    --color-border: #dcdfe6; /* 组件边框颜色*/
    --color-border-light: #e4e7ed;
    --color-border-lighter: #ebeef5; /*表格边框*/
    --color-border-extra-light: #f2f6fc;

    --color-bg-table-header: #f5f7fa;

}

.theme-custom1 {
    --color-bg-header: #ffffff;
    --color-bg-logo: #282c34;
    --color-bg-side: #282c34;
    --color-bg-side-child: #282c3411;

    --color-text-header: #000000b3;
    --color-text-logo: #ffffff;
    --color-text-header-hover: #1890ff;
    --color-text-header-this: #1890ff;

    --color-text-side: #ffffffb3;
    --color-text-side-this: #ffffff;
    --color-text-sidetop: #ffffffb3;
    --color-text-side-hover: #ffffff;

    --color-text-nav-this: #ffffff;

    --color-theme: #1890ff;
    --color-bg-theme: #1890ff;
    --color-bg-theme-light: #1890ff44;
    --color-bg-theme-trans: #1890ff22;
    --color-bg-theme-trans-light: #1890ff11;
    --color-bg-this: #1890ff99;

    --color-border-logo: #282c34;
    --color-border-header: #e6e6e6;
}

.theme-custom2 {
    --color-bg-header: #282c34;
    --color-bg-logo: #282c34;
    --color-bg-side: #ffffff;
    --color-bg-side-child: #282c3401;

    --color-text-header: #ffffffb3;
    --color-text-logo: #ffffffb3;
    --color-text-header-hover: #ffffff;
    --color-text-header-this: #ffffff;

    --color-text-side: #000000b3;
    --color-text-side-hover: #1890ff;
    --color-text-side-this: #1890ff;
    --color-text-sidetop: #000000b3;

    --color-text-nav-this: #ffffff;

    --color-theme: #1890ff;
    --color-bg-theme: #1890ff;
    --color-bg-theme-light: #1890ff44;
    --color-bg-theme-trans: #1890ff22;
    --color-bg-theme-trans-light: #1890ff11;
    --color-bg-this: #1890ff99;

    --color-border-logo: #202329;
    --color-border-header: #202329;
}

.theme-antdesign{
        --color-text-primary: #1f1f1f;
        --color-text-regular: #1f1f1f;
        --color-text-secondary: #595959;
        --color-text-placeholder: #bfbfbf;
        --color-text-disable: #bfbfbf;

    
        --color-theme: #4291fb;
        --color-success: #5cc230;
        --color-warning: #f3ae34;
        --color-danger: #f65455;
        --color-info: #909399;
    
        --color-border: #d9d9d9;
        --color-border-light: #f0f0f0;
        --color-border-divider: #f0f0f0;
        
        --color-bg-layout: #f5f5f5;

}

.theme-blue {
    --color-bg-header: #ffffff;
    --color-bg-logo: #ffffff;
    --color-bg-side: #ffffff;
    --color-bg-side-child: #007bff11;

    --color-text-header: #000000b3;
    --color-text-logo: #000000b3;
    --color-text-header-hover: #007bff;
    --color-text-header-this: #007bff;

    --color-text-side: #000000b3;
    --color-text-side-hover: #007bff;
    --color-text-side-this: #007bff;
    --color-text-sidetop: #000000b3;
    
    --color-text-nav-this: #ffffff;

    --color-theme: #007bff;
    --color-bg-theme: #007bff;
    --color-bg-theme-light: #007bff44;
    --color-bg-theme-trans: #007bff22;
    --color-bg-theme-trans-light: #007bff11;
    --color-bg-this: #007bff99;

    --color-border-logo: #e6e6e6;
    --color-border-header: #e6e6e6;

}

.theme-pink {
    --color-bg-header: #ffffff;
    --color-bg-logo: #ffffff;
    --color-bg-side: #ffffff;
    --color-bg-side-child: #fb729911;

    --color-text-header: #000000b3;
    --color-text-logo: #000000b3;
    --color-text-header-hover: #fb7299;
    --color-text-header-this: #fb7299;
    --color-text-side: #000000b3;
    --color-text-side-hover: #fb7299;
    --color-text-side-this: #fb7299;
    --color-text-sidetop: #000000b3;

    --color-text-nav-this: #ffffff;

    --color-theme: #fb7299;
    --color-bg-theme: #fb7299;
    --color-bg-theme-light: #fb729944;
    --color-bg-theme-trans: #fb729922;
    --color-bg-theme-trans-light: #fb729911;
    --color-bg-this: #fb729999;

    --color-border-logo: #e6e6e6;
    --color-border-header: #e6e6e6;

}

.theme-orange {
    --color-bg-header: #ffffff;
    --color-bg-logo: #ffffff;
    --color-bg-side: #ffffff;
    --color-bg-side-child: #ff740011;

    --color-text-header: #000000b3;
    --color-text-logo: #000000b3;
    --color-text-header-hover: #ff7400;
    --color-text-header-this: #ff7400;
    --color-text-side: #000000b3;
    --color-text-side-hover: #ff7400;
    --color-text-side-this: #ff7400;
    --color-text-sidetop: #000000b3;

    --color-text-nav-this: #ffffff;

    --color-theme: #ff7400;
    --color-bg-theme: #ff7400;
    --color-bg-theme-light: #ff740044;
    --color-bg-theme-trans: #ff740022;
    --color-bg-theme-trans-light: #ff740011;
    --color-bg-this: #ff740099;

    --color-border-logo: #e6e6e6;
    --color-border-header: #e6e6e6;

}



.theme-blue {
    /* --color-bg-header: #3c8dbc;
    --color-bg-theme: #3c8dbc;
    --color-bg-theme-trans: #3c8dbc33;
    --color-bg-this: #3c8dbc;
    --color-bg-side: #3c8dbc;
        --color-text-sidetop: #ffffff;
    --color-bg-body-tab-title: #ffffff; */
}

/* TODO：图表都以主题色调为基础扩展，设计一批图表主题色 */