AS / feature add typography

[ashleystringer]

This PR fixes...

• https://cherryontech.atlassian.net/browse/KAN-15
• https://www.figma.com/design/XdlQFhTmibnJmE5dXj6ET1/Design-System-%7C-Final?node-id=535-770&p=f&t=VCNOI2Hgc8REaYuL-0

This PR adds typography globally to the website in accordance with the requirements outlined in the Jira Ticket and its corresponding Figma file.

What I did...

• Added the Geologica and Lato fonts to the globals.css stylesheet in the theme variable
• Overrode several font sizes (text-4xl, text-3xl, text-2xl) based on Figma requirements
• Added custom font sizes (text-mobile-4xl, text-mobile-3xl, text-mobile-2xl) based on Figma requirements
• Created Astro components for the headers, label, caption, and body elements with Tailwind variants for re-usability
• Created "normal" and "bold" variants for the elements that need both based on Figma requirements
• Created custom breakpoints for desktop and tablet (because this is mobile-first, the mobile screen size is assumed to be the default)

How to test...

There's likely a better and more professional way to test this, but this was admittedly a little post hoc.

1. Make sure that tailwind-variants and tailwind-merge libraries are installed.
2. Check that the content of the theme variable in the globals.css match the linked Figma file.
3. Change the code I've temporarily added in pages/index.astro by importing one of the Astro components.
4. Change adjust the type variable for the component to either "normal" or "bold" to change the font weight.
5. Adjust the size of your browser window for the breakpoints to change the styling of the components.

[masuyama13]

In my opinion, it would be better to define typography in global.css using @layer base. Since these are default styles for semantic elements like h1, h2, and body, this approach feels simpler and more lightweight than creating separate Astro components for each heading level.
https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

For example:

@layer base {
  body {
    font-family: var(--font-lato);
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--text-base--line-height);
  }

  h1,  h2,  h3,  h4,  h5 {
    font-family: var(--font-lato);
    font-weight: var(--font-weight-semibold);
  }

  h1 {
    font-size: var(--text-5xl);
    line-height: var(--text-5xl--line-height);
  }
  /* ... */
  @media (min-width: 64rem) {  /* 1024px */
    body {
      font-size: var(--text-lg);
      font-weight: var(--font-weight-normal);
      line-height: var(--text-lg--line-height);
    }

    h1 {
      font-size: var(--text-6xl);
      line-height: var(--text-6xl--line-height);
    }
  /* ... */
  }
}

[masuyama13]

Please make sure to add a blank line at the end of each file.