:root {
    --blue-dark: #3a6ea5;
    --blue-medium: #5fa8d3;
    --green-light: #80cfa9;
    --gray-light: #f5f7fa;
    --gray-dark: #2b2d42;
    --gray-secondary: #757575;
}

/* Colores de fondo */
.bg-blue-dark {
    background-color: var(--blue-dark);
}
.bg-blue-medium {
    background-color: var(--blue-medium);
}
.bg-green-light {
    background-color: var(--green-light);
}
.bg-gray-light {
    background-color: var(--gray-light);
}
.bg-gray-dark {
    background-color: var(--gray-dark);
}
.bg-gray-secondary {
    background-color: var(--gray-secondary);
}

/* Colores de texto */
.text-blue-dark {
    color: var(--blue-dark);
}
.text-blue-medium {
    color: var(--blue-medium);
}
.text-green-light {
    color: var(--green-light);
}
.text-gray-light {
    color: var(--gray-light);
}
.text-gray-dark {
    color: var(--gray-dark);
}
.text-gray-secondary {
    color: var(--gray-secondary);
}

/* Botones personalizados */

/* Botón azul oscuro */
.btn-blue-dark {
    background-color: var(--blue-dark);
    color: var(--gray-light);
}
.btn-blue-dark i {
    color: var(--gray-light);
}

.btn-blue-dark:hover {
    background-color: #345b86;
    color: var(--gray-light);
}

/* Botón azul medio */
.btn-blue-medium {
    background-color: var(--blue-medium);
    color: var(--gray-light);
}

.btn-blue-medium i {
    color: var(--gray-light);
}

.btn-blue-medium:hover {
    background-color: #4a8bbd;
    color: var(--gray-light);
}

/* Botón gris secundario */
.btn-gray-secondary {
    background-color: var(--gray-secondary);
    color: var(--gray-light);
}

.btn-gray-secondary i {
    color: var(--gray-light);
}

.btn-gray-secondary:hover {
    background-color: #5a5a5a;
    color: var(--gray-light);
}

/* Botón gris claro */
.btn-gray-light {
    background-color: var(--gray-light);
    color: var(--gray-dark);
}

.btn-gray-light i {
    color: var(--gray-dark);
}

.btn-gray-light:hover {
    background-color: #e0e3ea;
    color: var(--gray-dark);
}