/*
 * 1. 确认配置哪些token
 *    border-width font-family
 * 2. 确认编译组件token 的逻辑 done
 * 3. 完善所有样式
 */

body .demoWrapperLark {

    // palette
    --semi-blue-8: 9,16,​31;
    --semi-pusemi-rple-8: 70,11,70;
    --semi-orange-8: 107,57,0;
    --semi-blue-5: 51,112,255;
    --semi-pusemi-rple-5: 209,54,209;
    --semi-orange-5: 255,136,0;
    --semi-pink-5: 240,29,148;
    --semi-teal-5: 0,214,185;
    --semi-grey-9: 15,17,20;
    
    // global
    --semi-color-success-light-default: #d9f5d6;
    --semi-border-radius-extra-small: 4px;
    --semi-border-radius-small: 4px;
    --semi-color-text-0: #1f2329;
    --semi-color-text-2: #8f959e;
    --semi-color-disabled-text: #8f959e;
    --semi-color-bg-0: #fff;
    --semi-color-border: #dee0e3;
    --semi-color-fill-0: #fff;
    --semi-color-fill-1: #fff;
    --semi-color-fill-2: #fff;
    --semi-color-primary: #3370ff;
    --semi-color-primary-hover: rgb(78, 131, 253);
    --semi-color-primary-active: rgb(36, 91, 219);
    --semi-color-primary-light-default: #fff;
}

body .demoWrapperDouyin {
    // palette
    --semi-blue-8: 16,​140,​255;
    --semi-pusemi-rple-8: 105,84,240;
    --semi-orange-8: 255,183,51;
    --semi-blue-5: 16,140,255;
    --semi-pusemi-rple-5: 105,84,240;
    --semi-orange-5: 255,183,51;
    --semi-pink-5: 233,30,99;
    --semi-teal-5: 0,179,161;
    --semi-grey-9: 28,31,35;
    
    // global
    --semi-color-success-light-default: rgba(var(--semi-green-0), 1);
    --semi-border-radius-extra-small: 12px;
    --semi-border-radius-small: 3px;
    --semi-color-text-0: #0a0c20;
    --semi-color-text-2: #6c6f8d;
    --semi-color-disabled-text: #dadce3;
    --semi-color-bg-0: #f8f9fd;
    --semi-color-border: #f1f2f5;
    --semi-color-fill-0: #f1f2f5;
    --semi-color-fill-1: #eaecf1;
    --semi-color-fill-2: #dadce3;
    --semi-color-primary: #fe2c55;
    --semi-color-primary-hover: #ef2149;
    --semi-color-primary-active: #ef2149;
    --semi-color-primary-light-default: #e0183f;

    --custom-shadow-0: 0 0 24px rgba(0, 0, 0, .04);
}

body .demoWrapperHuoshan {
    // palette
    --semi-blue-8: 0,61,143;
    --semi-pusemi-rple-8: 92,15,117;
    --semi-orange-8: 126,49,0;
    --semi-blue-5: 0,119,250;
    --semi-purple-5: 158,40,179;
    --semi-orange-5: 252,136,0;
    --semi-pink-5: 233,30,99;
    --semi-teal-5: 0,179,161;
    --semi-grey-9: 28,31,35;
    
    // global
    --semi-color-success-light-default: rgba(var(--semi-green-0), 1);
    --semi-border-radius-extra-small: 2px;
    --semi-border-radius-small: 2px;
    --semi-color-text-0: #1d2129;
    --semi-color-text-2: #86909c;
    --semi-color-disabled-text: #c9cdd4;
    --semi-color-bg-0: #fff;
    --semi-color-border: #e5e6eb;
    --semi-color-fill-0: #f2f3f5;
    --semi-color-fill-1: #e5e8ef;
    --semi-color-fill-2: #c9cdd4;
    --semi-color-primary: #165dff;
    --semi-color-primary-hover: #4086ff;
    --semi-color-primary-active: #0e49d2;
    --semi-color-primary-light-default: #e8f3ff;
}

body .demoWrapperCapCut {
    // palette
    --semi-blue-8: 212,235,255;
    --semi-purple-8: 240,206,239;
    --semi-orange-8: 255,241,208;
    --semi-blue-5: 84,166,255;
    --semi-purple-5: 187,83,194;
    --semi-orange-5: 255,182,67;
    --semi-pink-5: 239,86,122;
    --semi-teal-5: 51,194,187;
    --semi-grey-9: 249,249,249;
     
    // global
    --semi-color-success-light-default: rgba(18,60,27, 0.15);
    --semi-border-radius-extra-small: 3px;
    --semi-border-radius-small: 3px;
    --semi-color-text-0: rgba(249, 249, 249, 1);
    --semi-color-text-2: rgba(249, 249, 249, 0.6);
    --semi-color-disabled-text: rgba(249, 249, 249, 0.35);;
    --semi-color-bg-0: rgb(22, 22, 26);
    --semi-color-bg-2: rgb(53, 54, 60);
    --semi-color-border: rgba(59, 58, 52, 1);
    --semi-color-fill-0: rgba(234, 234, 230,  0.05);
    --semi-color-fill-1: rgba(234, 234, 230, 0.09);
    --semi-color-fill-2: rgba(234, 234, 230, 0.13);
    --semi-color-primary: rgba(253, 224, 67, 1);
    --semi-color-primary-hover: rgba(253,236,113, 1);
    --semi-color-primary-active: rgba(254, 246, 160, 1);
    --semi-color-primary-light-default: rgba(84, 74, 3, 1);
}

body[theme-mode='dark'] {
    .demoWrapperLark {
        // palette
        --semi-blue-8: 184, ​  207, ​  255;
        --semi-purple-8:  211, ​  186, ​  253;
        --semi-orange-8: 255, ​  216, ​  172;
        --semi-blue-5: 67, ​  130, ​  255;
        --semi-purple-5:  151, ​   98, ​  245;
        --semi-orange-5:  255, ​  158, ​   46;
        --semi-pink-5: 227, ​   82, ​  163;
        --semi-teal-5:   52, ​  217, ​  195;
        --semi-grey-9: 248, ​  248, ​  248;
        
        // global
        --semi-color-success-light-default: #BDF0B8;
        --semi-border-radius-extra-small: 4px;
        --semi-border-radius-small: 4px;
        --semi-color-text-0: #F0F0F0;
        --semi-color-text-2: #C1C1C1;
        --semi-color-disabled-text: #5F5F5F;
        --semi-color-bg-0: #101010;
        --semi-color-border: #5F5F5F;
        --semi-color-fill-0: transparent;
        --semi-color-fill-1: rgba(240, 240, 240, 0.08);
        --semi-color-fill-2: rgba(240, 240, 240, 0.12);
        --semi-color-primary: #4382FF;
        --semi-color-primary-hover: #5E94FF;
        --semi-color-primary-active: #2E65D1;
        --semi-color-primary-light-default: #2E2E2E;
    }

    .demoWrapperDouyin {
        // palette
        --semi-blue-8: 212,236,255;
        --semi-purple-8: 239,206,240;
        --semi-orange-8: 255,239,208;
        --semi-blue-5: 84,169,255;
        --semi-purple-5: 181,83,194;
        --semi-orange-5: 255,174,67;
        --semi-pink-5: 239,86,134;
        --semi-teal-5: 51,194,176;
        --semi-grey-9: 249,249,249;
        
        // global
        --semi-color-success-light-default: rgba(93, 194, 100, 0.15);
        --semi-border-radius-extra-small: 12px;
        --semi-border-radius-small: 3px;
        --semi-color-text-0: #F9F9F9;
        --semi-color-text-2: rgba(249, 249, 249, 0.6);
        --semi-color-disabled-text: #555B61;
        --semi-color-bg-0: #000;
        --semi-color-border: rgba(255, 255, 255, 0);
        --semi-color-fill-0: rgba(255, 255, 255, 0.05);
        --semi-color-fill-1: rgba(255, 255, 255, 0.09);
        --semi-color-fill-2: rgba(255, 255, 255, 0.13);
        --semi-color-primary: #FE2C55;
        --semi-color-primary-hover: #EF2149;
        --semi-color-primary-active: #EF2149;
        --semi-color-primary-light-default: #E0183F;
    }

    .demoWrapperHuoshan {
        // palette
        --semi-blue-8: 212,236,255;
        --semi-purple-8: 239,206,240;
        --semi-orange-8: 255,239,208;
        --semi-blue-5: 84,169,255;
        --semi-purple-5: 181,83,194;
        --semi-orange-5: 255,174,67;
        --semi-pink-5: 239,86,134;
        --semi-teal-5: 51,194,176;
        --semi-grey-9: 249,249,249;
        
        // global
        --semi-color-success-light-default: rgb(236,247,236);
        --semi-border-radius-extra-small: 2px;
        --semi-border-radius-small: 2px;
        --semi-color-text-0: rgba(255,255,255,0.9);
        --semi-color-text-2: rgba(255,255,255,0.5);
        --semi-color-disabled-text: rgba(255,255,255,0.3);
        --semi-color-bg-0: #17171A;
        --semi-color-border: #2e2e30;
        --semi-color-fill-0: rgba(255,255,255,0.08);
        --semi-color-fill-1: rgba(255,255,255,0.12);
        --semi-color-fill-2: rgba(255,255,255,0.16);
        --semi-color-primary: #3C84FF;
        --semi-color-primary-hover: #3075FF;
        --semi-color-primary-active: #68A5FF;
        --semi-color-primary-light-default: rgb(239,248,255);
    }

    .demoWrapperCapCut {
        // palette
        --semi-blue-8: 212,235,255;
        --semi-purple-8: 240,206,239;
        --semi-orange-8: 255,241,208;
        --semi-blue-5: 84,166,255;
        --semi-purple-5: 187,83,194;
        --semi-orange-5: 255,182,67;
        --semi-pink-5: 239,86,122;
        --semi-teal-5: 51,194,187;
        --semi-grey-9: 249,249,249;
         
        // global
        --semi-color-success-light-default: rgba(18,60,27, 0.15);
        --semi-border-radius-extra-small: 3px;
        --semi-border-radius-small: 3px;
        --semi-color-text-0: rgba(249, 249, 249, 1);
        --semi-color-text-2: rgba(249, 249, 249, 0.6);
        --semi-color-disabled-text: rgba(249, 249, 249, 0.35);;
        --semi-color-bg-0: rgb(22, 22, 26);
        --semi-color-bg-2: rgb(53, 54, 60);
        --semi-color-border: rgba(59, 58, 52, 1);
        --semi-color-fill-0: rgba(234, 234, 230,  0.05);
        --semi-color-fill-1: rgba(234, 234, 230, 0.09);
        --semi-color-fill-2: rgba(234, 234, 230, 0.13);
        --semi-color-primary: rgba(253, 224, 67, 1);
        --semi-color-primary-hover: rgba(253,236,113, 1);
        --semi-color-primary-active: rgba(254, 246, 160, 1);
        --semi-color-primary-light-default: rgba(84, 74, 3, 1);
    }
}
