:root {
	--theme-a: #57a5ff;
	--theme-b: #f8d2c9;
	--theme-c: #ba788a;

	--warn: #ff8888;

	--dark-a: #0b0b11;
	--dark-b: #15161d;
	--dark-c: #1f202d;
	--dark-d: #353746;
	--dark-e: #474a5b;
	--light-a: #ffffff;
	--light-b: #dfe1e9;
	--light-c: #babeca;
	--light-d: #777d8f;
	--light-e: #5f6377;

	--bw: light-dark(white, black);

	--bg-a: light-dark(#0b0b11, #ffffff);
	--bg-b: light-dark(#15161d, #dfe1e9);
	--bg-c: light-dark(#1f202d, #babeca);
	--bg-d: light-dark(#353746, #777d8f);
	--bg-e: light-dark(#474a5b, #5f6377);
	--fg-a: light-dark(#0b0b11, #ffffff);
	--fg-b: light-dark(#15161d, #dfe1e9);
	--fg-c: light-dark(#1f202d, #babeca);
	--fg-d: light-dark(#353746, #777d8f);
	--fg-e: light-dark(#474a5b, #5f6377);

	--bg-ab: color-mix(in lab, var(--bg-a), var(--bg-b) 20%);
	--primary: light-dark(var(--bg-ab), var(--bg-a));
	--secondary: color-mix(in hsl, var(--bg-a), var(--bg-b) 37%);
}

// :root[theme='light'] {
// 	--bw: white;

// 	--fg-a: #0b0b11;
// 	--fg-b: #15161d;
// 	--fg-c: #1f202d;
// 	--fg-d: #353746;
// 	--fg-e: #474a5b;

// 	--bg-a: #ffffff;
// 	--bg-b: #dfe1e9;
// 	--bg-c: #babeca;
// 	--bg-d: #777d8f;
// 	--bg-e: #5f6377;
// }
