/**
 * Utilities — spacing, color, visibility helpers under .ds
 */

.ds-mt-0 { margin-top: 0; }
.ds-mt-4 { margin-top: var(--ds-space-4); }
.ds-mt-5 { margin-top: var(--ds-space-5); }
.ds-mt-6 { margin-top: var(--ds-space-6); }
.ds-mb-0 { margin-bottom: 0; }
.ds-mb-4 { margin-bottom: var(--ds-space-4); }
.ds-mb-6 { margin-bottom: var(--ds-space-6); }
.ds-gap-3 { gap: var(--ds-space-3); }
.ds-gap-4 { gap: var(--ds-space-4); }
.ds-gap-5 { gap: var(--ds-space-5); }

.ds-flex { display: flex; }
.ds-flex-wrap { flex-wrap: wrap; }
.ds-items-center { align-items: center; }
.ds-justify-between { justify-content: space-between; }

.ds-text-muted { color: var(--ds-color-text-muted); }
.ds-text-on-dark { color: var(--ds-color-text-on-dark); }

.ds-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ds-skip {
	position: absolute;
	left: var(--ds-space-4);
	top: -4rem;
	z-index: 80;
	padding: var(--ds-space-2) var(--ds-space-4);
	background: var(--ds-color-accent);
	color: var(--ds-color-white);
}

.ds-skip:focus { top: var(--ds-space-4); }