/* Base Button */
.theme-button {
	display: inline-block;
	font-family: 'ABC Whyte Inktrap', sans-serif;
	font-size: 1.125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 30px 10px;
	border: 1px solid var(--color-text-black);
	background: transparent;
	color: var(--color-text-black);
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	line-height: 1;
}

.theme-button:hover,
.theme-button:focus {
	background: var(--color-text-black);
	color: #fff;
	border-color: var(--color-text-black);
}

/* Gold Background Modifier */
.theme-button.gold-bg-mod {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #fff;
}

.theme-button.gold-bg-mod:hover,
.theme-button.gold-bg-mod:focus {
	background: var(--color-text-black);
	border-color: var(--color-text-black);
	color: #fff;
}

/* Gold Border Modifier */
.theme-button.gold-border-mod {
	border-color: var(--color-gold);
}

.theme-button.gold-border-mod:hover,
.theme-button.gold-border-mod:focus {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #fff;
}

/* Gold Text Modifier */
.theme-button.gold-text-mod {
	color: var(--color-gold);
}

.theme-button.gold-text-mod:hover,
.theme-button.gold-text-mod:focus {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: #fff;
}

/* Cream Border Modifier */
.theme-button.cream-border-mod {
	border-color: var(--color-body-cream);
}

.theme-button.cream-border-mod:hover,
.theme-button.cream-border-mod:focus {
	background: var(--color-body-cream);
	border-color: var(--color-body-cream);
	color: var(--color-text-black);
}

/* Green Background Modifier */
.theme-button.green-bg-mod {
	background: var(--color-footer-green);
	border-color: var(--color-footer-green);
	color: #fff;
}

.theme-button.green-bg-mod:hover,
.theme-button.green-bg-mod:focus {
	background: var(--color-body-cream);
	border-color: var(--color-body-cream);
	color: var(--color-footer-green);
}

/* Cream Text Modifier */
.theme-button.cream-text-mod {
	color: var(--color-body-cream);
}

.theme-button.cream-text-mod:hover,
.theme-button.cream-text-mod:focus {
	color: #fff;
}