:root {
    /* Escala tipográfica en rem
       Base del browser = 16px, entonces:
       0.688rem ≈ 11px
       0.813rem ≈ 13px
       0.938rem ≈ 15px
       1.125rem ≈ 18px
       1.625rem ≈ 26px        */

    --mb-text-xs:   0.688rem;  /* 11px — labels, badges */
    --mb-text-sm:   0.813rem;  /* 13px — alertas, toggles */
    --mb-text-base: 0.938rem;  /* 15px — valores de campos */
    --mb-text-lg:   1.125rem;  /* 18px — subtítulos */
    --mb-text-xl:   1.625rem;  /* 26px — título hero */

    --mb-font-normal: 400;
    --mb-font-medium: 600;
    --mb-font-bold:   700;
    --mb-font-black:  800;

    --mb-text-muted:       #6b7280;
    --mb-text-placeholder: #b0b7c3;


    --bs-mybus-dk: #1a2340;
    --bs-mybus-rd: #9D2631;
    --bs-mybus-rd2: #b83040;
    --bs-mybus-gn: #16a34a;

   --bs-mybus-dk-soft: #cdd4e4;
}

/* En móvil reduces el html font-size */
@media (max-width: 768px) {
    html {
        font-size: 14px; /* ahora 1rem = 14px, todo se reduce proporcional */
    }
}