/* text colours */
.primary {
	color: var(--color-primary) !important;
}

.secondary {
	color: var(--color-secondary) !important;
}

.light-grey {
	color: var(--color-light-grey) !important;
}

.grey {
	color: var(--color-grey) !important;
}

.dark-grey {
	color: var(--color-dark-grey) !important;
}

.light-primary {
	color: var(--color-light-primary) !important	;
}

.white {
	color: #fff !important;
}

.black {
	color: #000 !important;
}

/* background colours */
.bg-primary {
	background-color: var(--color-primary);
}

.bg-secondary {
	background-color: var(--color-secondary);
}

.bg-light-grey {
	background-color: var(--color-light-grey);
}

.bg-grey {
	background-color: var(--color-grey);
}

.bg-dark-grey {
	background-color: var(--color-dark-grey);
}

.bg-light-primary {
	background-color: var(--color-light-primary);
}

.bg-white {
	background-color: #fff;
}

.bg-black {
	background-color: #000;
}

.dark {
	color: #000;
	border-color: var(--color-primary);
}

/* border colours */
.border-light-grey {
	border-color: var(--color-light-grey);
}

.border-grey {
	border-color: var(--color-grey);
}

.border-dark-grey {
	border-color: var(--color-dark-grey);
}

.border-primary {
	border-color: var(--color-primary);
}

.border-secondary {
	border-color: var(--color-secondary);
}

.border-light-primary {
	border-color: var(--color-light-primary);
}

.border-white {
	border-color: #fff;
}

.border-black {
	border-color: #000;
}

/* accent colours */
.accent-light-grey {
	--color-accent: var(--color-light-grey);
}

.accent-grey {
	--color-accent: var(--color-grey);
}

.accent-dark-grey {
	--color-accent: var(--color-dark-grey);
}

.accent-primary {
	--color-accent: var(--color-primary);
}

.accent-secondary {
	--color-accent: var(--color-secondary);
}

.accent-light-primary {
	--color-accent: var(--color-light-primary);
}

.accent-white {
	--color-accent: #fff;
}

.accent-black {
	--color-accent: #000;
}

/* opacity */
.opacity-0, .transparent {
	--opacity: 0;
}

.opacity-1 {
	--opacity: 0.1;
}

.opacity-2 {
	--opacity: 0.2;
}

.opacity-3 {
	--opacity: 0.3;
}

.opacity-4 {
	--opacity: 0.4;
}

.opacity-5 {
	--opacity: 0.5;
}

.opacity-6 {
	--opacity: 0.6;
}

.opacity-7 {
	--opacity: 0.7;
}

.opacity-8 {
	--opacity: 0.8;
}

.opacity-9 {
	--opacity: 0.9;
}

.opacity-10, .opaque {
	--opacity: 1;
}