/* Atomic CSS - Number to Pixel Mapping */

/* Margin Utilities */
.m-0 { margin: 0px; }
.m-1 { margin: 4px; } /* 1*4px */
.m-2 { margin: 8px; } /* 2*4px */
.m-3 { margin: 12px; } /* 3*4px */
.m-4 { margin: 16px; } /* 4*4px */
.m-5 { margin: 20px; } /* 5*4px */
.m-6 { margin: 24px; } /* 6*4px */
.m-8 { margin: 32px; } /* 8*4px */
.m-10 { margin: 40px; } /* 10*4px */

.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.ml-3 { margin-left: 12px; }
.ml-4 { margin-left: 16px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }

.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.mr-3 { margin-right: 12px; }
.mr-4 { margin-right: 16px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }

/* Padding Utilities */
.p-0 { padding: 0px; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }

.pl-1 { padding-left: 4px; }
.pl-2 { padding-left: 8px; }
.pl-3 { padding-left: 12px; }
.pl-4 { padding-left: 16px; }

.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; }

.pr-1 { padding-right: 4px; }
.pr-2 { padding-right: 8px; }
.pr-3 { padding-right: 12px; }
.pr-4 { padding-right: 16px; }

.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; }

/* Flexbox Utilities for Centering */
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.justify-center { justify-content: center; } /* 水平居中 */
.items-center { align-items: center; } /* 垂直居中 */
.flex-center { display: flex; justify-content: center; align-items: center; } /* 完全居中 */

/* Font-size Utilities */
.text-xs { font-size: 12px; } /* Extra small */
.text-sm { font-size: 14px; } /* Small */
.text-base { font-size: 16px; } /* Base */
.text-lg { font-size: 18px; } /* Large */
.text-xl { font-size: 20px; } /* Extra large */
.text-2xl { font-size: 24px; } /* 2x large */
.text-3xl { font-size: 30px; } /* 3x large */
.text-4xl { font-size: 36px; } /* 4x large */