/* @doxallia/design — Button primitive
 * Base for <button> action elements across the portail.
 * For <a> link-buttons use .support-card-btn from support-card.css.
 */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	border: none;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	text-decoration: none;
	transition: background var(--transition);
}

.btn--primary {
	padding: var(--s-2) var(--s-6);
	background: var(--color-brand);
	color: var(--color-on-brand, #fff);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
}

.btn--primary:hover {
	background: var(--color-brand-dark);
}

/* Surface token contract — consumers remap these on dark containers.
 * Defaults preserve the light-surface brand behavior. */
.btn--secondary {
	padding: var(--s-2) var(--s-6);
	background: var(--btn-secondary-bg, transparent);
	color: var(--btn-secondary-fg, var(--color-brand));
	border: 1px solid var(--btn-secondary-border, var(--color-brand));
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
}

.btn--secondary:hover {
	background: var(--btn-secondary-bg-hover, var(--color-brand-active));
}

.btn--ghost {
	padding: var(--s-2) var(--s-4);
	background: transparent;
	color: var(--color-text);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
}

.btn--ghost:hover {
	color: var(--color-brand);
	background: var(--color-surface-muted);
}

.btn--large {
	padding: var(--s-3) var(--s-8);
	font-size: var(--text-base);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	.btn--secondary {
		color: var(--btn-secondary-fg, var(--color-brand-text));
		border-color: var(--btn-secondary-border, var(--color-brand-text));
	}

	.btn--secondary:hover {
		background: var(--btn-secondary-bg-hover, rgba(129, 140, 248, 0.12));
	}

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