@layer utilities {
  /* Display */
  .hidden       { display: none !important; }
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .block        { display: block; }
  .inline       { display: inline; }
  .flex         { display: flex; }
  .grid         { display: grid; }
  .flex-wrap    { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .items-end    { align-items: flex-end; }
  .justify-between { justify-content: space-between; }
  .relative     { position: relative; }

  /* Grid */
  .grid-cols-2 { grid-template-columns: 1fr 1fr; }
  .col-span-full { grid-column: 1 / -1; }

  /* Sizing */
  .w-full  { inline-size: 100%; }
  .w-24    { inline-size: 6rem; }
  .min-w-0 { min-inline-size: 0; }
  .min-w-24 { min-inline-size: 6rem; }

  /* Typography — weight */
  .font-medium   { font-weight: var(--weight-medium); }
  .font-semibold { font-weight: var(--weight-semibold); }
  .font-bold     { font-weight: var(--weight-bold); }
  .font-mono     { font-family: var(--font-mono); }

  /* Typography — size */
  .text-xs  { font-size: var(--text-xs); }
  .text-sm  { font-size: var(--text-sm); }
  .text-2xl { font-size: var(--text-2xl); }
  .text-4xl { font-size: var(--text-4xl); }
  .text-2xs { font-size: var(--text-2xs); }
  .text-3xs { font-size: var(--text-3xs); }
  .text-center { text-align: center; }

  /* Typography — style */
  .italic     { font-style: italic; }
  .cursor-pointer { cursor: pointer; }
  .capitalize { text-transform: capitalize; }
  .truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Text colors */
  .text-muted    { color: var(--color-ink-muted); }
  .text-subtle   { color: var(--color-ink-subtle); }
  .text-faint    { color: var(--color-ink-faint); }
  .text-negative { color: var(--color-negative); }

  /* Background colors */
  .bg-surface-alt { background-color: var(--color-surface-alt); }

  /* Overflow */
  .overflow-x-auto { overflow-x: auto; }

  /* Spacing — block-end */
  .mb-1 { margin-block-end: var(--space-1); }
  .mb-2 { margin-block-end: var(--space-2); }
  .mb-3 { margin-block-end: var(--space-3); }
  .mb-4 { margin-block-end: var(--space-4); }
  .mb-6 { margin-block-end: var(--space-6); }
  .mb-8 { margin-block-end: var(--space-8); }

  /* Spacing — block-start */
  .mt-tight { margin-block-start: 0.15rem; }
  .mt-1 { margin-block-start: var(--space-1); }
  .m-0 { margin: 0; }

  .mt-2 { margin-block-start: var(--space-2); }
  .mt-3 { margin-block-start: var(--space-3); }
  .mt-4 { margin-block-start: var(--space-4); }
  .mt-6 { margin-block-start: var(--space-6); }

  /* Spacing — inline-start */
  .ml-1   { margin-inline-start: var(--space-1); }
  .ml-2   { margin-inline-start: var(--space-2); }
  .ml-4   { margin-inline-start: var(--space-4); }
  .ml-auto { margin-inline-start: auto; }
  .pl-4   { padding-inline-start: var(--space-4); }

  /* Spacing — inline-end */
  .mr-2 { margin-inline-end: var(--space-2); }

  /* Spacing — padding block-start */
  .pt-3 { padding-block-start: var(--space-3); }
  .pt-4 { padding-block-start: var(--space-4); }
  .pt-6 { padding-block-start: var(--space-6); }

  /* Spacing — padding block-end */
  .pb-1 { padding-block-end: var(--space-1); }
  .pb-tight { padding-block-end: var(--space-1); }

  /* Border */
  .border-t { border-block-start: var(--border); }
  .border-t-light { border-block-start: var(--border-light); }

  /* Spacing — more margin-block-end */
  .mb-5 { margin-block-end: var(--space-5); }

  /* Flexbox layouts */
  .flex-col       { flex-direction: column; }
  .flex-row       { flex-direction: row; }
  .flex-1         { flex: 1; }
  .flex-shrink-0  { flex-shrink: 0; }
  .gap-0          { gap: 0; }
  .gap-1          { gap: var(--space-1); }
  .gap-2          { gap: var(--space-2); }
  .gap-3          { gap: var(--space-3); }
  .gap-4          { gap: var(--space-4); }
  .flex-col-gap-4 { display: flex; flex-direction: column; gap: var(--space-4); }

  /* Width utilities */
  .max-w-12 { max-inline-size: 12rem; }
  .max-w-28 { max-width: 28rem; }
  .max-w-56 { max-width: 56rem; }

  /* Whitespace */
  .whitespace-pre-line { white-space: pre-line; }

  /* Padding */
  .p-4  { padding: var(--space-4); }
  .p-6  { padding: var(--space-6); }
  .py-4 { padding-block: var(--space-4); }
  .px-5 { padding-inline: var(--space-5); }
}