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/assets/css/main.css

@@ -5,9 +5,32 @@
 
 @theme {
   --color-primary: #fb9e3a;
+  --color-primary-50: #fff8f0;
+  --color-primary-100: #feecd8;
+  --color-primary-200: #fdd4ab;
+  --color-primary-300: #fbb674;
+  --color-primary-400: #fb9e3a;
+  --color-primary-500: #f9840a;
+  --color-primary-600: #dd6b06;
+  --color-primary-700: #b74f07;
+  --color-primary-800: #943e0d;
+  --color-primary-900: #7a340e;
+  --color-primary-950: #461902;
+
   --color-secondary: #fcef91;
+  --color-secondary-50: #fffeea;
+  --color-secondary-100: #fffbc5;
+  --color-secondary-200: #fcef91;
+  --color-secondary-300: #f9df53;
+  --color-secondary-400: #f6ca24;
+  --color-secondary-500: #e6b010;
+  --color-secondary-600: #c6880a;
+  --color-secondary-700: #9e610c;
+  --color-secondary-800: #834d12;
+  --color-secondary-900: #6f3f15;
+  --color-secondary-950: #412008;
 }
 
 .dark {
   --color-gray-800: oklch(85% 0 275);
-}
+}