/* Purpose: Shared button component (BEM). Primary red pill + ghost glass variants. */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-7);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background-color var(--duration-base) var(--ease-out),
		color var(--duration-base) var(--ease-out),
		border-color var(--duration-base) var(--ease-out),
		transform var(--duration-base) var(--ease-out);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary — Max Red pill */
.btn--primary {
	background-color: var(--color-primary);
	color: var(--color-text-strong);
}
.btn--primary:hover { background-color: var(--color-primary-hover); }

/* Ghost — glass with border */
.btn--ghost {
	background-color: var(--color-overlay);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
.btn--ghost:hover { border-color: var(--color-text-muted); }