That’s a solid approach to gradual migration. Keeping breakpoints as Sass variables while exposing colors and spacing through CSS custom properties gives you the best of both worlds, especially when runtime theming is involved.

For nesting, I’d generally aim to keep it around two or three levels deep. Beyond that, selectors can become harder to follow and tightly coupled to the HTML structure. There are exceptions, of course, but if nesting keeps growing, it’s usually a good signal to simplify the selector or split the styles into smaller components.

Do you find that a strict nesting limit works well across a team, or is a shared guideline with code reviews enough?