/*
 * Buttons — four kinds, used the same way on every page:
 *   .btn--primary   the one main action on a page (accent-filled)
 *   .btn--secondary a real but lesser action (outlined)
 *   .btn--ghost     low-emphasis actions like "Log out" (text only)
 *   .btn--danger    deleting something for good (red outline, filled red on hover)
 * Works on both <button> and <a>.
 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition),
		box-shadow var(--transition);
}

.btn--primary {
	background: var(--accent);
	color: var(--on-accent);
}

.btn--primary:hover {
	background: var(--accent-strong);
	color: var(--on-accent);
	box-shadow: 0 0 20px var(--accent-glow);
}

.btn--secondary {
	background: var(--surface);
	border-color: var(--border-strong);
	color: var(--text);
}

.btn--secondary:hover {
	border-color: var(--accent);
	color: var(--text);
}

.btn--ghost {
	background: transparent;
	color: var(--text-muted);
}

.btn--ghost:hover {
	color: var(--text);
}

.btn--danger {
	background: var(--danger-soft);
	border-color: var(--danger-border);
	color: var(--danger-text);
}

.btn--danger:hover,
.btn--danger:focus-visible {
	background: var(--danger);
	border-color: var(--danger);
	color: #ffffff;
}

.btn--large {
	padding: var(--space-3) var(--space-6);
	font-size: var(--text-md);
}

.btn:disabled,
.btn[aria-busy="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}