/* ========================================
   COMMVIO — Utility Classes
   Quick helpers and overrides
   ======================================== */

/* ── Text Alignment ── */
.text-center {
    text-align: center;
}

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

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

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

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

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

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

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

/* ── Font Weight ── */
.font-regular {
    font-weight: var(--weight-regular);
}

.font-medium {
    font-weight: var(--weight-medium);
}

.font-semibold {
    font-weight: var(--weight-semibold);
}

.font-bold {
    font-weight: var(--weight-bold);
}

/* ── Spacing ── */
.mt-0 {
    margin-top: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* ── Display ── */
.block {
    display: block;
}

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

.hidden {
    display: none;
}

/* ── Width ── */
.w-full {
    width: 100%;
}

.max-w-narrow {
    max-width: var(--container-narrow);
}

/* ── Screen Reader Only ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Relative / Overflow ── */
.relative {
    position: relative;
}

.overflow-hidden {
    overflow: hidden;
}

/* ── Separator line ── */
.separator {
    width: 48px;
    height: 2px;
    background-color: var(--color-accent);
    border-radius: 1px;
}

.separator--center {
    margin-left: auto;
    margin-right: auto;
}