/* ============================================
   Override Bootstrap color utilities with dynamic theme variables
   ============================================ */

/* Text colors */
.text-primary {
    color: var(--primary-color) !important;
}
.text-primary-light {
    color: var(--primary-light) !important;
}
.text-secondary {
    color: var(--secondary-color) !important;
}
.text-secondary-light {
    color: var(--secondary-light) !important;
}

/* Background colors */
.bg-primary {
    background-color: var(--primary-color) !important;
}
.bg-primary-light {
    background-color: var(--primary-light) !important;
}
.bg-secondary {
    background-color: var(--secondary-color) !important;
}
.bg-secondary-light {
    background-color: var(--secondary-light) !important;
}

/* Border colors */
.border-primary {
    border-color: var(--primary-color) !important;
}
.border-primary-light {
    border-color: var(--primary-light) !important;
}
.border-secondary {
    border-color: var(--secondary-color) !important;
}

/* Buttons (already in theme-dynamic.php, but ensure consistency) */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn-secondary:hover {
    background-color: var(--secondary-dark);
    border-color: var(--secondary-dark);
}

/* Badges */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
}
.badge.bg-secondary {
    background-color: var(--secondary-color) !important;
}
.badge.text-primary {
    color: var(--primary-color) !important;
}