.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--touch-target-min);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-sm);
	font-family: var(--font-family-base);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--motion-standard) var(--motion-ease),
		color var(--motion-standard) var(--motion-ease),
		border-color var(--motion-standard) var(--motion-ease);
}

.btn--primary {
	background: var(--color-teal-500);
	color: var(--color-neutral-0);
}
.btn--primary:hover {
	background: var(--color-teal-600);
	opacity: 1;
}

.btn--secondary {
	background: var(--color-navy-900);
	color: var(--color-neutral-0);
}
.btn--secondary:hover {
	background: var(--color-navy-800);
	opacity: 1;
}

.btn--ghost {
	background: transparent;
	color: var(--color-navy-900);
	border-color: var(--color-neutral-300);
}
.btn--ghost:hover {
	background: var(--color-neutral-50);
	opacity: 1;
}

.btn svg {
	width: 18px;
	height: 18px;
}