:root {
	--brand-color-1: rgb(255,115,0);
	--brand-color-2: rgb(255,115,0);
	--brand-color-text : #FBFBFB;

    --brand-gradient-1: none;
    --brand-gradient-2: none;
	
	--background-gradient-1: none;
	--background-gradient-2: none;
	--background-gradient-3: none;
	--background-gradient-4: none;
	--background-gradient-5: none;
	--background-gradient-6: none;

	--background-color-1: #00231d;
	--background-color-2: #003d32;
	--background-color-3: #005647;
	--background-color-4: #00705c;
	--background-color-5: #008972;
    --background-color-6: #00a387;
	--text-color-1: #FFFFFF;
	--text-color-2: #CCCCCC;
	--text-color-3: #B3B3B3;
	--text-color-4: #FFFFFF;
	--font-family-1: 'Roboto',sans-serif;

	--modal-bg-color-1: #2C2D3A;
	--modal-bg-color-2: #363747;
	--modal-bg-color-3: #3B3D4F;
	--modal-bg-color-4: #48495A;
	--modal-text-color-1: #FFFFFF;
	--modal-text-color-2: #CCCCCC;
	--modal-text-color-3: #999999;

	--btn-radius-top-left: 2px ;
	--btn-radius-top-right: 2px ;
	--btn-radius-bottom-left: 18px ;
	--btn-radius-bottom-right: 18px ;
 
	--input-radius-top-left: 2px ;
	--input-radius-top-right: 2px ;
	--input-radius-bottom-left: 18px ;
	--input-radius-bottom-right: 18px ;
 
	--odd-radius-top-left: 2px ;
	--odd-radius-top-right: 2px ;
	--odd-radius-bottom-left: 18px ;
	--odd-radius-bottom-right: 18px ;

	 /*Default imutable colors*/
    --white-color: #fff;
    --black-color: #000;
    --error-color: #F02849;
    --success-color: #009900;
	--info-color: #FFB700;
}

:root[data-theme="light"] {
	--brand-color-1: rgb(255,115,0);
	--brand-color-2: rgb(255,255,255);
	--brand-color-text : rgb(0,0,0);

    --brand-gradient-1: none;
    --brand-gradient-2: none;
    --brand-gradient-3: {brand-gradient-3-2};
	
	--background-gradient-1: none;
	--background-gradient-2: none;
	--background-gradient-3: none;
	--background-gradient-4: none;
	--background-gradient-5: none;
	--background-gradient-6: linear-gradient(90deg, rgb(166,166,166) 0%, rgb(0,137,114) 100%);

	--background-color-1: rgb(200,255,72);
	--background-color-2: rgb(182,182,182);
	--background-color-3: rgba(51,51,51,0.93);
	--background-color-4: #808080;
	--background-color-5: rgb(255,115,0);
    --background-color-6: linear-gradient(90deg, rgb(166,166,166) 0%, rgb(0,137,114) 100%);

	--text-color-1: rgb(0,0,0);
	--text-color-2: rgb(0,0,0);
	--text-color-3: #424549;
	--text-color-4: #2a2b2d;

	--modal-bg-color-1: #679300;
	--modal-bg-color-2: #79ac00;
	--modal-bg-color-3: #8bc600;
	--modal-bg-color-4: #9de000;

	--modal-text-color-1: rgb(255,255,255);
	--modal-text-color-2: rgb(255,255,255);
	--modal-text-color-3: rgb(128,128,128);
}

:root[data-theme="dark"] {
	--brand-color-1: rgb(255,115,0);
	--brand-color-2: rgb(200,255,72);
	--brand-color-text : rgb(0,0,0);

    --brand-gradient-1: none;
    --brand-gradient-2: none;
    --brand-gradient-3: {brand-gradient-3-1};
	
	--background-gradient-1: none;
	--background-gradient-2: none;
	--background-gradient-3: none;
	--background-gradient-4: none;
	--background-gradient-5: none;
	--background-gradient-6: linear-gradient(90deg, rgb(51,51,51) 0%, rgb(0,137,114) 100%);

	--background-color-1: rgb(51,51,51);
	--background-color-2: rgb(158,158,158);
	--background-color-3: rgb(200,255,72);
	--background-color-4: #00705c;
	--background-color-5: rgb(255,115,0);
    --background-color-6: linear-gradient(90deg, rgb(51,51,51) 0%, rgb(0,137,114) 100%);

	--text-color-1: rgb(255,255,255);
	--text-color-2: #CCCCCC;
	--text-color-3: rgb(255,255,255);
	--text-color-4: #FFFFFF;
	
	--modal-bg-color-1: #405b00;
	--modal-bg-color-2: #527500;
	--modal-bg-color-3: #648e00;
	--modal-bg-color-4: #76a800;

	--modal-text-color-1: rgb(255,255,255);
	--modal-text-color-2: rgb(255,242,242);
	--modal-text-color-3: rgb(0,0,0);
}