/* ===== 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);
}

.bottom {
    margin-top: auto !important;
}

/* 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 ===== */

/* Colors */
.text-primary-color {
    color: var(--primary-color);
}

.text-secondary-color {
    color: var(--secondary-color);
}

.text-primary-color-light {
    color: var(--primary-color-light);
}

.text-secondary-color-light {
    color: var(--secondary-color-light);
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-light {
    background: linear-gradient(135deg, var(--primary-color-light) 0%, var(--secondary-color-light) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Text */
.text-color {
    color: var(--text-color);
}

.text-color-light {
    color: var(--text-color-light);
}

.text-color-lighter {
    color: var(--text-color-lighter);
}

.background-color {
    background-color: var(--background-color);
}

.background-gradient {
    background: var(--background-gradient);
}


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

.border-top {
    border-top: 1px solid var(--text-color-lighter);
}

.border-bottom {
    border-bottom: 1px solid var(--text-color-lighter);
}

.border-left {
    border-left: 1px solid var(--text-color-lighter);
}

.border-right {
    border-right: 1px solid var(--text-color-lighter);
}