/* ==========================================================================
   DDS Utility Classes — token-aware helpers
   ========================================================================== */

/* --- Text colors --- */
.dds-text-primary { color: var(--dds-primary); }
.dds-text-secondary { color: var(--dds-secondary); }
.dds-text-error { color: var(--dds-error); }
.dds-text-success { color: var(--dds-success); }
.dds-text-warning { color: var(--dds-warning); }
.dds-text-muted { color: var(--dds-on-surface-variant); }
.dds-text-on-surface { color: var(--dds-on-surface); }

/* --- Background colors --- */
.dds-bg-surface { background-color: var(--dds-surface); }
.dds-bg-surface-low { background-color: var(--dds-surface-container-low); }
.dds-bg-surface-high { background-color: var(--dds-surface-container-high); }

/* --- Typography --- */
.dds-font-xs { font-size: var(--dds-font-size-xs); }
.dds-font-sm { font-size: var(--dds-font-size-sm); }
.dds-font-base { font-size: var(--dds-font-size-base); }
.dds-font-md { font-size: var(--dds-font-size-md); }
.dds-font-lg { font-size: var(--dds-font-size-lg); }
.dds-font-xl { font-size: var(--dds-font-size-xl); }
.dds-font-2xl { font-size: var(--dds-font-size-2xl); }
.dds-font-3xl { font-size: var(--dds-font-size-3xl); }

.dds-font-normal { font-weight: var(--dds-font-weight-normal); }
.dds-font-medium { font-weight: var(--dds-font-weight-medium); }
.dds-font-semibold { font-weight: var(--dds-font-weight-semibold); }
.dds-font-bold { font-weight: var(--dds-font-weight-bold); }

.dds-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--dds-tracking-widest);
}

.dds-tracking-wide { letter-spacing: var(--dds-tracking-wide); }
.dds-tracking-widest { letter-spacing: var(--dds-tracking-widest); }

/* --- Spacing --- */
.dds-mt-1 { margin-top: var(--dds-space-1); }
.dds-mt-2 { margin-top: var(--dds-space-2); }
.dds-mt-3 { margin-top: var(--dds-space-3); }
.dds-mt-4 { margin-top: var(--dds-space-4); }
.dds-mt-6 { margin-top: var(--dds-space-6); }
.dds-mt-8 { margin-top: var(--dds-space-8); }

.dds-mb-1 { margin-bottom: var(--dds-space-1); }
.dds-mb-2 { margin-bottom: var(--dds-space-2); }
.dds-mb-3 { margin-bottom: var(--dds-space-3); }
.dds-mb-4 { margin-bottom: var(--dds-space-4); }
.dds-mb-6 { margin-bottom: var(--dds-space-6); }
.dds-mb-8 { margin-bottom: var(--dds-space-8); }

.dds-p-2 { padding: var(--dds-space-2); }
.dds-p-3 { padding: var(--dds-space-3); }
.dds-p-4 { padding: var(--dds-space-4); }
.dds-p-6 { padding: var(--dds-space-6); }

.dds-px-4 { padding-left: var(--dds-space-4); padding-right: var(--dds-space-4); }
.dds-px-6 { padding-left: var(--dds-space-6); padding-right: var(--dds-space-6); }
.dds-py-2 { padding-top: var(--dds-space-2); padding-bottom: var(--dds-space-2); }
.dds-py-3 { padding-top: var(--dds-space-3); padding-bottom: var(--dds-space-3); }
.dds-py-4 { padding-top: var(--dds-space-4); padding-bottom: var(--dds-space-4); }

.dds-gap-2 { gap: var(--dds-space-2); }
.dds-gap-3 { gap: var(--dds-space-3); }
.dds-gap-4 { gap: var(--dds-space-4); }

/* --- Flex --- */
.dds-flex { display: flex; }
.dds-flex-col { flex-direction: column; }
.dds-flex-wrap { flex-wrap: wrap; }
.dds-items-center { align-items: center; }
.dds-justify-between { justify-content: space-between; }
.dds-justify-center { justify-content: center; }
.dds-flex-1 { flex: 1; }

/* --- Grid --- */
.dds-grid {
    display: grid;
    gap: var(--dds-space-4);
}

.dds-grid--kpi {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.dds-grid--2col { grid-template-columns: 1fr 1fr; }
.dds-grid--7-5 { grid-template-columns: 7fr 5fr; }
.dds-grid--8-4 { grid-template-columns: 2fr 1fr; }

@media (max-width: 992px) {
    .dds-grid--2col,
    .dds-grid--7-5,
    .dds-grid--8-4 { grid-template-columns: 1fr; }
}

/* --- Text alignment --- */
.dds-text-end { text-align: right; }
.dds-text-center { text-align: center; }

/* --- Misc --- */
.dds-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dds-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}