feat: page category selector and css accent variables

[Infi-Knight]

PR Checklist

• Linked issue added (e.g., Fixes #123)
• I have run bun run format to ensure code is properly formatted
• I have verified that bun run lint passes without errors
• If blog post was added:
  • Ensure images have been optimised
  • Update dates to reflect the actual publishing date when merged (file names, folder names, and frontmatter)

Summary

• Category-specific accent colors defined in tailwind.css
• Blockquote border automatically uses accent color based on page category
• Foundation pages can now set different accent colors via category selection in Strapi

Category field in Strapi - Pages can now be categorized as:

• default (uses primary color)
• tech (uses primary for now)
• mission (uses mission color)
• vision (uses primary for now)
• values (uses primary for now)

Category in page data - The category is added to the MDX frontmatter and passed to the page template
Data attribute on main element -

sets the context

CSS variable overrides - Different categories set different --accent-color values

How to use it:

In Strapi: When creating/editing a page, select a category from the dropdown
Blockquotes automatically pick up the accent color based on the page's category
Add more themed elements: Any component can use var(--accent-color) and it will automatically adjust

To customize colors:
Edit src/styles/tailwind.css and change the color values for each category.

[Infi-Knight]

closing in favour of the css work in #19