style: improve color contrast and overall website styling (#1497)

[mahavirb22]

Summary

Enhances text contrast ratios, component styling, and theme adaptability across DevTrack (landing page and global CSS theme variables) to meet WCAG 2.1 AA standards and create a cleaner, more consistent visual experience in both dark and light modes.

Closes #1497

---

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

• src/app/globals.css: Enhanced --muted-foreground contrast across dark (:root), light (modern-light-blue), nordic-frost, and cyberpunk-matrix theme tokens for WCAG AA compliance. Updated .lnd-about-card and .lnd-cell rules to use CSS variable color-mixing (color-mix(in srgb, var(--card) 80%, transparent)) and var(--border) instead of hardcoded white translucent rgba(255,255,255,0.02) / 0.05 backgrounds that washed out in light mode.
• src/components/landing/LandingPage.tsx: Modernized Bento Cell widgets, hero headline/tagline typography, stat item labels (StatItem), feature cards, and open-source contributor stat tiles to use responsive theme tokens (var(--card), var(--border), var(--muted-foreground), var(--accent)) with elevated font weights (600) and high contrast text.

---

How to Test

1. Open the landing page locally.
2. Toggle between Dark theme and Light theme (modern-light-blue).
3. Inspect text legibility across Hero, Bento widgets, Stats counter row, About cards, Feature preview, and Open Source contributor sections.

Expected result: All text, metric counts, card borders, and subheadings remain crisp, clean, and easily readable with proper WCAG AA contrast across all color themes.

---

Screenshots / Recordings

Before	After
Washed out light silver text on light blue/white backdrop	Crisp, high-contrast, theme-reactive typography and cards

---

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 meets WCAG AA standard
• ARIA labels / roles added where needed
• Tested on mobile / responsive layout

---

Additional Context

• PR created from branch fix-issue-1497-color-contrast.

[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