Code Quality: Refactor brittle pixel-based typography to fluid clamp() scaling

[pradeep0153]

Description

The current CSS architecture relies on rigid, pixel-based font sizes (e.g., font-size: 24px) intertwined with dozens of complex CSS media queries to handle mobile responsiveness. This makes the codebase incredibly difficult to maintain. Adding a new breakpoint frequently breaks the typography hierarchy on tablet devices, causing text to overlap or render illegibly small.

Proposed Solution

• Execute a comprehensive refactoring of the global CSS typography variables.
• Replace all static pixel values and media queries with modern, native CSS clamp() functions (e.g., font-size: clamp(1.5rem, 5vw, 3rem);).
• This mathematical function guarantees that heading sizes scale perfectly and linearly across every possible viewport dimension (from an iPhone SE to a 4K ultrawide monitor) without requiring a single media query.
• This drastically simplifies the CSS architecture, permanently eliminates overlapping text bugs, and guarantees a flawless, fluid reading experience on all devices.

[github-actions]

Hey @pradeep0153, thanks for opening this issue! 👋

Before anyone starts working on this, please comment below explaining your approach — what you plan to do and how you plan to do it.

A few things to keep in mind:

• ✍️ Write the explanation yourself — don't paste AI-generated text. We want to understand how you think about the problem.
• 📌 Wait to be assigned before you start coding. This avoids two people solving the same thing at once.
• 📋 Read CONTRIBUTING.md if you haven't already.

Once a maintainer reviews your approach and assigns the issue to you, you're good to go. Looking forward to it! 🚀

[mspandey]

pls assign it to me

[Aditya8369]

@PRODHOSH can you please assign it to me?