/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	background: var(--bg-card);
	color: var(--text);
	transition: all 180ms ease;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

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

.btn-primary:hover {
	background: var(--accent-dark);
	color: #ffffff;
	transform: translateY(-1px);
}

.btn-secondary {
	background: var(--bg);
	color: var(--link);
	border-color: var(--bg);
}

.btn-secondary:hover {
	background: var(--link);
	color: #fff;
	transform: translateY(-1px);
}

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

.btn-ghost:hover {
	background: var(--accent-soft);
	color: var(--text);
	border-color: var(--accent);
}

.btn .hex-icon { width: 18px; height: 18px; }