/* ── Button design system ──────────────────────────────────────────────────── */

.btn {
	display: inline-block !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: bold !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.01em !important;
	text-decoration: none !important;
	padding: 0.65em 1.5em !important;
	border-width: 2px !important;
	border-style: solid !important;
	border-radius: 9999px !important;
	cursor: pointer !important;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease !important;
}

.btn:hover,
.btn:focus-visible {
	text-decoration: none !important;
	outline: none !important;
}

/* Blue bg + white text + blue border → hover: white bg, blue text, border stays blue */
.btn--primary {
	background: var(--color-primary) !important;
	color: var(--color-on-primary) !important;
	border-color: var(--color-primary) !important;
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--color-on-primary) !important;
	color: var(--color-primary) !important;
}

/* White bg + blue text + white border → hover: blue bg, white text, blue border */
.btn--secondary {
	background: var(--color-on-primary) !important;
	color: var(--color-primary) !important;
	border-color: var(--color-on-primary) !important;
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	background: var(--color-primary) !important;
	color: var(--color-on-primary) !important;
	border-color: var(--color-primary) !important;
}