/**
 * VOSKA — Buttons
 *
 * Base button, variants, sizes, states.
 * All values reference variables.css.
 */

/* ── Base ─────────────────────────────────────────────────────────────── */

.vsk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vsk-space-sm);
	padding: 10px 24px;
	font-family: var(--vsk-font-primary);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--vsk-radius-md);
	cursor: pointer;
	transition:
		background var(--vsk-transition-fast),
		color var(--vsk-transition-fast),
		border-color var(--vsk-transition-fast),
		transform var(--vsk-transition-fast);
}

.vsk-btn:active {
	transform: scale(0.98);
}

.vsk-btn:focus-visible {
	outline: 2px solid var(--vsk-color-primary);
	outline-offset: 2px;
}

/* ── Variants ─────────────────────────────────────────────────────────── */

.vsk-btn--primary {
	background: var(--vsk-color-primary);
	color: var(--vsk-color-text-invert);
}

.vsk-btn--primary:hover {
	background: var(--vsk-color-secondary);
}

.vsk-btn--secondary {
	background: transparent;
	color: var(--vsk-color-primary);
	border-color: var(--vsk-color-primary);
}

.vsk-btn--secondary:hover {
	background: var(--vsk-color-primary);
	color: var(--vsk-color-text-invert);
}

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

.vsk-btn--ghost:hover {
	border-color: var(--vsk-color-primary);
	color: var(--vsk-color-primary);
}

/* ── Sizes ────────────────────────────────────────────────────────────── */

.vsk-btn--sm {
	padding: 6px 16px;
	font-size: 0.8125rem;
}

.vsk-btn--lg {
	padding: 14px 32px;
	font-size: 1.0625rem;
}

/* ── States ───────────────────────────────────────────────────────────── */

.vsk-btn:disabled,
.vsk-btn--disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Full width ───────────────────────────────────────────────────────── */

.vsk-btn--full {
	width: 100%;
}