/**
 * Button — reused across hero, section headers, banners, CTAs.
 *
 * Variants: --primary (pink), --outline. Sizes: default, --lg.
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-2-2) var(--space-8);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	line-height: var(--leading-snug);
	color: var(--color-black);
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn:hover {
	color: var(--color-black);
	transform: translateY(-1px);
}

.btn__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* === Variants === */
.btn--primary {
	background: var(--color-primary);
	color: var(--color-black);
}

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

.btn--outline {
	background: transparent;
	color: var(--color-black);
}

.btn--outline:hover {
	background: var(--color-black);
	color: var(--color-white);
}

.btn--link {
	background: transparent;
	color: var(--color-black);
	padding: var(--space-2) 0;
	border-radius: 0;
}

.btn--link:hover {
	background: transparent;
	color: var(--color-primary-hover);
	transform: none;
}

.btn--link .btn__icon {
	transition: transform var(--transition-fast);
}

.btn--link:hover .btn__icon {
	transform: translateX(4px);
}

/* === Sizes === */
.btn--lg {
	padding: var(--space-3) var(--space-8);
	font-size: var(--text-lg);
}



@media (max-width: 768px) {
	.btn {
		padding: 6px 24px;
	}
	.btn__icon {
		width: 16px;
		height: 16px;
	}
	

}