/*
 * Button component. A single primary/secondary pair covers every use
 * case needed so far (§30: avoid unnecessary visual variants).
 */
.mc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mc-space-2);
	padding: var(--mc-space-3) var(--mc-space-5);
	border: 1px solid transparent;
	border-radius: var(--mc-radius-sm);
	font-size: var(--mc-font-size-body);
	font-weight: var(--mc-font-weight-medium);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mc-transition-fast), border-color var(--mc-transition-fast), color var(--mc-transition-fast);
}

.mc-btn-primary {
	background-color: var(--mc-button);
	border-color: var(--mc-button);
	color: var(--mc-on-primary);
}

.mc-btn-primary:hover {
	background-color: var(--mc-button-hover);
	border-color: var(--mc-button-hover);
	color: var(--mc-on-primary);
}

.mc-btn-secondary {
	background-color: transparent;
	border-color: var(--mc-border);
	color: var(--mc-text);
}

.mc-btn-secondary:hover {
	border-color: var(--mc-primary);
	color: var(--mc-primary);
}

.mc-btn:disabled,
.mc-btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}

.mc-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mc-space-4);
	margin-top: var(--mc-space-5);
}