refactor(styles): 建立统一的生产级样式体系 (#4)

## 变更内容

- 将全局样式拆分为设计令牌、基础规则和语义组件层
- 集中管理 Naive UI 主题配置
- 迁移页面容器、表单、信息面板和按钮等重复样式
- 增加样式体系文档与自动契约检查

## 验证

- `npm run check:styles`
- `npm run build`Reviewed-on: #4

src/views/encyclopedia/EncyclopediaView.vue

@@ -62,13 +62,13 @@ onMounted(async () => {
 
 <template>
   <div class="relative">
-    <div class="bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)] border-b border-sky-100">
-      <div class="max-w-6xl mx-auto px-4 py-10">
+    <div class="oc-page-hero">
+      <div class="oc-container oc-container--content oc-page-hero__inner">
         <div class="grid gap-6 lg:grid-cols-[1.4fr_0.9fr] lg:items-start">
           <div>
-            <p class="text-sm font-medium tracking-[0.24em] text-sky-700 uppercase">Cloud Encyclopedia</p>
-            <h1 class="mt-3 text-4xl font-bold text-slate-900">云朵图鉴</h1>
-            <p class="mt-4 max-w-2xl text-slate-600 leading-7">
+            <p class="oc-page-eyebrow">Cloud Encyclopedia</p>
+            <h1 class="oc-page-title">云朵图鉴</h1>
+            <p class="oc-page-description">
               收集 10 种基础云属。每拍到一种新的云型，图鉴里就会点亮一枚徽章，并记录你第一次遇见它的时间。
             </p>
           </div>
@@ -83,7 +83,7 @@ onMounted(async () => {
       </div>
     </div>
 
-    <div class="max-w-6xl mx-auto px-4 py-8">
+    <div class="oc-container oc-container--content oc-page-content">
       <NAlert
         v-if="encyclopediaStore.collectionError && authStore.isLoggedIn"
         class="mb-6"