/**
 * Buttons — Figma "Button" (5-78): Primary, Dark, Outline Light.
 * Hover: color change + arrow slides (200ms ease-out).
 */

.button {
	display: inline-flex;
	gap: var(--space-12);
	align-items: center;
	justify-content: center;
	padding: 18px 28px 18px 32px;
	border: 1.5px solid transparent;
	background: var(--bg-accent);
	color: var(--text-inverse);
	font-family: var(--font-body);
	font-size: var(--button-size);
	font-weight: var(--button-weight);
	line-height: var(--button-line);
	letter-spacing: var(--button-tracking);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out);
}

.button .icon {
	flex-shrink: 0;
	transition: transform var(--duration-fast) var(--ease-out);
}

.button:hover .icon,
.button:focus-visible .icon {
	transform: translateX(4px);
}

.button:hover {
	background: var(--bg-accent-hover);
}

.button--dark {
	background: var(--bg-inverse);
}

.button--dark:hover {
	background: var(--bg-accent);
}

.button--outline-light {
	border-color: var(--icon-inverse);
	background: transparent;
}

.button--outline-light:hover {
	background: var(--bg-page);
	color: var(--text-primary);
}

.button--outline-light:focus-visible {
	outline-color: var(--icon-inverse);
}