Which strategy best balances prefers-reduced-motion with manual application toggles?

Managing Motion Accessibility Preferences

The @media (prefers-reduced-motion: reduce) query allows developers to synchronize CSS animations with operating system accessibility settings. This ensures that users with vestibular disorders receive a consistent experience across all system-integrated applications.

However, a conflict arises when an application provides its own internal accessibility settings for motion control. Relying solely on the OS-level query ignores users who may want reduced motion only within a specific web application, while manual toggles often override the system preference if not architected correctly.

When implementing a hybrid approach in CSS3, how should the specificity be managed to ensure the system preference is respected without blocking a user's explicit manual override within the app UI? Does a CSS variable-based approach provide a more scalable solution than nested media queries?