/* ==========================================================
   PRIMEVAULT DESIGN SYSTEM
   Utilities
========================================================== */

/* ==========================================================
   DISPLAY
========================================================== */

.d-none{display:none;}
.d-block{display:block;}
.d-inline{display:inline;}
.d-inline-block{display:inline-block;}

/* ==========================================================
   FLEX
========================================================== */

.flex{
    display:flex;
}

.flex-column{
    display:flex;
    flex-direction:column;
}

.flex-wrap{
    flex-wrap:wrap;
}

.flex-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.justify-between{
    justify-content:space-between;
}

.justify-center{
    justify-content:center;
}

.justify-end{
    justify-content:flex-end;
}

.align-center{
    align-items:center;
}

.align-start{
    align-items:flex-start;
}

.align-end{
    align-items:flex-end;
}

/* ==========================================================
   GRID
========================================================== */

.grid{
    display:grid;
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.gap-1{gap:10px;}
.gap-2{gap:20px;}
.gap-3{gap:30px;}
.gap-4{gap:40px;}

/* ==========================================================
   WIDTH
========================================================== */

.w-100{width:100%;}
.w-75{width:75%;}
.w-50{width:50%;}
.w-25{width:25%;}

/* ==========================================================
   HEIGHT
========================================================== */

.h-100{height:100%;}

/* ==========================================================
   TEXT
========================================================== */

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

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

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

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

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

/* ==========================================================
   MARGIN TOP
========================================================== */

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:60px;}

/* ==========================================================
   MARGIN BOTTOM
========================================================== */

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:60px;}

/* ==========================================================
   PADDING
========================================================== */

.p-1{padding:10px;}
.p-2{padding:20px;}
.p-3{padding:30px;}
.p-4{padding:40px;}

/* ==========================================================
   BORDER RADIUS
========================================================== */

.rounded-sm{
    border-radius:var(--radius-sm);
}

.rounded{
    border-radius:var(--radius-md);
}

.rounded-lg{
    border-radius:var(--radius-lg);
}

.rounded-xl{
    border-radius:var(--radius-xl);
}

.rounded-full{
    border-radius:999px;
}

/* ==========================================================
   SHADOW
========================================================== */

.shadow-sm{
    box-shadow:var(--shadow-sm);
}

.shadow{
    box-shadow:var(--shadow-md);
}

.shadow-lg{
    box-shadow:var(--shadow-lg);
}

/* ==========================================================
   BACKGROUND
========================================================== */

.bg-white{
    background:#fff;
}

.bg-light{
    background:var(--surface);
}

.bg-dark{
    background:var(--surface-dark);
}

/* ==========================================================
   OVERFLOW
========================================================== */

.overflow-hidden{
    overflow:hidden;
}

/* ==========================================================
   POSITION
========================================================== */

.relative{
    position:relative;
}

.absolute{
    position:absolute;
}

.fixed{
    position:fixed;
}

/* ==========================================================
   CURSOR
========================================================== */

.pointer{
    cursor:pointer;
}