html,
body {
	background: #fcf8f4;
}
body {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	color: #012044;
}
.font-display {
	letter-spacing: -0.02em;
}

/* Focus ring: 2px gold outline, 2px offset */
.fx:focus-visible {
	outline: 2px solid #b77a2b;
	outline-offset: 2px;
}

/* Step transition: 180ms opacity + 8px translate */
.step-enter {
	opacity: 0;
	transform: translateY(8px);
}
.step-in {
	transition:
		opacity 180ms ease,
		transform 180ms ease;
	opacity: 1;
	transform: translateY(0);
}

/* Hide number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance: textfield;
}

@media (prefers-reduced-motion: reduce) {
	.step-enter,
	.step-in {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}