:root {
    --body_bg:rgba(255, 255, 255, 1);
    --box_bg_w: #ffffff;
    --head_bg_w: #ffffff;

    --text_b_1: rgba(0, 0, 0, 0.87);
    --text_b_2: rgba(0, 0, 0, 0.54);
    --text_b_3: rgba(0, 0, 0, 0.38);/*提示文本禁用状态*/ 

    --text_w_1: rgba(255, 255, 255, 1);
    --text_w_2: rgba(255, 255, 255, .70);
    --text_w_3: rgba(255, 255, 255, .50);

    --bg_w_1: #ffffff;
    --bg_w_2: #f1f1f1;
    --bg_w_3: #f5f5f5;
    --bg_w_4: #e0e0e0;

    --bg_b_1: #000000;
    --bg_b_2: #212121;
    --bg_b_3: #303030;
    --bg_b_4: #424242;

    --color_w_1: #ffffff;
    --color_w_2: #f1f1f1;
    --color_w_3: #f5f5f5;
    --color_w_4: #e0e0e0;
        
    --color_b_1: #000000;
    --color_b_2: #212121;
    --color_b_3: #303030;
    --color_b_4: #424242;

    --border_b: rgba(0, 0, 0, 0.12);
    --border_w: rgba(255, 255, 255, .12);

    --shadow:0 0 15px 2px rgba(0, 0, 0, 0.2); 
    --shadow_hover:0px 0px 30px 2px rgba(0,0,0,.1); 
    --shadow_header: 0px 0px 4px rgba(0, 0, 0, 0.4);
    --shadow_icon:0 4px 20px rgba(0,0,0,0.09);

    --semi_head_bg_w: rgba(255, 255, 255, 0.5);
    --semi_head_bg_b: rgba(0, 0, 0, 0.3);

    --transparent_w: rgba(255, 255, 255, 0.6);
    --transparent_b: rgba(0, 0, 0, 0.3);

    --theme: #e9573f;/*系统色*/
    --theme_light: #fc6e51;/*系统色浅色*/
    --theme_secondary: #F57F17;/*辅助系统*/
    --theme_rgb: 233,87,63;/*linear-gradient(50deg, rgba(15, 90, 224,0.92) 30%, rgba(114, 2, 187, 0.92) 70%);  系统色*/
    --theme_light_rgb: 252,110,81;/*系统色浅色*/
    --theme_secondary_rgb:245,127,23;/*辅助系统*/
   
    --transparent_theme: rgba(233,87,63, 0.5);
    




    --bg_th_secondary: linear-gradient(to top, rgba(233,87,63, 0.96), rgba(245,127,23, 0.96));
    --box_bg_gray: #f1f1f1;/* box 或section背景*/
    --box_bg_gray_2nd: #f5f5f5;/* section灰应用层面 head*/
    --box_bg_gray_3nd: #e0e0e0;/*灰状态 head*/

    --text_b_primary:  rgba(0, 0, 0, 0.87);/*层级最高 黑文字*/
    --text_b_secondary: rgba(0, 0, 0, 0.54);/*层级中 辅助黑文字 */
    --text_b_disabled: rgba(0, 0, 0, 0.38);/*层级最低 文本框和标签 提示文本禁用状态*/ 
    --text_b_divider: rgba(0, 0, 0, 0.12);/*分隔线黑色*/

    --text_w_primary: rgba(255, 255, 255, 1);/*白色文字*/
    --text_w_secondary: rgba(255, 255, 255, .70);/*辅助白文字*/
    --text-w_disabled: rgba(255, 255, 255, .50);/*禁用状态白文字*/
    --text_w_divider: rgba(255, 255, 255, .12);/*分隔线白色*/

    /*半透明 遮罩使用*/
    --tran_bg_w: rgba(255, 255, 255, 0.6);/*亮色遮罩 40%-60%*/
    --tran_bg_b: rgba(0, 0, 0, 0.3);/*暗色遮罩 20%-40%*/
    --tran_bg_theme: rgba(0, 0, 0, 0.3);

    --border_b_divider: rgba(255, 255, 255, 1);/*分隔线黑色*/


    /*浅色背景下字体*/
    --text_black_primary:  rgba(0, 0, 0, 0.87);/*层级最高 黑文字*/
    --text_black_secondary: rgba(0, 0, 0, 0.54);/*层级中 辅助黑文字 */
    --text_black_disabled: rgba(0, 0, 0, 0.38);/*层级最低 文本框和标签 提示文本禁用状态*/ 
    --text_black_divider: rgba(0, 0, 0, 0.12);/*分隔线黑色*/
    /*--text-black-icon: rgba(0, 0, 0, 0.54);有待使用*/
    /*--text-black-icon-secondary: rgba(0, 0, 0, 0.26);有待使用*/

    /*深色背景下字体*/
    --text_white_primary: rgba(255, 255, 255, 1);/*白色文字*/
    --text_white_secondary: rgba(255, 255, 255, .70);/*辅助白文字*/
    --text-white_disabled: rgba(255, 255, 255, .50);/*禁用状态白文字*/
    --text_white_divider: rgba(255, 255, 255, .12);/*分隔线白色*/
    /*--text-white-icon: rgba(255, 255, 255, 0.87);有待使用*/
    /*--text-white-icon-secondary: rgba(255, 255, 255, 0.54);有待使用*/

    /*浅色背景*/
    --bg_white: #ffffff;/*index高 白色文字 box*/
    --bg_gray: #f1f1f1;/* box 或section背景*/
    --bg_gray_2nd: #f5f5f5;/* section灰应用层面 head*/
    --bg_gray_3nd: #e0e0e0;/*灰状态 head*/

    /*深色背景*/
    --bg_black: #000000;/*黑状态 头部或 section*/
    --bg_black_2nd: #212121;/*黑应用层面section*/
    --bg_black_3nd: #303030;/*黑背景 box section*/
    --bg_black_4nd: #424242;/*对话框 box  z-index最高*/


    /*半透明 遮罩使用*/
    --semi_head_bg_white: rgba(255, 255, 255, 0.6);/*头部白色透明*/
    --semi_head_bg_black: rgba(0, 0, 0, 0.3);/*头部黑色透明*/
    --semi_bg_white: rgba(255, 255, 255, 0.6);/*亮色遮罩 40%-60%*/
    --semi_bg_black: rgba(0, 0, 0, 0.3);/*暗色遮罩 20%-40%*/
    --semi_bg_theme: rgba(0, 0, 0, 0.3);



   --vf_blue: #0d6efd;
   --vf_indigo: #6610f2;
   --vf_purple: #6f42c1;
   --vf_pink: #d63384;
   --vf_red: #dc3545;
   --vf_orange: #fd7e14;
   --vf_yellow: #ffc107;
   --vf_green: #28a745;
   --vf_teal: #20c997;
   --vf_cyan: #17a2b8;
   --vf_white: #fff;
   --vf_gray: #6c757d;
   --vf_gray-dark: #343a40;
   --vf_primary: #0d6efd;
   --vf_secondary: #6c757d;
   --vf_success: #28a745;
   --vf_info: #17a2b8;
   --vf_warning: #ffc107;
   --vf_danger: #dc3545;
   --vf_light: #f8f9fa;
   --vf_dark: #343a40;
}

[data-theme='dark']{
    --body_bg:rgba(0, 0, 0, 1);
    --box_bg_w: #212121;
    --head_bg_w: #000;

    --text_b_1: rgba(255, 255, 255, 0.87);
    --text_b_2: rgba(255, 255, 255, 0.54);
    --text_b_3: rgba(255, 255, 255, 0.38);

    --text_w_1: rgba(255, 255, 255, 0.87);
    --text_w_2: rgba(255, 255, 255, 0.54);
    --text_w_3: rgba(255, 255, 255, 0.38);

    --bg_w_1: #000000;
    --bg_w_2: #212121;
    --bg_w_3: #303030;
    --bg_w_4: #424242;

    --bg_b_1: #000000;
    --bg_b_2: #212121;
    --bg_b_3: #303030;
    --bg_b_4: #424242;

    --color_w_1: #f1f1f1;
    --color_w_2: #f5f5f5;
    --color_w_3: #e0e0e0;
    --color_w_4: #e0e0e0;
    
    --color_b_1: #000000;
    --color_b_2: #212121;
    --color_b_3: #303030;
    --color_b_4: #424242;

    --border_b: rgba(0, 0, 0, 0.12);
    --border_w: rgba(255, 255, 255, .12);   

    --shadow:0 6px 30px rgba(0, 0, 0, 0.2); 
    --shadow_hover:0px 0px 30px 2px rgba(0,0,0,.1); 
    --shadow_header: 0px 0px 4px rgba(0, 0, 0, 0.4);
    --shadow_icon:0 4px 20px rgba(0,0,0,0.09);

    --transparent_w: rgba(0, 0, 0, 0.6);
    --transparent_b: rgba(0, 0, 0, 0.3);

    --semi_head_bg_w: rgba(255, 255, 255, 0.6);
    --semi_head_bg_b: rgba(0, 0, 0, 0.3);

    --theme: #e9573f;/*系统色*/
    --theme_light: #fc6e51;/*系统色浅色*/
    --theme_secondary: #F57F17;/*辅助系统*/
    --theme_rgb: 233,87,63;/*linear-gradient(50deg, rgba(15, 90, 224,0.92) 30%, rgba(114, 2, 187, 0.92) 70%);  系统色*/
    --theme_light_rgb: 252,110,81;/*系统色浅色*/
    --theme_secondary_rgb:245,127,23;/*辅助系统*/
   
    --transparent_theme: rgba(233,87,63, 0.5);
}