/**
 * Reusable project UI primitives.
 * The first calibration screens define these rules once; blocks reuse them.
 */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16rem;
	border: 1px solid transparent;
	border-radius: 4rem;
	transition: transform var(--transition), box-shadow var(--transition), filter var(--transition), border-color var(--transition), background-color var(--transition);
}

.button--primary {
	background: var(--color-accent-bright);
	color: #11140f;
	box-shadow: 0 0 28rem color-mix(in srgb, var(--color-accent-bright) 44%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button--secondary {
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(16, 19, 20, 0.7);
	color: #ffffff;
	backdrop-filter: blur(12rem);
}

.button:hover {
	transform: translateY(-2rem);
	filter: brightness(1.06);
}

.button--primary:hover {
	box-shadow: 0 0 38rem color-mix(in srgb, var(--color-accent-bright) 58%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}