UI/UX: Addition of Standardised Typography in the New Design System

### 🎨 The UI/UX Update

This is a sub-issue of #57 and falls under the broader scope of #56.

This issue focuses on introducing standardised typography within the new website design system.

Figma File - https://www.figma.com/design/wC1eX3E1CfOkfRrDMSqEcl/Resonate-AOSSIE-Design-File?node-id=16-6554&t=0Gx3W0dzXJCkaqsT-1

The current Figma file has been curated using consistent typography for headings, subheadings, body text, and supporting content. However, these typography styles are not explicitly defined as reusable or documented design tokens inside the Figma file.

This issue is open for contributors interested in improving design system consistency and maintainability.

### Current Design Issues

1. Typography styles are visually consistent but not formally documented or declared.
2. Lack of defined typography tokens may lead to:

- Inconsistent implementation across components
- Reduced scalability of the design system

3. Difficulty maintaining visual hierarchy in future contributions

Contributors are encouraged to cross-reference typography directly from the Figma design and standardise it during implementation.

If extracting typography specifications directly from the Figma file becomes difficult, I can create and document a dedicated typography section inside the Figma design. Please comment on this issue if needed.

### Proposed Solution

Standardising typography should include defining:
Font families (Already defined as inter)
Font sizes
Font weights
Line heights
Letter spacing (if applicable)

### Approach Suggestion

- Implement typography using **CSS Variables (Custom Properties)**
- Introduce **semantic typography tokens**, such as:
- `--text-heading-xl`
- `--text-body-md`
- `--text-caption-sm`

This approach improves:
- Scalability
- Theming flexibility
- Design consistency across components

Contributors should clearly communicate their implementation approach and reasoning.

### 📌 Acceptance Criteria

- [ ] Typography styles are extracted and standardised from the Figma design
- [ ] Font families, sizes, weights, and line heights are properly defined
- [ ] Semantic naming conventions are followed
- [ ] Typography tokens are reusable across components
- [ ] Implementation aligns with overall design system consistency
- [ ] Responsive typography behaviour is considered
- [ ] No visual regression compared to the approved Figma design

### Design Considerations

- [x] Accessibility
- [x] Visual consistency
- [ ] User flow/navigation
- [ ] Responsive design
- [ ] Dark mode support
- [ ] Other