fix(buttons): 修复 RippleButton 文字显示问题并解决 ESLint 错误

修复了 RippleButton 组件因 CVA 默认样式与自定义 className 冲突导致的文字不可见问题。
同时修复了项目中的 TypeScript 类型错误和 ESLint 规范问题。

主要修改：
1. 按钮显示修复：为使用红色文字的按钮添加 variant=outline，
   为使用白色背景的按钮添加 variant=secondary
2. TypeScript 类型修复：修复 subtle-dots.tsx 中的类型定义错误，
   删除不必要的 jest-dom.d.ts 文件
3. ESLint 规范修复：修复 React Hooks 使用规范问题，
   将 useRef+forceUpdate 反模式改为 useState，
   使用 eslint-disable 注释处理合理的 setState in effect 场景
4. 测试增强：添加按钮显示验证脚本和全面的页面按钮检查脚本

src/app/globals.css

@@ -5,6 +5,7 @@
   --font-mono: var(--font-geist-mono);
   --font-chinese: var(--font-noto-sans-sc);
   --font-calligraphy: 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif;
+  --font-brand: var(--font-aoyagi-reisho), 'Aoyagi Reisho', 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif;
 }
 
 :root {
@@ -202,24 +203,6 @@
   input:focus, textarea:focus {
     outline: none;
   }
-  
-  /* 马善政行书体 - 用于红色关键词高亮 */
-  .font-calligraphy {
-    font-family: var(--font-ma-shan-zheng), 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif !important;
-    font-weight: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-  }
-
-  /* 青柳隷書 - 仅用于品牌标题"睿新致远" */
-  .font-brand {
-    font-family: var(--font-aoyagi-reisho), 'Aoyagi Reisho', 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif !important;
-    font-weight: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-  }
 
   ::selection {
     background-color: var(--color-text-primary);
@@ -227,6 +210,24 @@
   }
 }
 
+/* 马善政行书体 - 用于红色关键词高亮 */
+@utility font-calligraphy {
+  font-family: var(--font-ma-shan-zheng), 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif !important;
+  font-weight: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* 青柳隷書 - 仅用于品牌标题"睿新致远" */
+@utility font-brand {
+  font-family: var(--font-aoyagi-reisho), 'Aoyagi Reisho', 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif !important;
+  font-weight: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
 @layer utilities {
   .container-narrow {
     width: 100%;