@layer utilities {
/* ============================================================
   ARCSAFE UTILITIES
   Layer 5 — utilities.css
   Single-purpose helpers. No structural rules here.
   ============================================================ */

/* ---- Display ---- */
.u-hidden        { display: none !important; }
.u-show-mobile   { display: block; }
.u-show-desktop  { display: none; }
@media (min-width: 768px) {
  .u-show-mobile  { display: none; }
  .u-show-desktop { display: block; }
}

/* ---- Accessibility ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ---- Spacing ---- */
.mt-0  { margin-top: 0 !important; }
.mt-4  { margin-top: var(--s4) !important; }
.mt-6  { margin-top: var(--s6) !important; }
.mt-8  { margin-top: var(--s8) !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-4  { margin-bottom: var(--s4) !important; }
.mb-6  { margin-bottom: var(--s6) !important; }
.mb-8  { margin-bottom: var(--s8) !important; }

/* ---- Text ---- */
.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.text-navy     { color: var(--navy); }
.text-sky      { color: var(--sky); }
.text-mono     { font-family: var(--font-mono); }
.text-sm       { font-size: var(--text-sm); }
.text-xs       { font-size: var(--text-xs); }
.text-center   { text-align: center; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ---- Divider ---- */
.divider {
  height: 1px;
  background: var(--border-light);
  border: none;
  margin: 0;
}

/* ---- Flex helpers ---- */
.flex         { display: flex; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.gap-2        { gap: var(--s2); }
.gap-3        { gap: var(--s3); }
.gap-4        { gap: var(--s4); }

/* ---- Focus ring ---- */
:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

}