@layer utilities {
  /* Screen-reader-only content */
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  /* Text alignment */
  .text-center {
    text-align: center;
  }

  /* Text wrapping */
  .text-balance {
    text-wrap: balance;
  }

  /* Flow spacing modifiers */
  .flow-space-sm {
    --flow-space: var(--space-md);
  }

  .flow-space-lg {
    --flow-space: var(--space-2xl);
  }

  /* Decorative accent border */
  .accent-border-top {
    border-top: 3px solid var(--color-accent);
  }

  /* Surface color utility */
  .surface-bg {
    background-color: var(--color-surface);
  }
}