.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;
}

.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.flex-1        { flex: 1; min-height: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-4  { gap: var(--s-4); }
.gap-8  { gap: var(--s-8); }
.gap-12 { gap: var(--s-12); }
.gap-16 { gap: var(--s-16); }
.gap-24 { gap: var(--s-24); }

.p-8   { padding: var(--s-8); }
.p-16  { padding: var(--s-16); }
.p-24  { padding: var(--s-24); }
.px-16 { padding-left: var(--s-16); padding-right: var(--s-16); }
.py-16 { padding-top: var(--s-16); padding-bottom: var(--s-16); }

.mt-4  { margin-top: var(--s-4); }
.mt-8  { margin-top: var(--s-8); }
.mt-16 { margin-top: var(--s-16); }
.mt-24 { margin-top: var(--s-24); }
.mt-32 { margin-top: var(--s-32); }

.text-center    { text-align: center; }
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-danger    { color: var(--danger); }
.text-accent    { color: var(--accent); }

.w-full   { width: 100%; }
.h-full   { height: 100%; }
.h-screen { height: 100dvh; }

.hidden { display: none !important; }