/* Box primitive */
/* Provides padding, borders, and backgrounds for content containment */

.box {
	padding: var(--s1);
	border: 1px solid currentColor;
	color: var(--color-dark);
	background-color: var(--color-light);
}

.box * {
	color: inherit;
}

.box.invert {
	color: var(--color-light);
	background-color: var(--color-dark);
}

/* NEW: Box variants for S+F design */
.box.serif {
	font-family: var(--font-serif);
}

.box.mono {
	font-family: var(--font-mono);
}

/* NEW: Newsletter box style */
.box.newsletter {
	background-color: transparent;
	border: none;
	border-bottom: 2px solid var(--stone-900);
	padding: 0;
}

.box.newsletter:focus-within {
	border-color: var(--stone-400);
}