Dark mode color variables

[kentcdodds]

Test Plan

1. Toggle the theme between light and dark mode using the theme switcher.
2. Verify the visual appearance and contrast on the following pages/components in both themes:
   • Marketing pages (hero section, feature banner, pricing, CTA).
   • Recipients list (banners, recipient cards, message counts).
   • Recipient thread (message bubbles, scheduled message cards, composer).
   • OTP verification page.
   • Global layout (header, footer, mobile menu).

Checklist

• Tests updated
• Docs updated

Screenshots

Dark mode toggle to recipients thread with composer:

---

 

---

Note

Low Risk
Primarily CSS/theming changes; risk is limited to visual regressions/contrast issues across updated pages, with no meaningful behavioral or data-flow changes.

Overview
Refactors UI styling to use semantic Tailwind color tokens backed by CSS variables, improving light/dark theme consistency across marketing pages, recipients list/thread, subscription pricing, verification OTP UI, and the global layout/mobile menu.

This introduces new theme variables (e.g. brand, warm, warning, banners, pricing, message/thread colors, overlay/inverse) plus a thread-gradient utility, and updates components to replace hardcoded hsl(var(--palette-...)) classes and special-case route theming with these tokens.

^{Written by Cursor Bugbot for commit aa5a9ca. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}