/* ==========================================================================
   DREAMERS DESIGN SYSTEM
   Version: 1.0
   File: utilities.css

   Classi di utilità.
   Ogni utility deve avere una sola responsabilità.

   ========================================================================== */


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

.d-block {
    display: block;
}

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

.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

.d-none {
    display: none;
}


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

.flex-row {
    flex-direction: row;
}

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

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

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

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


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

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

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

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


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

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

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

.text-gold {
    color: var(--color-brand-gold);
}

.text-blue {
    color: var(--color-brand-blue);
}


/* ==========================================================================
   BACKGROUNDS
   ========================================================================== */

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

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

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


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

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}


/* ==========================================================================
   MARGIN AUTO
   ========================================================================== */

.mx-auto {
    margin-inline: auto;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}


/* ==========================================================================
   SPACING
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-10 { margin-top: var(--space-10); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }

.pt-0 { padding-top: 0; }
.pt-2 { padding-top: var(--space-2); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pt-10 { padding-top: var(--space-10); }
.pt-16 { padding-top: var(--space-16); }

.pb-0 { padding-bottom: 0; }
.pb-2 { padding-bottom: var(--space-2); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-10 { padding-bottom: var(--space-10); }
.pb-16 { padding-bottom: var(--space-16); }


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

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

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

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

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


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

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

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

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


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

.overflow-hidden {
    overflow: hidden;
}


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

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}