:root {
	/** Base colors */
	--clr-dark-a0: #000000;
	--clr-light-a0: #ffffff;

	/** Dark theme primary colors */
	--clr-primary-a0: #ff9900;
	--clr-primary-a10: #ffa433;
	--clr-primary-a20: #ffb050;
	--clr-primary-a30: #ffbb6a;
	--clr-primary-a40: #ffc683;
	--clr-primary-a50: #ffd19c;

	/** Dark theme surface colors */
	--clr-surface-a0: #333333;
	--clr-surface-a10: #474747;
	--clr-surface-a20: #5b5b5b;
	--clr-surface-a30: #717171;
	--clr-surface-a40: #878787;
	--clr-surface-a50: #9e9e9e;

	/** Dark theme tonal surface colors */
	--clr-surface-tonal-a0: #473d33;
	--clr-surface-tonal-a10: #595047;
	--clr-surface-tonal-a20: #6c645b;
	--clr-surface-tonal-a30: #807871;
	--clr-surface-tonal-a40: #948d87;
	--clr-surface-tonal-a50: #a9a39e;
}

 /** Examples */ 
.bg-primary {
	color: var(--clr-primary-a50); 
	background-color: var(--clr-surface-a0); 
}