/* Buttons — Figma: Button M/S Primary, Secondary, Inversion */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 17px 29px; /* + 1px border = Figma 18/30 (57 tall; outline button with a visible border is 59 in Figma too) */
	border: 1px solid transparent;
	border-radius: var(--radius-btn);
	font-size: var(--fs-body-secondary);
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	letter-spacing: var(--ls-body);
	text-align: center;
	white-space: nowrap;
	transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.btn__icon {
	flex: none;
	width: 13px;
	height: 13px;
	transition: transform var(--duration) var(--ease);
}

.btn:hover .btn__icon {
	transform: translate(2px, -2px);
}

/* Small: header CTA (h 50) */
.btn--s {
	height: 50px;
	padding: 13px 30px 14px;
}

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

.btn--primary:hover {
	background: color-mix(in srgb, var(--color-primary) 88%, #fff);
}

.btn--secondary {
	background: var(--color-secondary);
	color: var(--color-light);
}

.btn--secondary:hover {
	background: color-mix(in srgb, var(--color-secondary) 88%, #fff);
}

.btn--outline {
	padding: 18px 30px; /* Figma Button M Inversion: 59 tall */
	border-color: var(--color-secondary);
	color: var(--color-secondary);
}

.btn--outline:hover {
	background: color-mix(in srgb, var(--color-secondary) 8%, transparent);
}