/* =========================
   NEUTRAL COLOR UTILITIES
========================= */

/* ===== TEXT ===== */
.text-neutral-900 { color: var(--ms-color-neutral-900) !important; }
.text-neutral-800 { color: var(--ms-color-neutral-800) !important; }
.text-neutral-700 { color: var(--ms-color-neutral-700) !important; }
.text-neutral-600 { color: var(--ms-color-neutral-600) !important; }
.text-neutral-500 { color: var(--ms-color-neutral-500) !important; }
.text-neutral-400 { color: var(--ms-color-neutral-400) !important; }
.text-neutral-300 { color: var(--ms-color-neutral-300) !important; }
.text-neutral-200 { color: var(--ms-color-neutral-200) !important; }
.text-neutral-100 { color: var(--ms-color-neutral-100) !important; }
.text-neutral-050 { color: var(--ms-color-neutral-050) !important; }

/* =========================
   SEMANTIC TEXT
========================= */
.text-default { color: var(--ms-color-text-primary) !important; }
/*.text-secondary { color: var(--ms-color-text-secondary) !important; }*/
.text-muted { color: var(--ms-color-text-muted) !important; }
.text-disabled { color: var(--ms-color-text-disabled) !important; }
.text-inverse { color: var(--ms-color-text-inverse) !important; }

/* =========================
   SEMANTIC BACKGROUND
========================= */
.bg-base { background-color: var(--ms-color-bg-base) !important; }
.bg-canvas { background-color: var(--ms-color-bg-canvas) !important; }
.bg-subtle { background-color: var(--ms-color-bg-subtle) !important; }
.bg-hover { background-color: var(--ms-color-bg-hover) !important; }
.bg-active { background-color: var(--ms-color-bg-active) !important; }
.bg-disabled { background-color: var(--ms-color-bg-disabled) !important; }

/* ===== BACKGROUND ===== */
.bg-neutral-900 { background-color: var(--ms-color-neutral-900) !important; }
.bg-neutral-800 { background-color: var(--ms-color-neutral-800) !important; }
.bg-neutral-700 { background-color: var(--ms-color-neutral-700) !important; }
.bg-neutral-600 { background-color: var(--ms-color-neutral-600) !important; }
.bg-neutral-500 { background-color: var(--ms-color-neutral-500) !important; }
.bg-neutral-400 { background-color: var(--ms-color-neutral-400) !important; }
.bg-neutral-300 { background-color: var(--ms-color-neutral-300) !important; }
.bg-neutral-200 { background-color: var(--ms-color-neutral-200) !important; }
.bg-neutral-100 { background-color: var(--ms-color-neutral-100) !important; }
.bg-neutral-050 { background-color: var(--ms-color-neutral-050) !important; }

/* ===== PRIMARY ===== */
.text-primary { color: var(--ms-color-primary) !important; }
.text-primary-dark { color: var(--ms-color-primary-dark) !important; }
.text-primary-subtle { color: var(--ms-color-primary-subtle) !important; }
.text-primary-light { color: var(--ms-color-primary-light) !important; }
.text-primary-lighter { color: var(--ms-color-primary-lighter) !important; }

.bg-primary { background-color: var(--ms-color-primary) !important; }
.bg-primary-dark { background-color: var(--ms-color-primary-dark) !important; }
.bg-primary-subtle { background-color: var(--ms-color-primary-subtle) !important; }
.bg-primary-light { background-color: var(--ms-color-primary-light) !important; }
.bg-primary-lighter { background-color: var(--ms-color-primary-lighter) !important; }


/* ===== SECONDARY ===== */
.text-secondary { color: var(--ms-color-secondary) !important; }
.text-secondary-dark { color: var(--ms-color-secondary-dark) !important; }
.text-secondary-subtle { color: var(--ms-color-secondary-subtle) !important; }
.text-secondary-light { color: var(--ms-color-secondary-light) !important; }
.text-secondary-lighter { color: var(--ms-color-secondary-lighter) !important; }

.bg-secondary { background-color: var(--ms-color-secondary) !important; }
.bg-secondary-dark { background-color: var(--ms-color-secondary-dark) !important; }
.bg-secondary-subtle { background-color: var(--ms-color-secondary-subtle) !important; }
.bg-secondary-light { background-color: var(--ms-color-secondary-light) !important; }
.bg-secondary-lighter { background-color: var(--ms-color-secondary-lighter) !important; }


/* ===== SUCCESS ===== */
.text-success { color: var(--ms-color-success) !important; }
.text-success-dark { color: var(--ms-color-success-dark) !important; }
.text-success-subtle { color: var(--ms-color-success-subtle) !important; }
.text-success-light { color: var(--ms-color-success-light) !important; }
.text-success-lighter { color: var(--ms-color-success-lighter) !important; }

.bg-success { background-color: var(--ms-color-success) !important; }
.bg-success-dark { background-color: var(--ms-color-success-dark) !important; }
.bg-success-subtle { background-color: var(--ms-color-success-subtle) !important; }
.bg-success-light { background-color: var(--ms-color-success-light) !important; }
.bg-success-lighter { background-color: var(--ms-color-success-lighter) !important; }


/* ===== WARNING ===== */
.text-warning { color: var(--ms-color-warning) !important; }
.text-warning-dark { color: var(--ms-color-warning-dark) !important; }
.text-warning-subtle { color: var(--ms-color-warning-subtle) !important; }
.text-warning-light { color: var(--ms-color-warning-light) !important; }
.text-warning-lighter { color: var(--ms-color-warning-lighter) !important; }

.bg-warning { background-color: var(--ms-color-warning) !important; }
.bg-warning-dark { background-color: var(--ms-color-warning-dark) !important; }
.bg-warning-subtle { background-color: var(--ms-color-warning-subtle) !important; }
.bg-warning-light { background-color: var(--ms-color-warning-light) !important; }
.bg-warning-lighter { background-color: var(--ms-color-warning-lighter) !important; }


/* ===== DANGER ===== */
.text-danger { color: var(--ms-color-danger) !important; }
.text-danger-dark { color: var(--ms-color-danger-dark) !important; }
.text-danger-subtle { color: var(--ms-color-danger-subtle) !important; }
.text-danger-light { color: var(--ms-color-danger-light) !important; }
.text-danger-lighter { color: var(--ms-color-danger-lighter) !important; }

.bg-danger { background-color: var(--ms-color-danger) !important; }
.bg-danger-dark { background-color: var(--ms-color-danger-dark) !important; }
.bg-danger-subtle { background-color: var(--ms-color-danger-subtle) !important; }
.bg-danger-light { background-color: var(--ms-color-danger-light) !important; }
.bg-danger-lighter { background-color: var(--ms-color-danger-lighter) !important; }


/* ===== INFO ===== */
.text-info { color: var(--ms-color-info) !important; }
.text-info-dark { color: var(--ms-color-info-dark) !important; }
.text-info-subtle { color: var(--ms-color-info-subtle) !important; }
.text-info-light { color: var(--ms-color-info-light) !important; }
.text-info-lighter { color: var(--ms-color-info-lighter) !important; }

.bg-info { background-color: var(--ms-color-info) !important; }
.bg-info-dark { background-color: var(--ms-color-info-dark) !important; }
.bg-info-subtle { background-color: var(--ms-color-info-subtle) !important; }
.bg-info-light { background-color: var(--ms-color-info-light) !important; }
.bg-info-lighter { background-color: var(--ms-color-info-lighter) !important; }


/* =========================
   TEXT + BACKGROUND COMBO (FLUENT STYLE)
========================= */

/* PRIMARY */
.text-bg-primary {
    background-color: var(--ms-color-primary) !important;
    color: var(--ms-color-text-inverse) !important;
}

.text-bg-primary-dark {
    background-color: var(--ms-color-primary-dark) !important;
    color: var(--ms-color-text-inverse) !important;
}

.text-bg-primary-subtle {
    background-color: var(--ms-color-primary-subtle) !important;
    color: var(--ms-color-primary) !important;
}

/* SECONDARY */
.text-bg-secondary {
    background-color: var(--ms-color-secondary) !important;
    color: var(--ms-color-text-inverse) !important;
}

.text-bg-secondary-subtle {
    background-color: var(--ms-color-secondary-subtle) !important;
    color: var(--ms-color-secondary) !important;
}

/* SUCCESS */
.text-bg-success {
    background-color: var(--ms-color-success) !important;
    color: var(--ms-color-text-inverse) !important;
}

.text-bg-success-subtle {
    background-color: var(--ms-color-success-subtle) !important;
    color: var(--ms-color-success) !important;
}

/* WARNING */
.text-bg-warning {
    background-color: var(--ms-color-warning) !important;
    color: var(--ms-color-neutral-900) !important; /* important: warning needs dark text */
}

.text-bg-warning-subtle {
    background-color: var(--ms-color-warning-subtle) !important;
    color: var(--ms-color-warning-dark) !important;
}

/* DANGER */
.text-bg-danger {
    background-color: var(--ms-color-danger) !important;
    color: var(--ms-color-text-inverse) !important;
}

.text-bg-danger-subtle {
    background-color: var(--ms-color-danger-subtle) !important;
    color: var(--ms-color-danger) !important;
}

/* INFO */
.text-bg-info {
    background-color: var(--ms-color-info) !important;
    color: var(--ms-color-text-inverse) !important;
}

.text-bg-info-subtle {
    background-color: var(--ms-color-info-subtle) !important;
    color: var(--ms-color-info) !important;
}

/* NEUTRAL */
.text-bg-neutral {
    background-color: var(--ms-color-neutral-800) !important;
    color: var(--ms-color-text-inverse) !important;
}

.text-bg-neutral-subtle {
    background-color: var(--ms-color-neutral-100) !important;
    color: var(--ms-color-text-primary) !important;
}