Build a small design system for a developer dashboard. The dashboard should include a responsive application shell, navigation, cards, buttons, badges, forms, and a theme switcher.

The project should demonstrate a complete Sass workflow rather than a collection of unrelated examples.

Functional requirements

1. Centralize primitive and semantic design tokens.
2. Organize SCSS using modules and partials.
3. Implement reusable container and focus-ring mixins.
4. Generate a controlled set of button and badge variants from maps.
5. Support responsive layouts using mobile-first media queries.
6. Use CSS custom properties for runtime light and dark themes.
7. Use CSS Modules when integrating components into React.
8. Compile production CSS and inspect the generated output.
9. Verify keyboard focus, readable contrast, and narrow-screen behavior.

Suggested directory structure

src/scss/
  abstracts/
    _tokens.scss
    _functions.scss
    _mixins.scss
    _index.scss
  base/
    _reset.scss
    _typography.scss
  components/
    _buttons.scss
    _cards.scss
    _badges.scss
  layout/
    _dashboard.scss
  themes/
    _themes.scss
  main.scss

The implementation should keep tokens, reusable abstractions, base styles, layout rules, and components separate. Avoid introducing a dependency merely to demonstrate a feature that Sass already supports.