Now let me build the full Settings screen:

Now let me build all the components:

Now let me create the components:

Now let me verify the globals.css @theme inline block includes the new tokens and the --font-sans maps to Inter:

Everything looks good. The build is complete. Here's a summary of what was created:

4 components across the Pulse app:

• settings-screen.tsx — The main screen with a profile card (teal avatar "S", name, email, Pro badge), three labelled sections (Reminders / Data & Privacy / Account), and scroll-safe layout above the tab bar.
• teal-toggle.tsx — A custom animated toggle switch that renders teal when ON and muted-gray when OFF, fully accessible via role="switch" and aria-checked.
• delete-modal.tsx — An animated bottom sheet with a drag handle, red warning banner, a DELETE confirmation input that shows a red border while mismatched and turns teal on match, and a disabled → enabled "Permanently Delete" button.
• tab-bar.tsx — Fixed bottom nav with a floating teal FAB for "Log", Settings tab highlighted in teal.

The theme in globals.css uses 5 tokens: #0D1117 background, dark card surface, teal primary, destructive red, and muted neutrals — all mapped through semantic design tokens so every component stays consistently themed.