/*
 * buttons.css — the two site buttons.
 *
 * .btn--primary = the green CTA ("Pyydä tarjous").
 * .btn--ghost   = the outline action ("Kirjaudu taloyhtiöportaaliin").
 * Focus ring comes from the global :focus-visible in base.css. Min-height 48px
 * keeps a comfortable tap target. Only transform/colour animate (GPU-safe).
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 48px;
	padding: var(--s-3) var(--s-6);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius-pill); /* fully-rounded pill (matches the brand's CTA) */
	cursor: pointer;
	white-space: nowrap; /* button labels never wrap to a second line */
	transition:
		transform var(--dur-fast) var(--ease),
		background-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease);
}

/* Tactile press. */
.btn:active {
	transform: translateY(1px);
}

/* Primary — solid green. */
.btn--primary {
	background-color: var(--koivu);
	color: #fff;
}

.btn--primary:hover {
	background-color: var(--koivu-dark);
	color: #fff;
}

/* Ghost — outline that fills on hover. */
.btn--ghost {
	background-color: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

.btn--ghost:hover {
	background-color: var(--ink);
	color: var(--birch-white);
}