/*
 * Design System - AELITA
 * components/button.css - the .a-button component.
 *
 * Source of truth: docs/aelita-design/DESIGN.md
 * Uses only CSS variables from tokens.css, motion tokens and semantic colors.
 * No hex values, no `transition: all`, no Bootstrap classes.
 * Hover styles are gated behind (hover: hover) and (pointer: fine).
 * Press feedback is expressed with transform.
 *
 * Status: NOT enqueued yet (functions.php untouched) - no effect on the
 *         current theme until it is intentionally integrated.
 */

.a-button {
	/* State-driven slots, overridden by the variants below. */
	--btn-bg: transparent;
	--btn-fg: var(--text-primary);
	--btn-border: transparent;
	--btn-bg-hover: var(--bg-muted);
	--btn-fg-hover: var(--btn-fg);
	--btn-border-hover: var(--btn-border);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	/* min-height composes tokens to a 44px touch target. */
	min-height: calc(var(--space-6) + var(--space-3));
	padding: var(--space-3) var(--space-5);
	border: var(--border-w) solid var(--btn-border);
	border-radius: var(--radius);
	background-color: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color var(--dur-press) var(--ease-out),
		border-color var(--dur-press) var(--ease-out),
		color var(--dur-press) var(--ease-out),
		transform var(--dur-press) var(--ease-out);
}

/* -------------------------------------------------------------------- */
/* Variants                                                             */
/* -------------------------------------------------------------------- */
.a-button--primary {
	--btn-bg: var(--c-red-600);
	--btn-fg: var(--text-on-brand);
	--btn-border: var(--c-red-600);
	--btn-bg-hover: var(--c-red-700);
	--btn-fg-hover: var(--text-on-brand);
	--btn-border-hover: var(--c-red-700);
}

.a-button--secondary {
	--btn-bg: transparent;
	--btn-fg: var(--text-primary);
	--btn-border: var(--border);
	--btn-bg-hover: var(--bg-muted);
	--btn-fg-hover: var(--text-primary);
	--btn-border-hover: var(--text-secondary);
}

.a-button--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--link);
	--btn-border: transparent;
	--btn-bg-hover: var(--bg-muted);
	--btn-fg-hover: var(--link-hover);
	--btn-border-hover: transparent;
}

.a-button--icon {
	padding: var(--space-3);
	min-width: calc(var(--space-6) + var(--space-3));
	aspect-ratio: 1 / 1;
}

/* -------------------------------------------------------------------- */
/* States                                                               */
/* -------------------------------------------------------------------- */

/* Hover: only on devices that can actually hover. */
@media (hover: hover) and (pointer: fine) {
	.a-button:hover {
		background-color: var(--btn-bg-hover);
		color: var(--btn-fg-hover);
		border-color: var(--btn-border-hover);
	}
}

/* Press feedback through transform only. */
.a-button:active {
	transform: scale(0.97);
}

/* Keyboard focus. */
.a-button:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Disabled. */
.a-button:disabled,
.a-button[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}

.a-button:disabled:active,
.a-button[aria-disabled="true"]:active {
	transform: none;
}

/* Loading: hides the label visually but keeps the button size. */
.a-button.is-loading,
.a-button[aria-busy="true"] {
	position: relative;
	color: transparent;
	cursor: progress;
	pointer-events: none;
}

.a-button.is-loading::after,
.a-button[aria-busy="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	width: calc(var(--space-4) + var(--space-1));
	height: calc(var(--space-4) + var(--space-1));
	margin: auto;
	border: 2px solid var(--btn-fg);
	border-top-color: transparent;
	border-radius: 50%;
	animation: a-button-spin var(--dur-overlay) linear infinite;
}

@keyframes a-button-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Reduced motion: keep the functional spinner, drop the press movement. */
@media (prefers-reduced-motion: reduce) {
	.a-button {
		transition-duration: 0.01ms;
	}

	.a-button:active {
		transform: none;
	}

	.a-button.is-loading::after,
	.a-button[aria-busy="true"]::after {
		animation-duration: 900ms;
	}
}