/* Variant B overrides - scoped to .variant-b */

body:has(.variant-b) {
	padding: 0;
	background: #f1efee;
	color: var(--color-pond);
}

.variant-b h1,
.variant-b h2,
.variant-b h3,
.variant-b h4,
.variant-b h5,
.variant-b h6 {
	color: var(--color-pond);
}

/* Remove all border-radius in variant B */
.variant-b button,
.variant-b input,
.variant-b select,
.variant-b textarea {
	border-radius: 0;
}

.has-content-padding {
	/* 50% larger than base 16px, with container-query-based centering for 960px max content width */
	--content-padding-b: max(24px, calc((100cqw - 960px) / 2));
	padding-inline: var(--content-padding-b);
}

/* Form overrides for variant B */
.variant-b .form {
	border-radius: 0;
	padding: var(--content-padding);
}

.variant-b .form input {
	border-radius: 0;
}

.variant-b .form input:focus {
	box-shadow: none;
	border-color: var(--color-green);
}

.variant-b .form button {
	border-radius: 0;
	background-color: var(--color-green);
}

.variant-b .form .error {
	border-radius: 0;
}