/* === abyss === */

[data-theme="dark"] {

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

	/* === backgrounds === */
	--bg-gradient-1: #3D424D;
	--bg-gradient-2: #13171A;
	--bg: linear-gradient(var(--bg-gradient-1), var(--bg-gradient-2));
	--bg-img: url("../resources/main/textures/dark.webp");
	--pebl-img: url("../resources/main/images/homePagePel/dark.webp");

	/* === ui colours === */
	--bg-color: #121220;
	--border-color: rgba(137, 150, 169, 0.2);
	--panel-color: rgba(33, 38, 45, 0.5);
	--panel-color-2: rgba(22, 26, 31,0.7);
	--panel-on-blur: hsla(227, 10%, 28%, 0.75);
	--button-color: hsla(206, 16%, 25%, 0.6);
	--tag-color: rgba(92, 106, 111, 0.4);
	--glr-img-bg: rgb(0, 0, 0);

	/* === highlight colours === */
	--highlight: #fdd148;
	--highlight-transp: rgba(253,209,72,.6);
	--highlight-faint: rgba(253,209,72,.15);

	/* === text colours === */
	--text-color-white: #fff;
	--text-color: rgb(215, 215, 215);
	--date-color: rgba(255,255,255,0.5);

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

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

[data-theme="light"] {

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

	/* === background === */
	--bg-gradient-1: #fcfbfb;
	--bg-gradient-2: #d0d5dc;
	--bg: linear-gradient(var(--bg-gradient-1), var(--bg-gradient-2));
	--bg-img: url("../resources/main/textures/light.webp");
	--pebl-img: url("../resources/main/images/homePagePel/light.webp");

	/* === ui colours === */
	--bg-color: #E7E8E9; 
	--border-color: rgba(137, 157, 204, 0.5);
	--panel-color: rgba(238, 242, 255, 0.5);
	--panel-color-2: rgba(212, 221, 234, 0.7);
	--panel-on-blur: hsla(180, 36%, 95%, 0.75);
	--button-color: rgba(255, 255, 255, 0.6);
	--tag-color: hsla(214, 26%, 75%, 0.4);
	--glr-img-bg: rgb(255, 255, 255);

	/* === highlight colours === */
	--highlight: #004cff;
	--highlight-transp: rgba(73, 151, 253, 0.3);
	--highlight-faint: rgba(73, 172, 253 ,.15);

	/* === text colours === */
	--text-color-white: rgb(0, 0, 0);
	--text-color: rgb(27, 27, 27);
	--date-color: rgba(0, 0, 0, 0.6);

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