:root {

    --body_bg:rgba(255, 255, 255, 1);

    --box_bg_w: #ffffff;

    --head_bg_w: #fff;



    --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: #8cc152;

    --theme_light: #a0d468;

    --theme_secondary: #F57F17;



    --theme_rgb: 140,193,82;

    --theme_light_rgb: 160,212,104;

    --theme_secondary_rgb:245,127,23;



    --transparent_theme: rgba(140,193,82, 0.5);

    



    





    --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_w_1: 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: #8cc152;

    --theme_light: #a0d468;

    --theme_secondary: #F57F17;



    --theme_rgb: 140,193,82;

    --theme_light_rgb: 160,212,104;

    --theme_secondary_rgb:245,127,23;



    --transparent_theme: rgba(140,193,82, 0.5);

}