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,7 +5,30 @@
 
 @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 {

app/components/index/Events.vue

@@ -1,23 +1,23 @@
 <template>
   <!-- 活动模块 -->
-  <UPageSection title="校友活动" class="bg-gray-100">
+  <UPageSection title="校友活动" class="bg-gray-100 dark:bg-slate-800">
     <UPageGrid>
       <div
         v-for="event in events"
         :key="event.id"
-        class="bg-white shadow rounded-xl"
+        class="bg-white dark:bg-slate-700 shadow rounded-xl"
       >
         <img
           :src="event.cover"
           :alt="event.title"
-          class="w-full aspect-[16/9] object-cover rounded-t-xl"
+          class="w-full aspect-video object-cover rounded-t-xl"
         />
         <div class="p-6">
           <h4 class="font-semibold text-lg mb-2">{{ event.title }}</h4>
-          <p class="text-sm text-gray-600 mb-1">
+          <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
             日期：{{ useChineseDateFormat(event.date) }}
           </p>
-          <p class="text-sm text-gray-600 mb-4">地点：{{ event.location }}</p>
+          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">地点：{{ event.location }}</p>
           <UButton
             label="阅读详情"
             :to="event.path"

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>

app/error.vue

@@ -164,7 +164,7 @@ const errorColor = computed(() => {
               <button
                 @click="goHome"
                 class="px-5 py-2.5 rounded-md text-white font-medium transition-colors flex items-center gap-2"
-                style="background-color: var(--color-primary)"
+                style="background-color: var(--color-primary-400)"
               >
                 <span>返回首页</span>
               </button>

app/layouts/default.vue

@@ -12,7 +12,7 @@
           <div class="flex gap-4 items-center">
             <img class="inline h-12 w-auto" src="/Logo.svg" alt="YPHS Alumni" />
             <h1
-              class="text-xl font-bold text-gray-900 hover:text-primary hidden md:inline"
+              class="text-xl font-bold text-gray-900 hover:text-primary-400 hidden md:inline"
             >
               永平中学校友会
             </h1>

app/pages/about/founded-history.vue

@@ -131,7 +131,7 @@
                   :class="[
                     'px-4',
                     'py-2',
-                    idx < 2 ? 'font-bold text-primary' : '',
+                    idx < 2 ? 'font-bold text-primary-400' : '',
                   ]"
                 >
                   {{ donor.amount }}
@@ -167,7 +167,7 @@
                   {{ money.format(serviceDonor.amount) }}
                 </td>
               </tr>
-              <tr class="bg-amber-50 font-semibold text-primary">
+              <tr class="bg-amber-50 font-semibold text-primary-400">
                 <td class="px-4 py-2">总额</td>
                 <td class="px-4 py-2">专业服务及装修项目</td>
                 <td class="px-4 py-2">{{ money.format(33170) }}</td>

app/pages/index.vue

@@ -19,7 +19,7 @@
 
     <!-- 捐赠模块 -->
     <UPageCTA
-      class="bg-secondary"
+      class="bg-secondary-200 dark:bg-secondary-900"
       title="支持与捐赠（功能暂未开放）"
       description="您的捐赠将用于奖学金、校园建设及校友活动发展。感谢您对母校的支持！"
       :links="donationLinks"

app/pages/join-us/index.vue

@@ -113,7 +113,7 @@ const handleSubmit = () => {
 </script>
 
 <template>
-  <UPage class="bg-primary">
+  <UPage class="bg-primary-400">
     <div
       class="cursor-not-allowed fixed flex items-center justify-center min-h-screen min-w-screen bg-black opacity-50"
     >