/*body {
  background-color: #F2F2F2;
  color: #0D0D0D;
}*/

html {
  --text-color-normal: #010D00;
  --text-color-light: #736312;
}

html[data-theme='dark'] {
  --text-color-normal: hsla(0, 0, 95, 1);
  --text-color-light: hsla(50, 54, 67, 1); 
  --text-color-richer: hsla(67, 18, 81, 1);
  --text-color-highlight: hsla(0, 0, 5, 1);
}

body {
	--color-text: #010D00;
	--color-bg: #F2F2F2;
	--color-link: #010D00;
	--color-link-hover: #010D00;
	--grid-columns: 2;
	--details-bg-up: #fff;
	--details-bg-down: #F2E963;
	--color-product-title: #000;
	--color-product-subtitle: #fff;
	--color-details-desc: #878B8C;
	--color-details-title: #0D0D0D;
	--color-details-subtitle: #BDB8D9;
	--color-details-price: #736312;
	--color-descr: #878B8C;
	--color-bg-addtocart: #010D00;
	--color-addtocart: #fff;
	--color-close: #000;
	--color-bg-magnifier: #000;
	--color-magnifier: #fff;
	--color-btn-hover: #c1b3b1;
}

/* Color Theme Swatches in Hex */
.color-1-hex { color: #F2F2F2; }
.color-2-hex { color: #BDB8D9; }
.color-3-hex { color: #010D00; }
.color-4-hex { color: #D7D9C7; }
.color-5-hex { color: #0D0D0D; }
.color-6-hex { color: #878B8C; }
.color-7-hex { color: #F2E963; }
.color-8-hex { color: #736312; }
.color-9-hex { color: #F2D649; }
.color-8-hex { color: #D9CA7E; }
.color-r-hex { color: #732027; }
.color-g-hex { color: #365953; }
.color-b-hex { color: #236E8C; }

.background-1-hex { background-color: #F2F2F2; }
.background-2-hex { background-color: #BDB8D9; }
.background-3-hex { background-color: #010D00; }
.background-4-hex { background-color: #D7D9C7; }
.background-5-hex { background-color: #0D0D0D; }
.background-6-hex { background-color: #878B8C; }
.background-7-hex { background-color: #F2E963; }
.background-8-hex { background-color: #736312; }
.background-9-hex { background-color: #F2D649; }
.background-8-hex { background-color: #D9CA7E; }
.background-r-hex { background-color: #732027; }
.background-g-hex { background-color: #365953; }
.background-b-hex { background-color: #236E8C; }

/* Color Theme Swatches in RGBA */
.color-1-rgba { color: rgba(242, 242, 242, 1); }
.color-2-rgba { color: rgba(188, 184, 216, 1); }
.color-3-rgba { color: rgba(0, 12, 0, 1); }
.color-4-rgba { color: rgba(214, 216, 199, 1); }
.color-5-rgba { color: rgba(12, 12, 12, 1); }
.color-6-rgba { color: rgba(134, 138, 140, 1); }
.color-7-rgba { color: rgba(242, 232, 99, 1); }
.color-8-rgba { color: rgba(216, 201, 125, 1); }
.color-r-rgba { color: rgba(114, 32, 39, 1); }
.color-g-rgba { color: rgba(54, 89, 82, 1); }
.color-b-rgba { color: rgba(35, 110, 140, 1); }

.background-1-rgba { background-color: rgba(242, 242, 242, 1); }
.background-2-rgba { background-color: rgba(188, 184, 216, 1); }
.background-3-rgba { background-color: rgba(0, 12, 0, 1); }
.background-4-rgba { background-color: rgba(214, 216, 199, 1); }
.background-5-rgba { background-color: rgba(12, 12, 12, 1); }
.background-6-rgba { background-color: rgba(134, 138, 140, 1); }
.background-7-rgba { background-color: rgba(242, 232, 99, 1); }
.background-8-rgba { background-color: rgba(216, 201, 125, 1); }
.background-r-rgba { background-color: rgba(114, 32, 39, 1); }
.background-g-rgba { background-color: rgba(54, 89, 82, 1); }
.background-b-rgba { background-color: rgba(35, 110, 140, 1); }

/* Color Theme Swatches in HSLA */
.color-1-hsla { color: hsla(0, 0, 95, 1); }
.color-2-hsla { color: hsla(247, 29, 78, 1); }
.color-3-hsla { color: hsla(118, 96, 2, 1); }
.color-4-hsla { color: hsla(67, 18, 81, 1); }
.color-5-hsla { color: hsla(0, 0, 5, 1); }
.color-6-hsla { color: hsla(196, 2, 53, 1); }
.color-7-hsla { color: hsla(56, 84, 66, 1); }
.color-8-hsla { color: hsla(50, 54, 67, 1); }
.color-r-hsla { color: hsla(354, 56, 28, 1); }
.color-g-hsla { color: hsla(168, 24, 28, 1); }
.color-b-hsla { color: hsla(196, 60, 34, 1); }

.background-1-hsla { background-color: hsla(0, 0, 95, 1); }
.background-2-hsla { background-color: hsla(247, 29, 78, 1); }
.background-3-hsla { background-color: hsla(118, 96, 2, 1); }
.background-4-hsla { background-color: hsla(67, 18, 81, 1); }
.background-5-hsla { background-color: hsla(0, 0, 5, 1); }
.background-6-hsla { background-color: hsla(196, 2, 53, 1); }
.background-7-hsla { background-color: hsla(56, 84, 66, 1); }
.background-8-hsla { background-color: hsla(50, 54, 67, 1); }
.background-r-hsla { background-color: hsla(354, 56, 28, 1); }
.background-g-hsla { background-color: hsla(168, 24, 28, 1); }
.background-b-hsla { background-color: hsla(196, 60, 34, 1); }


@media (prefers-color-scheme: dark) {
	
	body {
		background-color: #0D0D0D;
		color: #F2F2F2;
	}

	/* Color Theme Swatches in Hex */
	.color-1-hex { color: #010D00; }
	.color-2-hex { color: #BDB8D9; }
	.color-3-hex { color: #F2F2F2; }
	.color-4-hex { color: #0D0D0D; }
	.color-5-hex { color: #D7D9C7; }
	.color-6-hex { color: #F2E963; }
	.color-7-hex { color: #878B8C; }

	.background-1-hex { background-color: #010D00; }
	.background-2-hex { background-color: #BDB8D9; }
	.background-3-hex { background-color: #F2F2F2; }
	.background-4-hex { background-color: #0D0D0D; }
	.background-5-hex { background-color: #D7D9C7; }
	.background-6-hex { background-color: #F2E963; }
	.background-7-hex { background-color: #878B8C; }

	/* Color Theme Swatches in RGBA */
	.color-1-rgba { color: rgba(0, 12, 0, 1); }
	.color-2-rgba { color: rgba(188, 184, 216, 1); }
	.color-3-rgba { color: rgba(242, 242, 242, 1); }
	.color-4-rgba { color: rgba(12, 12, 12, 1); }
	.color-5-rgba { color: rgba(214, 216, 199, 1); }
	.color-6-rgba { color: rgba(242, 232, 99, 1); }
	.color-7-rgba { color: rgba(134, 138, 140, 1); }

	.background-1-rgba { background-color: rgba(0, 12, 0, 1); }
	.background-2-rgba { background-color: rgba(188, 184, 216, 1); }
	.background-3-rgba { background-color: rgba(242, 242, 242, 1); }
	.background-4-rgba { background-color: rgba(12, 12, 12, 1); }
	.background-5-rgba { background-color: rgba(214, 216, 199, 1); }
	.background-6-rgba { background-color: rgba(242, 232, 99, 1); }
	.background-7-rgba { background-color: rgba(134, 138, 140, 1); }

	/* Color Theme Swatches in HSLA */
	.color-1-hsla { color: hsla(118, 96, 2, 1); }
	.color-2-hsla { color: hsla(247, 29, 78, 1); }
	.color-3-hsla { color: hsla(0, 0, 95, 1); }
	.color-4-hsla { color: hsla(0, 0, 5, 1); }
	.color-5-hsla { color: hsla(67, 18, 81, 1); }
	.color-6-hsla { color: hsla(56, 84, 66, 1); }
	.color-7-hsla { color: hsla(196, 2, 53, 1); }

	.background-1-hsla { background-color: hsla(118, 96, 2, 1); }
	.background-2-hsla { background-color: hsla(247, 29, 78, 1); }
	.background-3-hsla { background-color: hsla(0, 0, 95, 1); }
	.background-4-hsla { background-color: hsla(0, 0, 5, 1); }
	.background-5-hsla { background-color: hsla(67, 18, 81, 1); }
	.background-6-hsla { background-color: hsla(56, 84, 66, 1); }
	.background-7-hsla { background-color: hsla(196, 2, 53, 1); }

	img {
		opacity: .75;
		transition: opacity .5s ease-in-out;
	}
	
	img:hover {
		opacity: 1;
	}
}