fix(ui): resolve theme mismatch for back-to-top progress ring

[DnN04]

Summary

This PR fixes remaining theme inconsistencies across the landing page and Back-to-Top button by replacing hardcoded colors with the project's design tokens. UI components now fully adapt to the active theme, including Modern Light Blue, Cyberpunk Matrix, Nordic Frost, Dracula, and other supported themes.

Closes #3179

---

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)

• ✨ New feature (non-breaking change that adds functionality)

• 💥 Breaking change (fix or feature that changes existing behavior)

• 📝 Documentation update

• ♻️ Refactor / code cleanup (no functional change)

• ⚡ Performance improvement

• 🔒 Security fix

• 🧪 Tests only

---

What Changed

• Updated landing page cards (LandingPage.tsx) to replace hardcoded backgrounds, borders, and shadows with theme-aware design tokens (--card, --border, --shadow-medium, --shadow-soft).

• Fixed section divider borders across About, Features, Why DevTrack, and How It Works sections to dynamically use the active theme border color.

• Updated the repository contributor counter badge to use theme-aware background, border, and text colors.

• Refactored the Back-to-Top progress ring (BackToTopButton.tsx) to use var(--accent) instead of a hardcoded blue accent.

• Replaced the hardcoded SVG drop-shadow with a dynamic color-mix() implementation based on the active theme accent.

• Updated the Back-to-Top button focus ring to use the theme accent (focus:ring-accent) for consistent accessibility styling across all themes.

---

How to Test

1. Run the application locally.

2. Switch between multiple themes (e.g., Modern Light Blue, Cyberpunk Matrix, Nordic Frost, Dracula).

3. Navigate through the landing page and scroll down to display the Back-to-Top button.

Expected result:

• Landing page cards, borders, shadows, and section dividers should automatically adapt to the selected theme.

• The Back-to-Top progress ring, glow effect, and focus outline should always match the active theme accent without retaining hardcoded blue colors.

---

Screenshots / Recordings

Before | After -- | -- Landing page cards and Back-to-Top button retained hardcoded dark/blue styling in several themes. | All cards, borders, shadows, progress ring, glow, and focus ring now dynamically follow the selected theme palette.

---

Checklist

• Linked the related issue above

• Self-reviewed my own diff

• No unnecessary console.log, debug code, or commented-out blocks

• npm run lint passes locally

• No TypeScript errors (npm run type-check)

• Added or updated tests where applicable

• Updated documentation / comments if behavior changed

---

Accessibility (UI changes only)

• Keyboard navigation works correctly

• Color contrast follows the active theme design tokens

• ARIA labels / roles added where needed

• Tested on mobile / responsive layout

---

Additional Context

This PR standardizes the use of the project's existing design token system (var(--accent), --card, --border, --control, --shadow-medium, --shadow-soft) to eliminate hardcoded theme values. This ensures future themes automatically propagate consistent styling across the landing page and interactive UI elements without requiring component-level updates.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[DnN04]

Hey @Priyanshu-byte-coder , as I am a GSSoC 26 contributor kindly review this pr and add appropiate tags. Thank you