@layer utilities {
  .icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .icon--sm {
    width: 1rem;
    height: 1rem;
  }

  .icon--lg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .icon--xl {
    width: 2rem;
    height: 2rem;
  }

  .hidden { display: none; }

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

  .txt-center { text-align: center; }
  .txt-right { text-align: right; }
  .txt-left { text-align: left; }

  .txt-small { font-size: var(--text-sm); }
  .txt-xsmall { font-size: var(--text-xs); }
  .txt-large { font-size: var(--text-lg); }

  .txt-subtle { color: var(--color-ink-subtle); }
  .txt-muted { color: var(--color-ink-muted); }
  .txt-primary { color: var(--color-primary-hover); }
  .txt-positive { color: var(--color-positive); }
  .txt-negative { color: var(--color-negative); }

  .font-medium { font-weight: var(--font-medium); }
  .font-semibold { font-weight: var(--font-semibold); }
  .font-bold { font-weight: var(--font-bold); }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

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

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

  .pad { padding: var(--space-md); }
  .pad-lg { padding: var(--space-lg); }

  .pad-block { padding-block: var(--space-md); }
  .pad-block-lg { padding-block: var(--space-lg); }
  .pad-inline { padding-inline: var(--space-md); }
  .pad-inline-lg { padding-inline: var(--space-lg); }

  .gap-sm { gap: var(--space-sm); }
  .gap { gap: var(--space-md); }
  .gap-lg { gap: var(--space-lg); }

  .rounded { border-radius: var(--radius-md); }
  .rounded-lg { border-radius: var(--radius-lg); }
  .rounded-full { border-radius: var(--radius-full); }

  .bg-surface { background-color: var(--color-surface); }
  .bg-canvas { background-color: var(--color-canvas); }

  .border { border: 1px solid var(--color-border); }
  .border-subtle { border: 1px solid var(--color-border-subtle); }

  .width-full { width: 100%; }
  .flex-fill { flex: 1; }

  .overflow-hidden { overflow: hidden; }

  .divide-y > * + * {
    border-top: 1px solid var(--color-border-subtle);
  }
}