/**
 * Buttons (design-system.md §4).
 *
 * Five variants, one shell. Loaded site-wide rather than per-template because
 * plugin blocks use these classes wherever an author drops them — the freebie
 * CTA and the kit card both render `.ait-btn`, and a block must not depend on
 * which template it happens to be inside.
 *
 * Hit target is 48px on mobile: the design system's floor, and the difference
 * between a CTA that converts on a phone and one that gets mis-tapped.
 */

.ait-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 48px;
	padding: var(--s-3) var(--s-5);
	border: 0;
	border-radius: var(--r-md);
	font-family: var(--font-body);
	font-size: var(--fs-ui);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease);
}

.ait-btn:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

/* Primary — Ember with Ink text, the only permitted pairing on Ember
 * (design-system.md §2.2). One per viewport. */
.ait-btn--primary {
	background: var(--c-accent);
	color: var(--c-accent-ink);
}

.ait-btn--primary:hover {
	background: var(--c-accent-hover);
	box-shadow: var(--shadow-1);
	color: var(--c-accent-ink);
}

.ait-btn--secondary {
	background: var(--c-primary);
	color: var(--c-bg);
}

.ait-btn--secondary:hover {
	background: var(--c-primary-hover);
	box-shadow: var(--shadow-1);
	color: var(--c-bg);
}

.ait-btn--ghost {
	background: transparent;
	border: 1.5px solid var(--c-primary);
	color: var(--c-primary);
}

.ait-btn--ghost:hover {
	background: var(--c-surface);
	color: var(--c-primary-hover);
}

@media (min-width: 640px) {
	.ait-btn {
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ait-btn {
		transition: none;
	}
}