@global-color: boolean(luma(@main-color) > 50%);
@global-white-color: boolean(luma(@main-color) > 90%);
@main-color-2: darken(@main-color, 3%);
@bg-light: if((@global-white-color),@main-color-2, @main-color);
@text: if((@global-color),#000000, #ffffff);
@black-bg: if((@global-color),#ffffff, #000000);
@white-bg: if((@global-color),#000000, #ffffff);


//==================================================== bg-color START
@c-1: if((@global-color),
@bg-light,  //1
@main-color   // #100d21
);
@c-2: if((@global-color),
lighten(desaturate(spin(@bg-light, 8.1429), 26.8116), 7.4510),  //1
lighten(desaturate(spin(@main-color, 8.1429), 26.8116), 7.4510)  // #272331
);
@c-3: if((@global-color),
lighten(desaturate(spin(@bg-light, -18.4737), 20.5867), 7.2549),  //1
lighten(desaturate(spin(@main-color, -18.4737), 20.5867), 7.2549)  // #202333
);
@c-4: if((@global-color),
lighten(saturate(spin(@bg-light, -1.1053), 2.8632), 7.0588),  //1
lighten(saturate(spin(@main-color, -1.1053), 2.8632), 7.0588)  // #1b163c
);
@c-5: if((@global-color),
lighten(saturate(spin(@bg-light, 0.0000), 24.7036), 8.2353),  //1
lighten(saturate(spin(@main-color, 0.0000), 24.7036), 8.2353)  // #170E4A
);
@c-6: if((@global-color),
lighten(saturate(spin(@bg-light, 7.7213), 13.5311), 11.9608),  //1
lighten(saturate(spin(@main-color, 7.7213), 13.5311), 11.9608)  // #281754
);
@c-7: if((@global-color),
lighten(saturate(spin(@bg-light, 22.6981), 14.7635), 8.8235),  //1
lighten(saturate(spin(@main-color, 22.6981), 14.7635), 8.8235)  // #2f1348
);
@c-8: if((@global-color),
lighten(saturate(spin(@bg-light, 22.6981), 16.0723), 8.4314),  //1
lighten(saturate(spin(@main-color, 22.6981), 16.0723), 8.4314)  // #2e1247
);
@c-9: if((@global-color),
lighten(desaturate(spin(@bg-light, -0.7647), 8.7844), 19.8039),  //1
lighten(desaturate(spin(@main-color, -0.7647), 8.7844), 19.8039)  // #373063
);
@c-10: if((@global-color),
lighten(desaturate(spin(@bg-light, -0.2903), 6.5735), 23.9216),  //1
lighten(desaturate(spin(@main-color, -0.2903), 6.5735), 23.9216)  // #3e3573
);
@c-11: if((@global-color),
lighten(saturate(spin(@bg-light, 19.8889), 20.3013), 15.8824),  //1
lighten(saturate(spin(@main-color, 19.8889), 20.3013), 15.8824)  // #3E1768
);
@c-12: if((@global-color),
lighten(saturate(spin(@bg-light, 33.5197), 54.9714), 16.2745),  //1
lighten(saturate(spin(@main-color, 33.5197), 54.9714), 16.2745)  // #5b0180
);
@c-13: if((@global-color),
lighten(desaturate(spin(@bg-light, 21.0000), 29.7283), 22.3529),  //1
lighten(desaturate(spin(@main-color, 21.0000), 29.7283), 22.3529)  // #50455B
);
@c-14: if((@global-color),
lighten(desaturate(spin(@bg-light, -249.0000), 43.4783), 23.1373),  //1
lighten(desaturate(spin(@main-color, -249.0000), 43.4783), 23.1373)  // #525252
);
@c-15: if((@global-color),
lighten(desaturate(spin(@bg-light, -23.0426), 23.1319), 36.2745),  //1
lighten(desaturate(spin(@main-color, -23.0426), 23.1319), 36.2745)  // #5c678b
);
@c-16: if((@global-color),
lighten(saturate(spin(@bg-light, -37.8462), 49.3789), 23.9216),  //1
lighten(saturate(spin(@main-color, -37.8462), 49.3789), 23.9216)  // #0651a2
);


@c-1-color: red(@c-1), green(@c-1), blue(@c-1);
@c-2-color: red(@c-2), green(@c-2), blue(@c-2);
@c-3-color: red(@c-3), green(@c-3), blue(@c-3);
@c-4-color: red(@c-4), green(@c-4), blue(@c-4);
@c-5-color: red(@c-5), green(@c-5), blue(@c-5);
@c-6-color: red(@c-6), green(@c-6), blue(@c-6);
@c-7-color: red(@c-7), green(@c-7), blue(@c-7);
@c-8-color: red(@c-8), green(@c-8), blue(@c-8);
@c-9-color: red(@c-9), green(@c-9), blue(@c-9);
@c-10-color: red(@c-10), green(@c-10), blue(@c-10);
@c-11-color: red(@c-11), green(@c-11), blue(@c-11);
@c-12-color: red(@c-12), green(@c-12), blue(@c-12);
@c-13-color: red(@c-13), green(@c-13), blue(@c-13);
@c-14-color: red(@c-14), green(@c-14), blue(@c-14);
@c-15-color: red(@c-15), green(@c-15), blue(@c-15);
@c-16-color: red(@c-16), green(@c-16), blue(@c-16);
//==================================================== bg-color END

//==================================================== white,black bg START
@black-bg-color: red(@black-bg), green(@black-bg), blue(@black-bg);
@white-bg-color: red(@white-bg), green(@white-bg), blue(@white-bg);
//==================================================== white,black bg END


//==================================================== hero-color START

//--------------------------1---------------------//
@hero-bg1: boolean(luma(@hero-color1) > 50%);
@hero-color1-2: lighten(desaturate(spin(@hero-color1, -3.1415), 0.1081), 0.5882);  //2a63f6
@hero-color1-3: lighten(saturate(spin(@hero-color1, -34.9161), 6.8889), 8.8235);  //4cdcfe

@hero-text1: if((@hero-bg1),#000000, #ffffff);


@hero-bg-color1-1: red(@hero-color1), green(@hero-color1), blue(@hero-color1);
@hero-bg-color1-2: red(@hero-color1-2), green(@hero-color1-2), blue(@hero-color1-2);
@hero-bg-color1-3: red(@hero-color1-3), green(@hero-color1-3), blue(@hero-color1-3);

@hero-set-color1: red(@hero-text1), green(@hero-text1), blue(@hero-text1);
//--------------------------1---------------------//

//-------------------------2---------------------//
@hero-bg2: boolean(luma(@hero-color2) > 50%);
@hero-color2-2: lighten(desaturate(spin(@hero-color2, -4.7872), 11.8150), 14.1176);  //e89a2c
@hero-color2-3: lighten(saturate(spin(@hero-color2, -4.5313), 4.1222), 17.8431);  //fba62c
@hero-color2-4: lighten(saturate(spin(@hero-color2, 4.2956), 6.5098), 30.5882);  //fed76a

@hero-text2: if((@hero-bg2),#000000, #ffffff);


@hero-bg-color2-1: red(@hero-color2), green(@hero-color2), blue(@hero-color2);
@hero-bg-color2-2: red(@hero-color2-2), green(@hero-color2-2), blue(@hero-color2-2);
@hero-bg-color2-3: red(@hero-color2-3), green(@hero-color2-3), blue(@hero-color2-3);
@hero-bg-color2-4: red(@hero-color2-4), green(@hero-color2-4), blue(@hero-color2-4);

@hero-set-color2: red(@hero-text2), green(@hero-text2), blue(@hero-text2);
//--------------------------2---------------------//

//-------------------------3---------------------//
@hero-bg3: boolean(luma(@hero-color3) > 50%);
@hero-text3: if((@hero-bg3),#000000, #ffffff);

@hero-bg-color3-1: red(@hero-color3), green(@hero-color3), blue(@hero-color3);

@hero-set-color3: red(@hero-text3), green(@hero-text3), blue(@hero-text3);
//--------------------------3---------------------//

//-------------------------4---------------------//
@hero-bg4: boolean(luma(@hero-color4) > 50%);
@hero-color4-2: lighten(desaturate(spin(@hero-color4, -17.9051), 15.2687), 4.3137);  //28b276
@hero-color4-3: lighten(saturate(spin(@hero-color4, -15.1695), 3.6508), 17.4510);  //32eba3
@hero-color4-4: lighten(saturate(spin(@hero-color4, -4.1711), 8.6081), 7.4510);  //0fdbb1
@hero-color4-5: lighten(saturate(spin(@hero-color4, -15.1695), 4.3882), 17.8431);  //#33eca4

@hero-text4: if((@hero-bg4),#000000, #ffffff);


@hero-bg-color4-1: red(@hero-color4), green(@hero-color4), blue(@hero-color4);
@hero-bg-color4-2: red(@hero-color4-2), green(@hero-color4-2), blue(@hero-color4-2);
@hero-bg-color4-3: red(@hero-color4-3), green(@hero-color4-3), blue(@hero-color4-3);
@hero-bg-color4-4: red(@hero-color4-4), green(@hero-color4-4), blue(@hero-color4-4);
@hero-bg-color4-5: red(@hero-color4-5), green(@hero-color4-5), blue(@hero-color4-5);

@hero-set-color4: red(@hero-text4), green(@hero-text4), blue(@hero-text4);
//--------------------------4---------------------//

//==================================================== hero-color END

@thumb-back: lighten(saturate(spin(@black-bg, 240.0000), 2.2727), 82.7451);
@thumb-back-bg: red(@thumb-back), green(@thumb-back), blue(@thumb-back);

//==================================================== text-color START
@text-color: red(@text), green(@text), blue(@text);
//---------------------static-color start---------------
/////////////
@static-text-color-1: red(@static-color1), green(@static-color1), blue(@static-color1);
/////////////
@static-color-2-1: lighten(saturate(spin(@static-color2, 3.8192), 45.2489), 6.6667); //ff9500
@static-color-2-2: lighten(saturate(spin(@static-color2, 2.9325), 25.9975), 20.0000); //edac56
@static-color-2-3: lighten(saturate(spin(@static-color2, 13.7603), 38.7973), 8.0392); //f7bd0f

@static-text-color-2: red(@static-color2), green(@static-color2), blue(@static-color2);
@static-text-color-2-1: red(@static-color-2-1), green(@static-color-2-1), blue(@static-color-2-1);
@static-text-color-2-2: red(@static-color-2-2), green(@static-color-2-2), blue(@static-color-2-2);
@static-text-color-2-3: red(@static-color-2-3), green(@static-color-2-3), blue(@static-color-2-3);
/////////////
@static-text-color-3: red(@static-color3), green(@static-color3), blue(@static-color3);
//////////////
@static-text-color-4: red(@static-color4), green(@static-color4), blue(@static-color4);
//////////////
@static-text-color-5: red(@static-color5), green(@static-color5), blue(@static-color5);

//---------------------static-color end-----------------
//==================================================== text-color END

:root{
 --bg1: @c-1-color;
 --bg2: @c-2-color;
 --bg3: @c-3-color;
 --bg4: @c-4-color;
 --bg5: @c-5-color;
 --bg6: @c-6-color;
 --bg7: @c-7-color;
 --bg8: @c-8-color;
 --bg9: @c-9-color;
 --bg10: @c-10-color;
 --bg11: @c-11-color;
 --bg12: @c-12-color;
 --bg13: @c-13-color;
 --bg14: @c-14-color;
 --bg15: @c-15-color;
 --bg16: @c-16-color;
 --text-color: @text-color;
 --black-bg: @black-bg-color;
 --white-bg: @white-bg-color;

 --hero-color1-1: @hero-bg-color1-1;
 --hero-color1-2: @hero-bg-color1-2;
 --hero-color1-3: @hero-bg-color1-3;
 --hero-set-color1: @hero-set-color1;

 --hero-color2-1: @hero-bg-color2-1;
 --hero-color2-2: @hero-bg-color2-2;
 --hero-color2-3: @hero-bg-color2-3;
 --hero-color2-4: @hero-bg-color2-4;
 --hero-set-color2: @hero-set-color2;

 --hero-color3-1: @hero-bg-color3-1;
 --hero-set-color3: @hero-set-color3;

 --hero-color4-1: @hero-bg-color4-1;
 --hero-color4-2: @hero-bg-color4-2;
 --hero-color4-3: @hero-bg-color4-3;
 --hero-color4-4: @hero-bg-color4-4;
 --hero-color4-5: @hero-bg-color4-5;
 --hero-set-color4: @hero-set-color4;

 --thumb-back: @thumb-back-bg;

 --static-text-color-1: @static-text-color-1;

 --static-text-color-2: @static-text-color-2;
 --static-text-color-2-1: @static-text-color-2-1;
 --static-text-color-2-2: @static-text-color-2-2;
 --static-text-color-2-3: @static-text-color-2-3;

 --static-text-color-3: @static-text-color-3;
 --static-text-color-4: @static-text-color-4;
 --static-text-color-5: @static-text-color-5;
}