@layer utilities {

  .text-muted   { color: var(--color-text-muted); }
  .text-subtle  { color: var(--color-text-subtle); }
  .text-brand   { color: var(--color-brand-base); }
  .text-success { color: var(--color-success-dark); }
  .text-warning { color: var(--color-warning-dark); }
  .text-danger  { color: var(--color-danger-dark); }
  .text-danger  { color: var(--color-negative); }
  .text-info    { color: var(--color-info-dark); }
  .text-white   { color: var(--color-ink-inverted); }
  .text-ink     { color: var(--color-ink); }
  .text-link    { color: var(--color-link); }

  .text-xs   { font-size: var(--text-xs); }
  .text-sm   { font-size: var(--text-sm); }
  .text-base { font-size: var(--text-base); }
  .text-lg   { font-size: var(--text-lg); }
  .text-xl   { font-size: var(--text-xl); }

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

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

  .uppercase { text-transform: uppercase; }
  .lowercase { text-transform: lowercase; }
  .capitalize { text-transform: capitalize; }

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

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

  .mono { font-family: var(--font-mono); }

  .hidden       { display: none; }
  .block        { display: block; }
  .inline-block { display: inline-block; }
  .inline       { display: inline; }
  .flex         { display: flex; }
  .inline-flex  { display: inline-flex; }

  .items-start   { align-items: flex-start; }
  .items-center  { align-items: center; }
  .items-end     { align-items: flex-end; }
  .justify-start { justify-content: flex-start; }
  .justify-center { justify-content: center; }
  .justify-end   { justify-content: flex-end; }
  .justify-between { justify-content: space-between; }
  .flex-wrap     { flex-wrap: wrap; }
  .flex-nowrap   { flex-wrap: nowrap; }
  .flex-1        { flex: 1; }
  .flex-shrink-0 { flex-shrink: 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); }
  .gap-6 { gap: var(--space-6); }

  .mt-1  { margin-top: var(--space-1); }
  .mt-2  { margin-top: var(--space-2); }
  .mt-3  { margin-top: var(--space-3); }
  .mt-4  { margin-top: var(--space-4); }
  .mt-6  { margin-top: var(--space-6); }
  .mt-8  { margin-top: var(--space-8); }

  .mb-1  { margin-bottom: var(--space-1); }
  .mb-2  { margin-bottom: var(--space-2); }
  .mb-3  { margin-bottom: var(--space-3); }
  .mb-4  { margin-bottom: var(--space-4); }
  .mb-6  { margin-bottom: var(--space-6); }
  .mb-8  { margin-bottom: var(--space-8); }

  .p-0   { padding: 0; }
  .p-4   { padding: var(--space-4); }
  .px-4  { padding-inline: var(--space-4); }
  .py-4  { padding-block: var(--space-4); }

  .w-full  { width: 100%; }
  .w-auto  { width: auto; }
  .max-w-sm { max-width: 480px; }
  .max-w-md { max-width: 640px; }

  .overflow-hidden  { overflow: hidden; }
  .overflow-x-auto  { overflow-x: auto; }

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

  .cursor-pointer { cursor: pointer; }
  .cursor-default { cursor: default; }

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

  .divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
    margin-block: var(--space-4);
  }

  .separator {
    width: 1px;
    height: 1em;
    background-color: var(--color-border);
    display: inline-block;
    vertical-align: middle;
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .ink-lightest { background-color: var(--color-ink-lightest); }

}