/* Component: button — primary (leaf), secondary (outlined forest), on-dark (white), quiet. */

.mx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--mx-space-2);
	min-height: var(--mx-control-h);
	padding: 0 var(--mx-space-6);
	border: 1.5px solid transparent;
	border-radius: var(--mx-radius);
	font-family: var(--mx-font-ui); font-size: var(--mx-text-base); font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.mx-btn--primary { background: var(--mx-leaf); color: var(--mx-white); }
.mx-btn--primary:hover { background: var(--mx-leaf-dark); color: var(--mx-white); }
.mx-btn--secondary { background: var(--mx-white); color: var(--mx-forest); border-color: var(--mx-forest); }
.mx-btn--secondary:hover { background: var(--mx-sage); color: var(--mx-forest); }
.mx-btn--on-dark { background: var(--mx-white); color: var(--mx-forest); }
.mx-btn--on-dark:hover { background: var(--mx-leaf-tint); color: var(--mx-forest); }
.mx-btn--on-dark:focus-visible { outline-color: var(--mx-white); }
.mx-btn--quiet { min-height: var(--mx-touch); padding: 0 14px; background: var(--mx-white); color: var(--mx-forest); border: 1px solid var(--mx-line-strong); border-width: 1px; }
.mx-btn--quiet:hover { background: var(--mx-sage); }
.mx-btn--block { width: 100%; }
.mx-btn--sm { min-height: var(--mx-touch); padding: 0 var(--mx-space-4); font-size: var(--mx-text-md); }