fix(ui): move *:focus-visible rule into @layer base to allow brand ring override

[RavindiFernando]

Description

Fixes #61

Root Cause

• globals.css had a global *:focus-visible rule outside any CSS layer. In Tailwind v4, all utility classes live in @layer utilities, but un-layered CSS always wins the cascade regardless of specificity, so the blue ring bled through no matter what utility classes were on the input.

Fix

• Moved the *:focus-visible rule in globals.css into @layer base, so Tailwind utilities can properly override it. No changes were needed to the input's className. The existing outline-none utility class already suppresses the outline through Tailwind v4's layer cascade.

Result

• The input now shows only CommitPulse's primary brand accent color (#00ffaa) as the focus ring with a smooth transition-all duration-200, consistent with the dark theme aesthetic.

Pillar

• 🎨 Pillar 1 — New Theme Design
• 📐 Pillar 2 — Geometric SVG Improvement
• 🕐 Pillar 3 — Timezone Logic Optimization
• 🛠️ Other (Bug fix, refactoring, docs)

Visual Preview

Checklist before requesting a review:

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
• I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
• My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
• I have updated README.md if I added a new theme or URL parameter.
• I have started the repo.
• I have made sure that i have only one commit to merge in this PR.
• The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).
• (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

[vercel]

@RavindiFernando is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Hey @RavindiFernando, welcome to CommitPulse! 🎉

Thanks for opening your first pull request — this is a big deal and we appreciate the effort!

While you wait for a review, please double-check:

• ✅ You've read the CONTRIBUTING.md checklist
• ✅ npm run lint, npm run format, and npm run test all pass locally
• ✅ Your PR has a visual preview if it touches any SVG output
• 💬 You've joined our Discord for faster PR feedback

A maintainer will review your PR shortly. Hang tight! 🚀

[Copilot]

Pull request overview

This PR fixes the “default blue focus ring” issue by ensuring the global *:focus-visible outline rule participates in Tailwind v4’s layer-based cascade, allowing component/utility focus styles (e.g., the brand ring on the landing page input) to override it correctly.

Changes:

• Moved the global *:focus-visible outline styling into @layer base in app/globals.css so Tailwind utilities can override it.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.