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

/* Margin */
.m-0 { margin: 0; }
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 16px; }
.m-4 { margin: 32px; }

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

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-90 { margin-top: 90px; }
.mt-100 { margin-top: 100px; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-90 { margin-bottom: 90px; }
.mb-100 { margin-bottom: 100px; }

/* Padding Top */
.pt-0 { padding-top: 0; }
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-40 { padding-top: 40px; }
.pt-50 { padding-top: 50px; }
.pt-60 { padding-top: 60px; }
.pt-70 { padding-top: 70px; }
.pt-80 { padding-top: 80px; }
.pt-90 { padding-top: 90px; }
.pt-100 { padding-top: 100px; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0; }
.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-60 { padding-bottom: 60px; }
.pb-70 { padding-bottom: 70px; }
.pb-80 { padding-bottom: 80px; }
.pb-90 { padding-bottom: 90px; }
.pb-100 { padding-bottom: 100px; }

/* Vertical Padding */
.py-40 { padding-top: 40px; padding-bottom: 40px; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.py-80 { padding-top: 80px; padding-bottom: 80px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }

/* Horizontal Margin / Padding */
.mx-10   { margin-left: 10px; margin-right: 10px; }
.px-10   { padding-left: 10px; padding-right: 10px; }


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


/* ===============================
            Display
   =============================== */
.d-none         { display: none; }
.d-block        { display: block; }
.d-inline       { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex         { display: flex; }
.d-grid         { display: grid; }


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


/* ===============================
            Gap
   =============================== */
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }
.gap-40 { gap: 40px; }


/* ===============================
            Width & Height
   =============================== */
.w-100    { width: 100%; }
.h-100    { height: 100%; }
.w-half   { width: 50%; }
.w-auto   { width: auto; }
.h-full   { height: 100%; }
.w-screen { width: 100vw; }
.h-screen { height: 100vh; }

.w-50     { width: 50%; }
.w-75     { width: 75%; }
.w-30     { width: 30%; }


/* ===============================
            Text
   =============================== */
.text-sm     { font-size: 0.875rem; }  /* 14px */
.text-base   { font-size: 1rem; }      /* 16px */
.text-lg     { font-size: 1.25rem; }   /* 20px */
.text-xl     { font-size: 1.5rem; }    /* 24px */
.text-2xl    { font-size: 2rem; }      /* 32px */


/* Text Transform */
.text-uppercase   { text-transform: uppercase; }
.text-lowercase   { text-transform: lowercase; }
.text-capitalize  { text-transform: capitalize; }


/* ===============================
            Font Weight
   =============================== */
.font-light     { font-weight: var(--a-font-weight-light); }       /* 300 */
.font-regular   { font-weight: var(--a-font-weight-regular); }     /* 400 */
.font-medium    { font-weight: var(--a-font-weight-medium); }      /* 500 */
.font-semibold  { font-weight: var(--a-font-weight-semibold); }    /* 600 */
.font-bold      { font-weight: var(--a-font-weight-bold); }        /* 700 */
.font-extrabold { font-weight: var(--a-font-weight-extrabold); }   /* 800 */


/* ===============================
            Border & Radius
   =============================== */
.b-0            { border: none; }
.rounded        { border-radius: var(--a-radius-sm); }
.rounded-full   { border-radius: 9999px; } /* Tam dairəvi button və ya avatar üçün */


/* ===============================
            Shadow
   =============================== */
.shadow-sm      { box-shadow: var(--a-shadow-sm); }
.shadow-md      { box-shadow: var(--a-shadow-md); }


/* ===============================
            Positioning
   =============================== */
.position-relative { position: var(--a-position-relative); }
.position-absolute { position: var(--a-position-absolute); }
.position-fixed   { position: var(--a-position-fixed); }
.position-sticky  { position: var(--a-position-sticky); }
.position-static  { position: var(--a-position-static); }


/* ===============================
             Overflow
   =============================== */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }


/* ===============================
            Font Size
   =============================== */
.fs-sm   { font-size: var(--a-fs-sm) }      /* 14px */
.fs-base { font-size: var(--a-fs-base) }    /* 16px */
.fs-lg   { font-size: var(--a-fs-lg) }      /* 24px */
.fs-xl   { font-size: var(--a-fs-xl) }      /* 32px */
.fs-2xl  { font-size: var(--a-fs-2xl) }     /* 40px */
.fs-xxl  { font-size: var(--a-fs-xxl) }     /* 48px */



/* ===============================
            Miscellaneous
   =============================== */
.is-hidden {
    display: none;
}