.DebugSection {
	padding-top: var(--SpaceXL);
	border-top: 1px solid var(--ColorHairline);
}

.DebugSection:first-child {
	padding-top: 0;
	border-top: 0;
}

.DebugSwatchGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--SpaceS);
}

.DebugSwatch {
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	gap: var(--SpaceS);
	align-items: center;
	padding: var(--SpaceS);
	border: 1px solid var(--ColorHairline);
	border-radius: var(--RadiusMedium);
	background: rgba(255, 255, 255, 0.68);
}

.DebugSwatchColor {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(31, 42, 43, 0.16);
	border-radius: var(--RadiusSmall);
}

.DebugSwatchPaper {
	background: var(--ColorPaper);
}

.DebugSwatchInk {
	background: var(--ColorInk);
}

.DebugSwatchAqua {
	background: var(--ColorAqua);
}

.DebugSwatchCopper {
	background: var(--ColorCopper);
}

.DebugSwatchSage {
	background: var(--ColorSage);
}

.DebugSwatchGold {
	background: var(--ColorGold);
}

.DebugSwatchRose {
	background: var(--ColorRose);
}

.DebugSwatchViolet {
	background: var(--ColorViolet);
}

.DebugComponentRow {
	display: grid;
	gap: var(--SpaceM);
}