/* === Margin Utilities === */
:root {
  --size-0: 0;
  --size-1: 4px;
  --size-2: 8px;
  --size-3: 12px;
  --size-4: 16px;
}

.m-0   { margin: var(--size-0) !important; }

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

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

.ml-0  { margin-left: var(--size-0) !important; }
.ml-1  { margin-left: var(--size-1) !important; }
.ml-2  { margin-left: var(--size-2) !important; }
.mr-0  { margin-right: var(--size-0) !important; }
.mr-1  { margin-right: var(--size-1) !important; }
.mr-2  { margin-right: var(--size-2) !important; }

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

/* === Padding Utilities === */

.p-0   { padding: var(--size-0) !important; }
.p-1   { padding: var(--size-1) !important; }
.p-2   { padding: var(--size-2) !important; }
.p-3   { padding: var(--size-3) !important; }
.p-4   { padding: var(--size-4) !important; }

.pt-2  { padding-top: var(--size-2) !important; }
.pb-2  { padding-bottom: var(--size-2) !important; }
.pl-2  { padding-left: var(--size-2) !important; }
.pr-2  { padding-right: var(--size-2) !important; }

/* === Text Alignment === */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* === Positioning === */
.float-left  { float: left !important; }
.float-right { float: right !important; }
.clearfix::after { content: \"\"; display: block; clear: both; }

.d-block   { display: block !important; }
.d-inline  { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex; }

/* === Width Helpers === */
.w-100 { width: 100% !important; }
.w-50  { width: 50% !important; }
.w-25  { width: 25% !important; }
.w-20  { width: 20% !important; }
.w-15  { width: 15% !important; }
.w-10  { width: 10% !important; }
.w-10  { width: 10% !important; }
.fit-content  { width: fit-content !important; }