/* Global colors */

:root {
	--brand-color: #7300fc;
}

/* LCH-defined colours */

@supports (color: lch(0% 0 0)) {
	:root {
		--brand-color-darker: lch(29.315% 102.671 307.024);
		--gray1: lch(99.5% 2.573 96.82);
		--gray2: lch(93.372% 2.573 96.82);
		--gray3: lch(90% 2.573 96.82);
		--gray4: lch(45% 2.573 96.82);
		--gray5: lch(19.866% 2.573 96.82);
		--accent-color: lch(92% 115 106);
		--shadow-color: lch(0% 0 0 / 3%);
		--bg-translucent: lch(93.372% 2.573 96.82 / 80%);
	}
}

/* Fallback colours */

@supports not (color: lch(0% 0 0)) {
	:root {
		--brand-color-darker: rgb(36.08% 0% 79.22%);
		--gray1: rgb(99.86% 99.46% 97.47%);
		--gray2: rgb(92.94% 92.55% 90.59%);
		--gray3: rgb(89.17% 88.79% 86.84%);
		--gray4: rgb(43.07% 42.74% 41.04%);
		--gray5: rgb(19.13% 18.85% 17.36%);
		--accent-color: rgb(84.75% 96.05% 0%);
		--shadow-color: rgb(0 0 0 / 3%);
		--bg-translucent: rgb(92.94% 92.55% 90.59% / 80%);
	}
}

/* Bad practice, but demanded by the brief */
/* Avoid non-semantic class names in production code */

.custom-colour {
	color: var(--brand-color);
}

.custom-background-colour {
	background-color: var(--brand-color);
}