/* === abyss === */

[data-theme="dark"] {

	/* === design elements === */
	--icon-filter: none;

	/* === background === */
	--bg: linear-gradient(#1d2d33, #121220);
	--bg-img: url("../resources/main/textures/bg.webp");
	--pebl-img: url("../resources/main/images/widepeldark.webp");

	/* === ui colors === */
	--highlight-color: rgba(92, 106, 111, 0.4); /* same as border color except more transparent */
	--highlight-2-color: rgba(142, 142, 231, 0.15); /* same as border color except more transparent */
	--border-color: rgba(225, 225, 248, 0.1);
	--sidebar-button-color: rgba(196, 196, 236, 0.05);
	--bg-color: #0f101c;
	/*--bg-transp-color: rgba(15, 21, 28, 0.5);*/
	/*--bg-transp-color-2: hsla(210, 35%, 9%, 0.8);*/
	--bg-transp-color: hsla(263, 10%, 32%, 0.15);
	--bg-transp-color-2: hsla(264, 7%, 42%, 0.25);
	--bg-on-blur: hsla(220, 16%, 19%, 0.75);
	/* === text colors === */
	--pebble-yellow: #fdd148;
	--pebble-yellow-transp: rgba(253,209,72,.6);
	--pebble-yellow-transp-faint: rgba(253,209,72,.15);
	--text-color-white: #fff;
	--text-color: rgb(215, 215, 215);
	--date-color: rgba(255,255,255,.33);

	/* === shadows === */
	--shadow-color: rgba(0,0,0,.3);
	--shadow-light-color: rgba(0,0,0,.3);
}  

/* === cotton candy === */

[data-theme="light"] {

	/* === design elements === */
	--icon-filter: invert(100%);

	/* === background === */
	--bg: linear-gradient(#FEEEE3, #FEE3E5);
	--bg-img: url("../resources/main/textures/bglight.webp");
	--pebl-img: url("../resources/main/images/widepelpink.webp");

	/* === ui colors === */
	--highlight-color: hsl(349, 50%, 78%, 0.3); /* same as border color except more transparent */
	--highlight-2-color: hsl(349, 50%, 78%, 0.5);; /* same as border color except more transparent */
	--border-color: hsla(351, 28%, 77%, 0.4);
	--sidebar-button-color: hsl(349, 47%, 90%);
	--bg-color: #FAEAE5; 
	--bg-transp-color: hsla(6, 38%, 95%, 0.6);
	--bg-transp-color-2: hsla(6, 80%, 96%, 0.8);
	--bg-on-blur: hsla(12, 100%, 97%, 0.75);
	

	/* === text colors === */
	--pebble-yellow: #ff1f48;
	--pebble-yellow-transp: hsla(349, 100%, 56%, 0.4);
	--pebble-yellow-transp-faint: rgba(253,209,72,.15);
	--text-color-white: rgb(0, 0, 0);
	--text-color: rgb(72, 72, 72);
	--date-color: rgba(0, 0, 0, 0.33);

	/* === shadows === */
	--shadow-color: rgba(0,0,0,.3);
	--shadow-light-color: hsla(350, 40%, 30%, 0.1);
}  

/* === sky blue === */

[data-theme="lightblue"] {

	/* === design elements === */
	--icon-filter: invert(100%);

	/* === background === */
	--bg: linear-gradient(hsl(0, 0%, 98%), hsl(216, 10%, 90%));
	--bg-img: url("../resources/main/textures/bglightblu.webp");
	--pebl-img: url("../resources/main/images/widepelblue.webp");

	/* === ui colors === */
	--highlight-color: hsla(208, 37%, 81%, 0.4); /* same as border color except more transparent */
	--highlight-2-color: #bad1e7; /* same as border color except more transparent */
	--border-color: rgba(198, 198, 198, 0.5);
	--sidebar-button-color: #d8e4f1;
	--bg-color: #E7E8E9; 
	--bg-transp-color: rgba(255, 255, 255, 0.15);
	--bg-transp-color-2: rgba(236, 239, 244, 0.8);
	--bg-on-blur: hsla(180, 36%, 95%, 0.75);

	/* === text colors === */
	--pebble-yellow: #0077ff;
	--pebble-yellow-transp: rgba(73, 172, 253, 0.4);
	--pebble-yellow-transp-faint: rgba(253,209,72,.15);
	--text-color-white: rgb(0, 0, 0);
	--text-color: rgb(72, 72, 72);
	--date-color: rgba(0, 0, 0, 0.33);

	/* === shadows === */
	--shadow-color: rgba(0,0,0,.3);
	--shadow-light-color: rgba(0,0,0,.1);

}  

/* === outskirts === */

[data-theme="outskirts"] {

	/* === design elements === */
	--icon-filter: none;

	/* === background === */
	--bg: linear-gradient(#262032, #1a0f19);
	--bg-img: url("../resources/main/textures/outskirts.webp");
	--pebl-img: url("../resources/main/images/widepeloutskirts.webp");

	/* === ui colors === */
	--highlight-color: rgba(101, 92, 111, 0.4); /* same as border color except more transparent */
	--highlight-2-color: hsla(280, 65%, 73%, 0.15); /* same as border color except more transparent */
	--border-color: hsla(281, 45%, 87%, 0.1);
	--sidebar-button-color: hsla(280, 51%, 85%, 0.05);
	--bg-color: hsl(280, 30%, 8%);
	/*--bg-transp-color: hsla(280, 30%, 8%, 0.5);
	--bg-transp-color-2: hsla(280, 35%, 9%, 0.8);*/
	--bg-transp-color: hsla(296, 17%, 36%, 0.15);
	--bg-transp-color-2: hsla(295, 15%, 53%, 0.15);
	--bg-on-img: hsla(296, 17%, 36%, 0.5); /* same as bg transp 1 */
	--bg-on-blur: hsla(278, 17%, 19%, 0.75);
	

	/* === text colors === */
	--pebble-yellow: #78f662;
	--pebble-yellow-transp: rgba(120, 246, 98,.6);
	--pebble-yellow-transp-faint: rgba(253,209,72,.15);
	--text-color-white: rgb(255, 255, 255);
	--text-color: rgb(215, 215, 215);
	--date-color: rgba(255,255,255,.33);

	/* === shadows === */
	--shadow-color: rgba(0,0,0,.3);
	--shadow-light-color: rgba(0,0,0,.3);
}