Build a Bootstrap-like Utility System and Accessible Responsive Form (No External CSS)

Context

You are asked to create a minimal, reusable CSS utility system inspired by Bootstrap (grid, spacing, typography, components) without importing any external frameworks. Demonstrate it with an accessible, responsive page that includes a navbar, a layout using a grid, and a form with strong validation and error handling. Include minimal JavaScript to manage interactivity, validation, async submission, and telemetry.

Requirements

1. Utility classes (mobile-first):
   • Container, rows, columns with gutters and support for nesting
   • Breakpoints (e.g., sm, md, lg)
   • Spacing utilities (m- , p- , directional variants)
   • Typography helpers (e.g., text-center, text-muted)
2. Components:
   • Accessible navbar with mobile toggle
   • Buttons
   • Form inputs with labels, helper text, and validation messages
3. Responsive grid:
   • col- , col-sm- , col-md- , col-lg- (common fractions are acceptable)
   • Gutters adjustable via utilities
   • Show nesting
4. Accessibility:
   • Proper semantics (nav, main, form)
   • Label–control association
   • aria-* for errors, aria-live for status
   • Focus management and keyboard operability
5. Async form submission with robust error handling:
   • Client-side validation (required fields, email format)
   • User-facing states: loading, success, retryable error (e.g., network/5xx), non-retryable error (e.g., 4xx)
   • Retry flow
   • Telemetry for key events (start, success, failure, retry), using sendBeacon when possible
6. Deliverables:
   • Provide the HTML, CSS, and minimal JavaScript in a single example that demonstrates responsiveness, accessibility, and error handling.