/**************************/
/*        Themes          */
/*     Colors & hovers    */
/**************************/

:root {
	--white: rgb(255, 255, 255);
	--black: rgb(0, 0, 0);

	/* pixel art */
	--outline-pxl: #016063;
	--outline-light-pxl: #068A90;
	--main-pxl: #00E2BA;
	--highlight-pxl: #20FAE4;
	--shadow-pxl: #11AB9F;
	--small-shadow-pxl: #038B8D;

	/* charms */
	--fish: #FF3E48;

  /* control pannel */
	--grey: rgb(208, 208, 208);
  	--light-grey: rgb(227, 227, 227);
  	--screen: #109394;
  	--window: #065F62;
	--btn: #78E2E6;
    --interface-color-start: #B6C4CD; 
    --interface-color-end: #808b92; 
	--light: #86fbff;
	--glow: #0ff;

	/* glass btns */
	--btn-txt: black;
	--btn-outline: rgb(0, 110, 83);
	--clr-one: rgb(141, 248, 219);
	--clr-two: rgb(0, 255, 183);
	--clr-three:  rgb(0, 177, 121);

	/* btn hover */
	--clr-one-hover: rgb(104, 255, 215) ;
	--clr-two-hover: rgb(0, 184, 132);
	--clr-three-hover: rgb(0, 116, 79);

	/* theme clr change based on config */
	--theme: normal;
	--animation-clr: rgb(0, 208, 0);

	/* play state */
	--playstate-flag: play;
}


/* config */
body:has(input[value="red"]:checked) {
	--theme: red;

	--window: #933030;
	--screen: #C94848;

    --interface-color-start: #D6BFBF; 
    --interface-color-end: #9B8888; 

	--outline-pxl: #710000;
    --outline-light-pxl: #9b0000;
    --main-pxl: #ff6000;
    --highlight-pxl: #fa2020;
    --shadow-pxl: #cf0000;
    --small-shadow-pxl: #ab0c0c;

	--btn: #ff5656;
	--light: #ff5656;
	--glow: rgb(255, 60, 0);
	--btn-txt: white;
	--btn-outline: rgb(110, 0, 0);
	--clr-one: #ff7e38;
	--clr-two: #ff5500;
	--clr-three: #953731;
	--clr-one-hover:  rgb(242 101 24);
	--clr-two-hover:  rgb(188 63 8);
	--clr-three-hover: rgb(122 31 25);
}

body:has(input[value="blue"]:checked) {
	--theme: blue;
	--window: rgb(0, 0, 255);
	--screen: blue;

	--outline-pxl: #005eff;
	--outline-light-pxl: #0092f4;
	--main-pxl: #03ace5;
	--highlight-pxl: #2094fa;
	--shadow-pxl: #1781de;
	--small-shadow-pxl: #1466ad;

	--btn-outline: rgb(0, 7, 150);
	--btn: #5699ff;
	--light: #00bfff;
	--glow: rgb(0, 208, 255);
	--btn-txt: white;
	--clr-one: rgb(81, 212, 255);
	--clr-two: rgb(33, 141, 255);
	--clr-three: rgb(0, 102, 255); 
	--clr-one-hover: rgb(0 176 255);
    --clr-two-hover: rgb(8 114 255);
    --clr-three-hover: rgb(0 47 189);
}