chore(frontend): optimize tailwind v4 theme and move font variables t…

[ivanskv2000]

Tailwind v4 Theme Optimization

Overview

This PR optimizes the frontend CSS layer by fully embracing the Tailwind CSS v4 "CSS-first" paradigm. Custom theme logic has been migrated from JS-style declarations into the main CSS entry point, and legacy Tailwind v3 compatibility hacks have been removed.

Changes

• Variable Migration: Moved font family definitions (--font-sans, --font-handwritten) from :root into the @theme inline block in index.css.
• Brand Alignment: Added --color-brand and --color-brand-foreground aliases to the Tailwind theme, mapping them to the primary brand colors for better semantic usage.
• Clean Up:
  • Removed redundant manual .font-handwritten class declaration as it is now automatically handled by the Tailwind v4 theme engine.
  • Removed the @custom-variant dark hack, relying on Tailwind v4's native dark mode support.
• Shadcn Integration: Refined the @theme block to ensure Shadcn-vue's CSS variables are properly integrated with the new Tailwind v4 engine, minimizing runtime overhead.

Verification

• Verified that npm run lint passes.
• Verified that npm run build completes successfully, confirming that Tailwind v4 correctly processes the updated index.css.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud