.u-block { display: block; }
.u-inline-block { display: inline-block; }
.u-flex { display: flex; }
.u-grid { display: grid; }



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



.u-text-primary { color: var(--primary); }
.u-text-secondary { color: var(--secondary); }
.u-text-accent { color: var(--accent); }
.u-text-body { color: var(--text-body); }
.u-text-title { color: var(--text-title); }
.u-text-muted { color: var(--mid-grey); }
.u-text-light { color: var(--light); }
.u-text-warning { color: var(--warning); }



.u-bg-body { background-color: var(--bg-body); }
.u-bg-surface { background-color: var(--bg-surface); }
.u-bg-primary { background-color: var(--primary); }
.u-bg-secondary { background-color: var(--secondary); }
.u-bg-accent { background-color: var(--accent); }
.u-bg-dark { background-color: var(--dark); }
.u-bg-transparent { background-color: transparent; }
.u-bg-warning { background-color: var(--warning); }



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



.u-text-xs { font-size: var(--text-xs); }
.u-text-s { font-size: var(--text-s); }
.u-text-m { font-size: var(--text-m); }
.u-text-l { font-size: var(--text-l); }
.u-text-xl { font-size: var(--text-xl); }
.u-text-2xl { font-size: var(--text-2xl); }
.u-text-3xl { font-size: var(--text-3xl); }
.u-text-4xl { font-size: var(--text-4xl); }



.u-mt-0 { margin-top: 0; }
.u-mt-xs { margin-top: var(--space-xs); }
.u-mt-s { margin-top: var(--space-s); }
.u-mt-m { margin-top: var(--space-m); }
.u-mt-l { margin-top: var(--space-l); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mt-auto { margin-top: auto; }

.u-mb-0 { margin-bottom: 0; }
.u-mb-xs { margin-bottom: var(--space-xs); }
.u-mb-s { margin-bottom: var(--space-s); }
.u-mb-m { margin-bottom: var(--space-m); }
.u-mb-l { margin-bottom: var(--space-l); }
.u-mb-xl { margin-bottom: var(--space-xl); }

.u-mx-auto {
	margin-left: auto;
	margin-right: auto;
}



.u-p-0 { padding: 0; }
.u-p-xs { padding: var(--space-xs); }
.u-p-s { padding: var(--space-s); }
.u-p-m { padding: var(--space-m); }
.u-p-l { padding: var(--space-l); }

.u-pt-0 { padding-top: 0; }
.u-pb-0 { padding-bottom: 0; }



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



.u-rounded-s { border-radius: var(--radius-s); }
.u-rounded-m { border-radius: var(--radius-m); }
.u-rounded-l { border-radius: var(--radius-l); }
.u-rounded-full { border-radius: var(--radius-full); }

.u-shadow-s { box-shadow: var(--shadow-s); }
.u-shadow-m { box-shadow: var(--shadow-m); }
.u-shadow-l { box-shadow: var(--shadow-l); }
.u-shadow-none { box-shadow: none; }



.u-relative { position: relative; }
.u-overflow-hidden { overflow: hidden; }
.u-object-cover { object-fit: cover; }

.u-ratio-video { aspect-ratio: 16 / 9; }
.u-ratio-square { aspect-ratio: 1 / 1; }



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



.is-hidden {
	display: none !important;
}

.is-disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

.is-loading {
	opacity: 0.7;
	pointer-events: none;
	cursor: wait;
}