.u-text-primary { color: var(--text-primary) !important; }
.u-text-secondary { color: var(--text-secondary) !important; }
.u-text-muted { color: var(--text-muted) !important; }
.u-text-success { color: var(--state-success) !important; }
.u-text-error { color: var(--state-error) !important; }
.u-text-warning { color: var(--state-warning) !important; }
.u-text-info { color: var(--state-info) !important; }
.u-text-brand { color: var(--vapy-dark) !important; }
.u-text-on-dark { color: var(--text-on-dark) !important; }

.u-text-xs  { font-size: var(--font-size-xs)   !important; }
.u-text-sm  { font-size: var(--font-size-sm)   !important; }
.u-text-base{ font-size: var(--font-size-base) !important; }
.u-text-md  { font-size: var(--font-size-md)   !important; }
.u-text-lg  { font-size: var(--font-size-lg)   !important; }
.u-text-xl  { font-size: var(--font-size-xl)   !important; }
.u-text-2xl { font-size: var(--font-size-2xl)  !important; }

.u-font-400 { font-weight: 400 !important; }
.u-font-500 { font-weight: 500 !important; }
.u-font-600 { font-weight: 600 !important; }
.u-font-700 { font-weight: 700 !important; }
.u-font-800 { font-weight: 800 !important; }

.u-bg-card    { background: var(--color-card) !important; }
.u-bg-page    { background: var(--color-bg) !important; }
.u-bg-yellow  { background: var(--vapy-primary) !important; }
.u-bg-dark    { background: var(--vapy-dark) !important; color: #fff !important; }
.u-bg-green   { background: var(--vapy-accent) !important; color: #fff !important; }
.u-bg-success { background: var(--state-success-bg) !important; }
.u-bg-error   { background: var(--state-error-bg) !important; }
.u-bg-warning { background: var(--state-warning-bg) !important; }
.u-bg-info    { background: var(--state-info-bg) !important; }

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

.u-rounded-sm   { border-radius: var(--radius-sm)   !important; }
.u-rounded      { border-radius: var(--radius-md)   !important; }
.u-rounded-lg   { border-radius: var(--radius-lg)   !important; }
.u-rounded-xl   { border-radius: var(--radius-xl)   !important; }
.u-rounded-2xl  { border-radius: var(--radius-2xl)  !important; }
.u-rounded-full { border-radius: var(--radius-full) !important; }
/* Legacy aliases */
.u-rounded-input  { border-radius: var(--radius-md)  !important; }
.u-rounded-card   { border-radius: var(--radius-lg)  !important; }
.u-rounded-button { border-radius: var(--radius-md)  !important; }
.u-rounded-modal  { border-radius: var(--radius-xl)  !important; }

.u-shadow-xs   { box-shadow: var(--shadow-xs) !important; }
.u-shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.u-shadow      { box-shadow: var(--shadow-md) !important; }
.u-shadow-lg   { box-shadow: var(--shadow-lg) !important; }
.u-shadow-xl   { box-shadow: var(--shadow-xl) !important; }
.u-shadow-none { box-shadow: none !important; }
/* Legacy aliases */
.u-shadow-card       { box-shadow: var(--shadow-md) !important; }
.u-shadow-card-hover:hover { box-shadow: var(--shadow-lg) !important; transform: translateY(-2px); }

.u-transition  { transition: all 150ms ease !important; }

/* ── Spacing ── */
.u-p-0 { padding: 0 !important; }
.u-p-1 { padding: var(--space-1) !important; }
.u-p-2 { padding: var(--space-2) !important; }
.u-p-3 { padding: var(--space-3) !important; }
.u-p-4 { padding: var(--space-4) !important; }
.u-p-5 { padding: var(--space-5) !important; }
.u-p-6 { padding: var(--space-6) !important; }

.u-px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.u-px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.u-px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }

.u-py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.u-py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.u-py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }

.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: var(--space-1) !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-1 { margin-bottom: var(--space-1) !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-mb-5 { margin-bottom: var(--space-5) !important; }

.u-ml-auto { margin-left: auto !important; }
.u-mr-auto { margin-right: auto !important; }
.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ── Layout ── */
.u-flex        { display: flex !important; }
.u-flex-col    { flex-direction: column !important; }
.u-flex-wrap   { flex-wrap: wrap !important; }
.u-grid        { display: grid !important; }
.u-block       { display: block !important; }
.u-inline      { display: inline !important; }
.u-inline-flex { display: inline-flex !important; }
.u-hidden      { display: none !important; }

.u-items-start   { align-items: flex-start !important; }
.u-items-center  { align-items: center !important; }
.u-items-end     { align-items: flex-end !important; }
.u-justify-start   { justify-content: flex-start !important; }
.u-justify-center  { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-end     { justify-content: flex-end !important; }

.u-gap-1 { gap: var(--space-1) !important; }
.u-gap-2 { gap: var(--space-2) !important; }
.u-gap-3 { gap: var(--space-3) !important; }
.u-gap-4 { gap: var(--space-4) !important; }
.u-gap-5 { gap: var(--space-5) !important; }

.u-flex-1     { flex: 1 1 0% !important; }
.u-shrink-0   { flex-shrink: 0 !important; }
.u-w-full     { width: 100% !important; }
.u-min-w-0    { min-width: 0 !important; }

/* ── Position ── */
.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }

/* ── Text Align ── */
.u-text-left   { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right  { text-align: right !important; }

/* ── Truncate ── */
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Cursor ── */
.u-pointer { cursor: pointer !important; }

/* ── Opacity ── */
.u-opacity-50 { opacity: .5 !important; }
.u-opacity-70 { opacity: .7 !important; }