.mv-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--target-size);
	gap: var(--space-2);
	padding: var(--space-2) var(--space-5);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--color-surface);
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
}

.mv-button:hover {
	color: var(--color-surface);
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

.mv-button:active {
	transform: translateY(1px);
}

.mv-button:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus);
	outline-offset: var(--focus-ring-offset);
}

.mv-button[disabled],
.mv-button[aria-disabled="true"] {
	opacity: 0.55;
	pointer-events: none;
}

.mv-button--secondary {
	color: var(--color-primary);
	background: var(--color-surface);
	border-color: var(--color-border);
}

.mv-button--secondary:hover {
	color: var(--color-primary-hover);
	background: var(--color-bg);
	border-color: var(--color-primary-hover);
}

.mv-card {
	padding: var(--card-padding, var(--space-6));
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.mv-badge,
.mv-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	width: fit-content;
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-primary);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
	border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}

.mv-badge {
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
}

.mv-chip {
	min-height: 2rem;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
}

.mv-form {
	display: grid;
	gap: var(--space-4);
}

.mv-field {
	display: grid;
	gap: var(--space-2);
}

.mv-field__label {
	font-weight: 600;
	color: var(--color-heading);
}

.mv-field__help {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.mv-field__error {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-error);
}

.mv-field :where(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--color-error);
}