/**
 * wpins/button — przycisk marki WPiNS. Radius 0, Lato uppercase, ≥44px, focus 3px czerwień.
 * Warianty: light (ghost ink→fill, tokeny flipują w dark mode), dark (na czerni), file (jak light + ikona).
 */
.wpins-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	padding: 0.7rem 1.5rem;
	font-family: var(--font-wpins-ui);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.1;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wpins-btn:focus-visible {
	outline: 3px solid var(--color-wpins-focus, #e52528);
	outline-offset: 4px;
}
.wpins-btn__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
.wpins-btn--light .wpins-btn__icon,
.wpins-btn--dark .wpins-btn__icon { transition: transform 0.2s ease; }
.wpins-btn--light:hover .wpins-btn__icon,
.wpins-btn--dark:hover .wpins-btn__icon { transform: translateX(3px); }

/* Jasne tło (domyślny) + plik: ghost → hover fill. Token semantyczny `heading` flipuje w dark
   mode (ciemny na jasnej stronie, jasny na ciemnej) — przycisk widoczny w obu trybach. */
.wpins-btn--light,
.wpins-btn--file {
	background: transparent;
	border-color: var(--color-wpins-heading, #0a0a0a);
	color: var(--color-wpins-heading, #0a0a0a);
}
.wpins-btn--light:hover,
.wpins-btn--file:hover {
	background: var(--color-wpins-heading, #0a0a0a);
	color: var(--color-wpins-canvas, #fff);
}

/* Pełny — solidny przycisk. Tokeny `heading`/`canvas` flipują: czarny na jasnej stronie,
   biały w dark mode → ZAWSZE widoczny. Hover = inwersja na kontur. */
.wpins-btn--dark {
	background: var(--color-wpins-heading, #0a0a0a);
	border-color: var(--color-wpins-heading, #0a0a0a);
	color: var(--color-wpins-canvas, #fff);
}
.wpins-btn--dark:hover {
	background: transparent;
	color: var(--color-wpins-heading, #0a0a0a);
}

/* Odstęp zewnętrzny (margines góra+dół) — presety z naszej skali 4px. Klasy, nie inline. */
.wpins-btn--space-sm { margin-block: 0.75rem; }
.wpins-btn--space-md { margin-block: 1.5rem; }
.wpins-btn--space-lg { margin-block: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
	.wpins-btn,
	.wpins-btn__icon { transition: none; }
}