@property --primary-background-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --primary-background-plus-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}


@property --secondary-background-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --secondary-background-plus-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --tertiary-background-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --inverted-background-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --primary-foreground-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --secondary-foreground-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --inverted-foreground-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --brand-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --primary-accent-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --secondary-accent-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --muted-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --border-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --alert-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

@property --success-color {
	syntax: "<color>";
	inherits: true;
	initial-value: #fff;
}

:root {
	--brand-color: #da9036;
	--primary-background-color: #23212a;
	--primary-background-plus-color: #1e1d25;
	--secondary-background-color: #403d4b;
	--secondary-background-plus-color: #2e2c37;
	--tertiary-background-color: #151418;
	--inverted-background-color: #f8f3eb;
	--primary-foreground-color: #f8f3eb;
	--secondary-foreground-color: #9a9690;
	--inverted-foreground-color: #23212a;
	--primary-accent-color: #b9a0fd;
	--secondary-accent-color: #cd9af9;
	--muted-color: #b1adb3;
	--border-color: #c6ab71;
	--alert-color: #d80909;
	--success-color: #0bad11;

	transition-duration: 0.3s;
	transition-property:
		--brand-color,
		--primary-background-color,
		--primary-background-plus-color,
		--secondary-background-color,
		--secondary-background-plus-color,
		--tertiary-background-color,
		--inverted-background-color,
		--primary-foreground-color,
		--secondary-foreground-color,
		--inverted-foreground-color,
		--primary-accent-color,
		--secondary-accent-color,
		--muted-color,
		--border-color,
		--alert-color,
		--success-color;
}

@media (prefers-color-scheme: light) {
	:root {
		--brand-color: #a35c00;
		--primary-background-color: #f8f3eb;
		--primary-background-plus-color: #ded8ce;
		--secondary-background-color: #ece5d8;
		--secondary-background-plus-color: #ddd8ce;
		--tertiary-background-color: #fff9ee;
		--inverted-background-color: #23212a;
		--primary-foreground-color: #23212a;
		--secondary-foreground-color: #777387;
		--inverted-foreground-color: #f8f3eb;
		--primary-accent-color: #652cab;
		--secondary-accent-color: #8901ad;
		--muted-color: #655c68;
		--border-color: #544733;
		--alert-color: #c33333;
		--success-color: #0d8000;
	}
}