/* Canonical button system. Use .btn with one modifier:
 *   --primary    2px loud cyan border + 15% cyan fill — strongest CTA
 *                (covers Confirm/Approve/Save/Submit; there is no .btn--approve)
 *   --secondary  1px subtle cyan border, transparent — default and alternates
 *                (covers Cancel/Back/Deny; there is no .btn--deny)
 *   --ghost      transparent, muted text — low-emphasis alternates
 *   --icon       icon-only, transparent — toolbars, message actions
 *
 * Destructive actions style as .btn--secondary at rest. They MUST be paired
 * with a one-line caption ("This deletes the kiosk and disconnects all
 * visitors") and MUST invoke a confirmation dialog. Color is not how we
 * warn — language and confirmation are. See docs/reference/design-language.md
 * "Buttons" for the full contract.
 *
 * View-specific sizing (e.g. message-actions 26px) lives in the consuming
 * file as a scoped override, not a new modifier here. */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--font-body);
	font-weight: 500;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--text-primary);
	cursor: pointer;
	transition:
		background var(--duration-normal) var(--ease-out-smooth),
		border-color var(--duration-normal) var(--ease-out-smooth),
		color var(--duration-normal) var(--ease-out-smooth);
}

.btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

/* ── Primary — 2px loud cyan border + 15% cyan fill + white text ──── */
.btn--primary {
	background: var(--accent-cyan-15);
	color: var(--text-primary);
	border: 2px solid var(--accent-cyan);
}

.btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
	background: var(--accent-cyan-25);
	border-color: var(--accent-cyan);
}

/* ── Secondary — 1px medium cyan border + transparent + white text ── */
.btn--secondary {
	background: transparent;
	color: var(--text-primary);
	border-color: var(--accent-cyan-30);
}

.btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
	background: var(--accent-cyan-12);
	border-color: var(--accent-cyan-45);
}

.btn--secondary.active,
.btn--secondary[aria-pressed="true"] {
	background: var(--accent-cyan-15);
	color: var(--text-primary);
	border-color: var(--accent-cyan);
}

/* ── Ghost — transparent (low-emphasis alternate) ─────────────────── */
.btn--ghost {
	background: var(--bg-tertiary);
	color: var(--text-secondary);
	border-color: var(--border-color);
}

.btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
	background: var(--accent-cyan-12);
	color: var(--text-primary);
	border-color: var(--accent-cyan-30);
}

/* ── Icon — icon-only (no chrome) ───────────────────────────────── */
.btn--icon {
	padding: var(--space-1);
	background: transparent;
	color: var(--text-muted);
	border-color: transparent;
	font-size: var(--icon-md);
}

.btn--icon:hover:not(:disabled):not([aria-disabled="true"]) {
	color: var(--accent-cyan);
	background: var(--overlay-light-3);
}

/* ── Touch-friendly minimum size on coarse pointers ────────────── */
@media (any-pointer: coarse) {
	.btn--icon {
		min-width: 36px;
		min-height: 36px;
	}
}