/**
 * ==================================================
 * UTILITIES
 * Francesco Cugini Theme
 * Design System v2.0
 * ==================================================
 */


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

.d-none{display:none!important;}

.d-block{display:block;}

.d-inline{display:inline;}

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

.d-flex{display:flex;}

.d-grid{display:grid;}


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

.relative{position:relative;}

.absolute{position:absolute;}

.fixed{position:fixed;}

.sticky{position:sticky;}


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

.w-25{width:25%;}

.w-50{width:50%;}

.w-75{width:75%;}

.w-100{width:100%;}

.max-content{width:max-content;}


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

.h-100{height:100%;}

.min-vh-100{min-height:100vh;}


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

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

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

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

.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;}

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


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

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

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

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


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

.uppercase{text-transform:uppercase;}

.lowercase{text-transform:lowercase;}

.capitalize{text-transform:capitalize;}


/*==================================================
FONT STYLE
==================================================*/

.light{

    font-weight:var(--font-weight-light);

}

.normal{

    font-weight:var(--font-weight-normal);

}

.medium{

    font-weight:var(--font-weight-medium);

}

.semibold{

    font-weight:var(--font-weight-semibold);

}

.bold{

    font-weight:var(--font-weight-bold);

}

.italic{

    font-style:italic;

}


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

.text-primary{

    color:var(--color-text);

}

.text-secondary{

    color:var(--color-text-light);

}

.text-accent{

    color:var(--color-accent);

}

.text-gold{

    color:var(--color-gold);

}


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

.bg-white{

    background:var(--color-surface);

}

.bg-parchment{

    background:var(--color-background);

}

.bg-alt{

    background:var(--color-surface-alt);

}

.bg-accent{

    background:var(--color-accent);

}


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

.rounded-xs{

    border-radius:var(--radius-xs);

}

.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-pill{

    border-radius:var(--radius-round);

}


/*==================================================
SHADOWS
==================================================*/

.shadow-xs{

    box-shadow:var(--shadow-xs);

}

.shadow-sm{

    box-shadow:var(--shadow-sm);

}

.shadow{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}

.shadow-xl{

    box-shadow:var(--shadow-xl);

}


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

.overflow-hidden{

    overflow:hidden;

}

.overflow-auto{

    overflow:auto;

}


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

.mt-0{margin-top:0;}

.mt-xs{margin-top:var(--space-xs);}

.mt-sm{margin-top:var(--space-sm);}

.mt-md{margin-top:var(--space-md);}

.mt-lg{margin-top:var(--space-lg);}

.mt-xl{margin-top:var(--space-xl);}

.mt-2xl{margin-top:var(--space-2xl);}

.mt-3xl{margin-top:var(--space-3xl);}

.mt-4xl{margin-top:var(--space-4xl);}


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

.mb-0{margin-bottom:0;}

.mb-xs{margin-bottom:var(--space-xs);}

.mb-sm{margin-bottom:var(--space-sm);}

.mb-md{margin-bottom:var(--space-md);}

.mb-lg{margin-bottom:var(--space-lg);}

.mb-xl{margin-bottom:var(--space-xl);}

.mb-2xl{margin-bottom:var(--space-2xl);}

.mb-3xl{margin-bottom:var(--space-3xl);}

.mb-4xl{margin-bottom:var(--space-4xl);}


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

.p-xs{padding:var(--space-xs);}

.p-sm{padding:var(--space-sm);}

.p-md{padding:var(--space-md);}

.p-lg{padding:var(--space-lg);}

.p-xl{padding:var(--space-xl);}

.p-2xl{padding:var(--space-2xl);}


/*==================================================
VISIBILITY
==================================================*/

.hidden{

    display:none!important;

}

.invisible{

    visibility:hidden;

}

.visible{

    visibility:visible;

}


/*==================================================
ACCESSIBILITY
==================================================*/

.visually-hidden{

    position:absolute!important;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}