/* ============================================
   Utilities Layer
   ============================================ */
@layer utilities {
  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mt-0 { margin-top: 0; }
  .mt-sm { margin-top: var(--space-sm); }
  .mt-md { margin-top: var(--space-md); }
  .mt-lg { margin-top: var(--space-lg); }

  .mb-0 { margin-bottom: 0; }
  .mb-sm { margin-bottom: var(--space-sm); }
  .mb-md { margin-bottom: var(--space-md); }
  .mb-lg { margin-bottom: var(--space-lg); }

  .mr-0 { margin-right: 0; }
  .mr-sm { margin-right: var(--space-sm); }
  .mr-md { margin-right: var(--space-md); }
  .mr-lg { margin-right: var(--space-lg); }

  .no-wrap { white-space: nowrap; }
  .pre-wrap { white-space: pre-wrap; }

  .hidden { display: none; }

  .block { display: block; }
  .inline { display: inline; }

  .fs-xs { font-size: var(--font-size-xs); }
  .fs-sm { font-size: var(--font-size-sm); }
}