.button {
	display: inline-flex;
	min-height: 3.25rem;
	gap: var(--space-3);
	align-items: center;
	justify-content: center;
	padding: 0.875rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius-small);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		color var(--transition-fast),
		border-color var(--transition-fast),
		background-color var(--transition-fast),
		transform var(--transition-fast);
}

.button::after {
	content: "→";
	font-size: 1rem;
	line-height: 1;
	transition: transform var(--transition-fast);
}

.button:hover {
	transform: translateY(-0.125rem);
}

.button:hover::after {
	transform: translateX(0.25rem);
}

.button--primary {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
	color: var(--color-black);
}

.button--primary:hover {
	border-color: var(--color-accent-hover);
	background-color: var(--color-accent-hover);
	color: var(--color-black);
}

.button--secondary {
	border-color: var(--color-border-strong);
	background-color: rgba(8, 10, 12, 0.45);
	color: var(--color-white);
}

.button--secondary:hover {
	border-color: var(--color-accent);
	background-color: rgba(211, 179, 106, 0.08);
	color: var(--color-accent);
}