/* ============================================================
   Buttons — standardised size, body-text scale, no whoosh.
   ============================================================ */

.button {
	display: inline-block;
	background-color: transparent;
	border-radius: 999px; /* pill */
	font-family: 'Montserrat', 'Inter', sans-serif;
	font-size: var(--text);
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 0.85rem 1.5rem;
	cursor: pointer;
	position: relative;
	overflow: visible;
	width: fit-content;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.button:hover {
	transform: translateY(-1px);
	text-decoration: none;
}

/* ---------- Variants ---------- */

.button-primary {
	color: var(--colour-primary);
	border: 2px solid var(--colour-primary);
}

.button-primary:hover {
	background-color: var(--colour-primary);
	color: #fff;
}

.button-inverse {
	color: #fff;
	border: 2px solid #fff;
}

.button-inverse:hover {
	background-color: #fff;
	color: var(--colour-primary);
}

/* ---------- Sizes ---------- */

.button-sm {
	padding: 0.5rem 1.15rem;
	font-size: var(--small);
}

.button-lg {
	padding: 1rem 1.75rem;
}