/* ============================================================
   DESIGN SYSTEM — UTILITIES
   ============================================================ */

/* =========================
   DISPLAY / LAYOUT
========================= */
.ds-flex { display: flex; }
.ds-inline-flex { display: inline-flex; }
.ds-block { display: block; }
.ds-hidden { display: none !important; }

.ds-flex-col { flex-direction: column; }
.ds-flex-1 { flex: 1; }

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

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

/* =========================
   GAP SYSTEM
========================= */
.ds-gap-1 { gap: var(--space-1); }
.ds-gap-2 { gap: var(--space-2); }
.ds-gap-3 { gap: var(--space-3); }
.ds-gap-4 { gap: var(--space-4); }
.ds-gap-5 { gap: var(--space-5); }
.ds-gap-6 { gap: var(--space-6); }

/* =========================
   SPACING
========================= */
.ds-mt-2 { margin-top: var(--space-2); }
.ds-mt-4 { margin-top: var(--space-4); }
.ds-mt-6 { margin-top: var(--space-6); }

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

.ds-pt-2 { padding-top: var(--space-2); }
.ds-pt-4 { padding-top: var(--space-4); }

.ds-pb-2 { padding-bottom: var(--space-2); }
.ds-pb-4 { padding-bottom: var(--space-4); }

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

/* =========================
   TEXT
========================= */
.ds-text-center { text-align: center !important; }
.ds-text-right  { text-align: right !important; }

.ds-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-heading);
}

.ds-subtitle {
    font-size: 15px;
    font-weight: 600;
}

.ds-sub {
    font-size: 13px;
    color: var(--color-muted);
}

.ds-hint {
    font-size: 12px;
    color: var(--color-faint);
}

.ds-text {
    font-size: 14px;
    color: var(--color-heading);
}

.ds-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* =========================
   GRID
========================= */
.ds-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

@media (max-width: 640px) {
    .ds-grid-2 {
        grid-template-columns: 1fr;
    }
}

.ds-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

/* Wide filter/form grids (6 or 8 columns), collapsing to 1 column on mobile */
.ds-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
}
.ds-grid-8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-3);
}
@media (max-width: 900px) {
    .ds-grid-6, .ds-grid-8 { grid-template-columns: 1fr; }
}
.ds-col-span-2 { grid-column: span 2; }
@media (max-width: 900px) {
    .ds-col-span-2 { grid-column: span 1; }
}
.ds-items-end { align-items: end; }

@media (max-width: 768px) {
    .ds-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* =========================
   STACK (VERTICAL LAYOUT)
========================= */
.ds-stack-sm {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ds-stack-md {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ds-stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* =========================
   BORDERS / DIVIDERS
========================= */
.ds-border-bottom {
    border-bottom: 1px solid var(--border-color);
}

.ds-border-top {
    border-top: 1px solid var(--border-color);
}

.ds-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--space-3) 0;
}

/* =========================
   LINKS
========================= */
.ds-link {
    color: var(--ds-indigo);
    text-decoration: none;
}

.ds-link:hover {
    text-decoration: underline;
}

/* =========================
   AVATAR
========================= */
.ds-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ds-indigo-light);
    color: var(--ds-indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
    .ds-hide-md { display: none !important; }
}

@media (max-width: 560px) {
    .ds-hide-sm { display: none !important; }
}

/* =========================
   PLACEHOLDER
========================= */
::placeholder {
    color: var(--color-faint);
    opacity: 0.8;
}