feat: use Cal Sans UI as body font, rename font-cal to font-heading

[devin-ai-integration]

What does this PR do?

This PR replaces Inter with Cal Sans UI as the default body font on dashboard pages, while keeping Inter on public booking pages. It also renames the heading font CSS variable from --font-cal to --font-heading for clarity.

This is a follow-up to PR #26759 which reverted #26064 because there was uncertainty about using Cal Sans on public booking pages.

Changes

Font Architecture:

• --font-sans → Cal Sans UI (body font, default for entire app)
• --font-heading → Cal Sans SemiBold (heading font, renamed from --font-cal)
• Public booking pages override --font-sans locally with Inter

Implementation:

• Added Cal Sans UI variable font file (CalSansUI[MODE,wght].woff2)
• Root layout loads Cal Sans UI as --font-sans and Cal Sans SemiBold as --font-heading
• Removed the <style> tag approach for CSS variables, now using Next.js font variable classes on body
• Booking page layout loads Inter font and wraps children in a div that overrides --font-sans locally
• Renamed all font-cal references to font-heading across ~70 files
• Removed redundant font-semibold/font-medium from font-heading elements (Cal Sans SemiBold is already semibold)

Updates since last revision

• Simplified approach: Inter font is now loaded only in booking page layout
• Booking page layout overrides --font-sans via wrapper div with font variable class and inline fontFamily style
• Removed --font-sans-booking variable (no longer needed)
• PageWrapperAppDir unchanged (no className prop needed)

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - internal font change only.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

1. Navigate to dashboard pages (event-types, bookings, availability, settings, etc.) and verify body text uses Cal Sans UI font
2. Navigate to public booking pages (e.g., /[username]/[event-type]) and verify body text uses Inter font
3. Verify headings with font-heading class render correctly with Cal Sans SemiBold
4. Check font rendering in both light and dark modes
5. Test across different browsers (Chrome, Firefox, Safari)

Human Review Checklist

• Verify the wrapper div in apps/web/app/(booking-page-wrapper)/layout.tsx doesn't break booking page layouts
• Verify Inter font actually renders on public booking pages (inspect element to confirm font-family)
• Verify Cal Sans UI font renders on dashboard pages
• Spot-check a few of the 70+ files where font-cal was renamed to font-heading for any issues
• Verify the removal of redundant font-weight classes doesn't affect heading appearance

---

Link to Devin run: https://app.devin.ai/sessions/d74d6d034e8e4c54a9037cb4a3f0400a
Requested by: [email protected]

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring