@layer utilities {
  .txt-small { font-size: var(--text-small); }
  .txt-xs { font-size: var(--text-xs); }
  .txt-subtle { color: var(--color-ink-secondary); }
  .txt-center { text-align: center; }
  .txt-primary { color: var(--color-primary); }
  .txt-navy { color: var(--color-navy); }
  .txt-accent { color: var(--color-accent); }
  .flex { display: flex; }
  .flex-wrap { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .gap-sm { gap: var(--space-sm); }
  .price { font-weight: 800; letter-spacing: -0.01em; }
  .price--lg { font-weight: 800; font-size: var(--text-large); }
  .login-footer { margin-top: var(--space-lg); text-align: center; }
  .visually-hidden { clip-path: inset(50%); position: absolute; }

  .empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    max-width: 28rem;
    margin-inline: auto;
    color: var(--color-ink-secondary);

    & h1 { margin-bottom: var(--space-xs); }
    & p { margin-bottom: var(--space-xs); }
    & a { color: var(--color-primary); font-weight: 700; }
  }

  .empty-state__icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-sm);
  }

  .empty-state--inline {
    padding: var(--space-lg) var(--space-md);
    color: var(--color-ink-secondary);
    font-size: var(--text-small);
  }

  .mt-sm { margin-top: var(--space-sm); }
  .mt-md { margin-top: var(--space-md); }
  .mt-lg { margin-top: var(--space-lg); }
  .mb-sm { margin-bottom: var(--space-sm); }
  .mb-md { margin-bottom: var(--space-md); }
  .mb-lg { margin-bottom: var(--space-lg); }
  .ml-xs { margin-left: var(--space-xs); }
  .hidden { display: none; }

  /* Turbo Stream animations */
  [data-animation="fade-in"] {
    animation: util-fade-in var(--duration-slow) var(--ease-out);
  }

  @keyframes util-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  [data-removing] {
    animation: util-slide-out var(--duration-slow) ease forwards;
  }

  @keyframes util-slide-out {
    to { opacity: 0; transform: translateX(100%); height: 0; margin: 0; padding: 0; overflow: hidden; }
  }
}