:root {
    /* Colores de Marca ebien */
    --ebien-azul-oscuro: #434f69;
    --ebien-rojo-claro: #C2274B;
    --ebien-fondo-claro: #F2F2F2;
    --ebien-fondo-oscuro: #2a6f56;
    --ebien-fondo-blanco: #FFFFFF;

    /* Variables principales de Bootstrap (Reemplaza los valores existentes) */
    --bs-primary: var(--ebien-azul-oscuro); /* Color principal: #80C6AC */
    --bs-secondary: var(--ebien-rojo-claro); /* Color secundario: #98E7A0 */
    --bs-success: var(--ebien-azul-oscuro); /* Puedes usar el color principal para "éxito" */

    /* Fondo y texto del Cuerpo (Body) */
    --bs-text-primary: var(--ebien-azul-oscuro); /* Texto principal: blanco para contraste con el fondo oscuro */

    --bs-btn-hover-bg: var(--ebien-rojo-claro); /* Fondo del botón al pasar el cursor */
    --bs-primary-active: var(--ebien-rojo-claro); /* Color activo del botón primario */
    --bs-component-active-bg: var(--ebien-azul-oscuro); /* Fondo del botón de paginación activo */

    /* Asegúrate de que el texto se vea bien en el fondo claro (ej. negro o gris oscuro) */
    --bs-body-color: #333;
    --bs-body-bg: var(--ebien-fondo-blanco); /* Fondo del cuerpo: #F2F2F2 */

    /* Opcional: Para usar en degradados o estados de hover */
    --bs-gradient: linear-gradient(180deg, var(--ebien-fondo-oscuro), var(--ebien-azul-oscuro));
}

[data-bs-theme="dark"] {
    /* Colores de Marca XOFI */
    --xofi-card-bg: #0F1014;

    /* Fondo y texto del Cuerpo (Body) */
    --bs-body-bg: var(--xofi-card-bg);
    --bs-text-dark: var(--bs-gray-900);

    --bs-primary-light: #C4CADA;
    --bs-success-light: #b9ebd0;
}