/* ===== Spacing Utilities ===== */

/* Margin */
.margin-0 { margin: 0; }
.margin-1 { margin: var(--spacing-1); }
.margin-2 { margin: var(--spacing-2); }
.margin-3 { margin: var(--spacing-3); }
.margin-top-1 { margin-top: var(--spacing-1); }
.margin-top-2 { margin-top: var(--spacing-2); }
.margin-top-3 { margin-top: var(--spacing-3); }
.margin-bottom-1 { margin-bottom: var(--spacing-1); }
.margin-bottom-2 { margin-bottom: var(--spacing-2); }
.margin-bottom-3 { margin-bottom: var(--spacing-3); }
.margin-left-1 { margin-left: var(--spacing-1); }
.margin-left-2 { margin-left: var(--spacing-2); }
.margin-left-3 { margin-left: var(--spacing-3); }
.margin-right-1 { margin-right: var(--spacing-1); }
.margin-right-2 { margin-right: var(--spacing-2); }
.margin-right-3 { margin-right: var(--spacing-3); }

/* Padding */
.padding-0 { padding: 0; }
.padding-1 { padding: var(--spacing-1); }
.padding-2 { padding: var(--spacing-2); }
.padding-3 { padding: var(--spacing-3); }
.padding-top-1 { padding-top: var(--spacing-1); }
.padding-top-2 { padding-top: var(--spacing-2); }
.padding-top-3 { padding-top: var(--spacing-3); }
.padding-bottom-1 { padding-bottom: var(--spacing-1); }
.padding-bottom-2 { padding-bottom: var(--spacing-2); }
.padding-bottom-3 { padding-bottom: var(--spacing-3); }
.padding-left-1 { padding-left: var(--spacing-1); }
.padding-left-2 { padding-left: var(--spacing-2); }
.padding-left-3 { padding-left: var(--spacing-3); }
.padding-right-1 { padding-right: var(--spacing-1); }
.padding-right-2 { padding-right: var(--spacing-2); }
.padding-right-3 { padding-right: var(--spacing-3); }

/* Gap */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }


/* ===== Text Utilities ===== */

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

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.text-bold { font-weight: 700; }
.text-normal { font-weight: 400; }
.text-italic { font-style: italic; }


/* ===== Display Utilities ===== */

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


/* ===== Flex Utilities ===== */

/* Content */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }

/* Flex */
.flex-auto { flex: auto; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }


/* ===== Width & Height Utilities ===== */

.width-100 { width: 100%; }
.width-auto { width: auto; }
.height-100 { height: 100%; }
.height-auto { height: auto; }


/* ===== Color Utilities ===== */

.primary-color { color: var(--primary-color); }
.colsecondary-colorary { color: var(--secondary-color); }
.text-color { color: var(--text-color); }
.text-light-color { color: var(--text-light-color); }
.text-lighter-color { color: var(--text-lighter-color); }

.background-color { background-color: var(--background-color); }
.background-gradient { background: var(--background-gradient);
width: 100%;
height: 100%; }


/* ===== Border Utilities ===== */
.border { border: 1px solid var(--text-color); }
.border-top { border-top: 1px solid var(--text-color); }
.border-bottom { border-bottom: 1px solid var(--text-color); }
.border-left { border-left: 1px solid var(--text-color); }
.border-right { border-right: 1px solid var(--text-color); }

.underline {
border-bottom: 1px solid var(--text-color);
padding-bottom: var(--spacing-2);
margin-bottom: var(--spacing-2);
}