/* spacing */

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

.u-mb-16 { margin-bottom: var(--space-4); }
.u-mb-20 { margin-bottom: var(--space-5); }

.u-block-gap { margin: var(--space-3) 0; }

/* layout */

.u-d-flex        { display:flex; }
.u-flex-col      { flex-direction:column; }
.u-flex-center   { align-items:center; }
.u-flex-shrink-0 { flex-shrink:0; }

.u-gap-8  { gap: var(--space-2); }

.u-w-full { width:100%; }

/* interaction */

.u-clickable { cursor:pointer; }

/* typography */

.u-text-muted   { color:var(--text-muted); }
.u-text-default { color:var(--text-primary); }
.u-text-yellow  { color:var(--text-accent); }

/* font */

.u-fs-10  { font-size:var(--fs-2xs); }
.u-fw-700 { font-weight:var(--fw-bold); }
.u-fw-900 { font-weight:var(--fw-heavy); }

/* borders */

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

/* backgrounds */

.u-bg-input { background:var(--surface-input); }
.u-bg-card  { background:var(--surface-card); }
.u-gap-16 { gap: var(--space-4); }