/* ============================================================
   app-utilities.css — Utilities layer
   ============================================================ */

@layer reset, base, layout, components, utilities;

@layer utilities {
  .flex          { display: flex; }
  .flex-col      { flex-direction: column; }
  .flex-wrap     { flex-wrap: wrap; }
  .flex-shrink-0 { flex-shrink: 0; }

  .items-center  { align-items: center; }
  .items-start   { align-items: flex-start; }

  .justify-between { justify-content: space-between; }
  .justify-center  { justify-content: center; }
  .justify-end     { justify-content: flex-end; }

  .ml-auto { margin-left: auto; }

  .gap-1 { gap: var(--sp-1); }
  .gap-2 { gap: var(--sp-2); }
  .gap-3 { gap: var(--sp-3); }
  .gap-4 { gap: var(--sp-4); }
  .gap-6 { gap: var(--sp-6); }
  .gap-8 { gap: var(--sp-8); }

  .p-2 { padding: var(--sp-2); }
  .p-3 { padding: var(--sp-3); }
  .p-4 { padding: var(--sp-4); }

  .px-2 { padding-inline: var(--sp-2); }
  .px-3 { padding-inline: var(--sp-3); }
  .px-4 { padding-inline: var(--sp-4); }

  .py-2 { padding-block: var(--sp-2); }
  .py-4 { padding-block: var(--sp-4); }

  .mt-2 { margin-top: var(--sp-2); }
  .mt-4 { margin-top: var(--sp-4); }
  .mt-8 { margin-top: var(--sp-8); }

  .mb-2 { margin-bottom: var(--sp-2); }
  .mb-4 { margin-bottom: var(--sp-4); }
}