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

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

.u-text-ink { color: var(--color-ink); }
.u-text-muted { color: var(--color-ink-muted); }
.u-text-faint { color: var(--color-ink-faint); }
.u-text-brand { color: var(--color-brand); }
.u-text-accent { color: var(--color-accent); }
.u-text-surface { color: var(--color-surface); }
.u-text-surface-70 { color: rgba(255,255,255,0.7); }

.u-font-bold { font-weight: 700; }
.u-font-black { font-weight: 900; }
.u-font-normal { font-weight: 400; }

.u-type-xs { font-size: var(--type-xs); }
.u-type-sm { font-size: var(--type-sm); }
.u-type-base { font-size: var(--type-base); }
.u-type-md { font-size: var(--type-md); }
.u-type-lg { font-size: var(--type-lg); }
.u-type-xl { font-size: var(--type-xl); }
.u-type-2xl { font-size: var(--type-2xl); }
.u-type-3xl { font-size: var(--type-3xl); }

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

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

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

.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-flex-wrap { flex-wrap: wrap; }

.u-grid { display: grid; }
.u-block { display: block; }
.u-inline-block { display: inline-block; }
.u-hidden { display: none; }

.u-w-full { width: 100%; }
.u-max-60ch { max-width: 60ch; }
.u-max-80ch { max-width: 80ch; }

.u-bg-surface { background-color: var(--color-surface); }
.u-bg-alt { background-color: var(--color-surface-alt); }
.u-bg-ink { background-color: var(--color-ink); }
.u-bg-brand { background-color: var(--color-brand); }
.u-bg-accent { background-color: var(--color-accent); }

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

.u-shadow-sm { box-shadow: var(--shadow-sm); }
.u-shadow-md { box-shadow: var(--shadow-md); }

.u-border { border: 1px solid var(--color-border); }
.u-border-top { border-top: 1px solid var(--color-border); }
.u-border-bottom { border-bottom: 1px solid var(--color-border); }

.u-p-md { padding: var(--space-md); }
.u-p-lg { padding: var(--space-lg); }
.u-p-xl { padding: var(--space-xl); }
.u-px-md { padding-inline: var(--space-md); }
.u-px-lg { padding-inline: var(--space-lg); }
.u-py-md { padding-block: var(--space-md); }
.u-py-lg { padding-block: var(--space-lg); }
.u-py-xl { padding-block: var(--space-xl); }

.u-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-lg);
}

.u-lh-tight { line-height: 1.2; }
.u-lh-normal { line-height: 1.6; }
.u-lh-relaxed { line-height: 1.8; }

.u-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.u-nowrap { white-space: nowrap; }

.u-relative { position: relative; }
.u-overflow-hidden { overflow: hidden; }

@media (max-width: 640px) {
  .u-hide-mobile { display: none !important; }
}

@media (min-width: 641px) {
  .u-hide-desktop { display: none !important; }
}