/**
 * Button component (BEM block: .btn).
 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: 0.9rem 1.75rem;
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: transform var(--duration-fast) var(--ease-out),
		background-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out);
}

.btn:hover {
	transform: translateY(-2px);
}

.btn:active {
	transform: translateY(0);
}

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

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

.btn--outline {
	background-color: transparent;
	color: currentColor;
	border: 1px solid currentColor;
}

.btn--outline:hover {
	color: var(--color-text-on-dark);
}

.btn--dark {
	background-color: var(--color-dark);
	color: var(--color-text-on-dark);
}

.btn--dark:hover {
	background-color: var(--color-dark-2);
}

.btn--sm {
	padding: 0.6rem 1.25rem;
	font-size: var(--fs-xs);
}

.btn--block {
	width: 100%;
}