style(theme): expand color palettes and refine dark mode styles

- Expand CSS variables for primary and secondary colors to include full 50-950 scales in `main.css`.
- Update components to reference specific color shades (e.g., `primary-400`, `secondary-200`) instead of generic variables.
- Add dark mode background and text colors to Events, Hall of Fame, and Index sections.
- Adjust image aspect ratio in the Events component.

app/components/index/HallOfFame.vue

@@ -10,10 +10,10 @@
         <img
           :src="person.photo"
           :alt="person.name"
-          class="w-40 rounded-full border-primary border-4"
+          class="w-40 rounded-full border-primary-400 border-4"
         />
         <h4 class="text-lg font-bold">{{ person.name }}</h4>
-        <p class="text-sm text-gray-500">{{ person.title }}</p>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{{ person.title }}</p>
       </div>
     </div>
   </UPageSection>