feat: Improved contrast in light mode

[rwits08]

Description

Improved the Light Mode UI accessibility and visual hierarchy across the application.

Changes made

• Enhanced contrast for muted text and borders in Light Mode

• Improved upload section readability before video upload

• Refined FormatSelector UI with:

  • better spacing
  • improved inactive button visibility
  • stronger hover/focus states
  • clearer typography hierarchy

• Improved ExportSettings section with:

  • card-based layout containers
  • increased spacing
  • improved labels and readability
  • better checkbox sizing and visibility

• Refined Footer UI by:

  • improving contrast and readability
  • reducing excessive opacity usage
  • improving hover interactions
  • enhancing visual separation from the page

• Updated global theme tokens (--surface, shadows, borders, muted text) for improved accessibility and cleaner UI consistency

These changes improve WCAG contrast compliance, usability in bright environments, and overall UI polish without affecting existing functionality.

---

Related Issue

Closes #1037

Type of Contribution

• Bug fix
• Refactor
• GSSoC contribution

---

Participant Info

• GitHub username: rwits08
• Contribution level (Beginner/Intermediate/Advanced): Intermediate

---

Screen Recording

Reframe.Resize.trim.and.export.videos.in.your.browser.-.Google.Chrome.2026-05-25.21-38-34.mp4

(ADDED A VERY SHORT RECORDING OF 4s ONLY DUE TO VIDEO SIZE RESTRICTION<10MB)

Screenshots if required:

before:

after:

Checklist

• I have read the contribution guidelines
• My changes follow the project structure
• I have tested my changes in Chrome, Firefox, and Safari
• bun run lint passes (no ESLint errors)
• bunx tsc --noEmit passes (no TypeScript errors)
• New interactive elements have aria-label / accessible names
• No console.log statements left in
• This PR is related to a valid issue
• Screen recording attached above

[vercel]

@rwits08 is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Thanks for your PR, @rwits08!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

🟠 GSSoC'26 PR detected — thanks for contributing under GirlScript Summer of Code 2026!

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[github-actions]

✅ PR Format Check Passed — @rwits08

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.