refactor(ui): 合并双组件库为 components/ui 基元层,设计令牌变量化,报头字体子集自托管

- 新建 components/ui/(Button/Input/Select/Modal/Tabs/Spinner/Skeleton 等),变体用联合类型约束,根治幻影变体
- admin/components.tsx 与 matches/ui.tsx 改为再导出壳,消除 Spinner 三份重复
- 日期工具收口到 lib/date.ts,滚动监听收口到 lib/useScroll.ts
- index.css 引入 :root RGB 三元组令牌,tailwind.config 接 <alpha-value>(修复透明度修饰符静默失效)
- 刘建毛草 5MB 全字库(jsDelivr 未锁版) → 1KB 自托管子集(仅「先知」二字,unicode-range 限定)

frontend/tailwind.config.js

@@ -4,31 +4,46 @@ export default {
   theme: {
     extend: {
       colors: {
+        /*
+          颜色来源说明:
+          纸白/墨色/印报红三组令牌的**权威定义在 src/index.css 的 :root**
+          (CSS 自定义属性,值为 RGB 三元组)。这里引用同一份变量,使
+          工具类(bg-press)与手写 CSS(outline: var(--press))不可能漂移。
+
+          此前两处各自硬编码十六进制,改色时必须记得改两边 ——
+          index.css 里就有 3 处漏网(焦点环/报头粗线/毛笔字),保留了旧色。
+
+          <alpha-value> 占位符不可省略:它让 Tailwind 的透明度修饰符
+          (bg-press-wash/60)能正确注入 alpha。缺了它,带 /60 的类名会
+          静默不生成任何 CSS。
+        */
         // 纸白:微暖底色,像新闻纸而不是纯白画布
         paper: {
-          50: '#FDFCF8',
-          100: '#F7F4EC',
-          200: '#EDE9DE',
-          300: '#DDD7C7',
+          50: 'rgb(var(--paper-50) / <alpha-value>)',
+          100: 'rgb(var(--paper-100) / <alpha-value>)',
+          200: 'rgb(var(--paper-200) / <alpha-value>)',
+          300: 'rgb(var(--paper-300) / <alpha-value>)',
         },
         // 墨色:暖黑灰阶,替代冷调 slate
+        // 注:50/100/600/800 尚未提升为 CSS 变量(仅 CSS 侧未用到),
+        // 保持字面量直至有第二个消费方,避免过早抽象。
         ink: {
           50: '#FAF9F7',
           100: '#F0EEE9',
-          200: '#E2DFD7',
-          300: '#C9C4B8',
-          400: '#9C9587',
-          500: '#6E675B',
+          200: 'rgb(var(--ink-200) / <alpha-value>)',
+          300: 'rgb(var(--ink-300) / <alpha-value>)',
+          400: 'rgb(var(--ink-400) / <alpha-value>)',
+          500: 'rgb(var(--ink-500) / <alpha-value>)',
           600: '#524C42',
-          700: '#3B362E',
+          700: 'rgb(var(--ink-700) / <alpha-value>)',
           800: '#282420',
-          900: '#17140F',
+          900: 'rgb(var(--ink-900) / <alpha-value>)',
         },
       // 印报红:全站唯一强调色,克制使用
       press: {
-        DEFAULT: '#9E1B1B',
-        dark: '#7C1414',
-        wash: '#F7E9E4',
+        DEFAULT: 'rgb(var(--press) / <alpha-value>)',
+        dark: 'rgb(var(--press-dark) / <alpha-value>)',
+        wash: 'rgb(var(--press-wash) / <alpha-value>)',
       },
       // ── 语义状态色:成功/警告/负面 ──
       // 设计约束:纸底 #FDFCF8 上文字级(600/700)对比度 ≥ 4.5:1(WCAG AA),
@@ -57,6 +72,26 @@ export default {
         600: '#A83B3B',
         700: '#8F3030',
       },
+      // ── 赛制分区色:欧战 / 附加赛 ──
+      // 与 ok/warn/bad 同一套降饱和逻辑,替代此前的 sky/orange 原生色
+      // (原生色冷调高饱和,与纸色暖灰底冲突)。
+      // 对比度:#FDFCF8 纸底上 700 级 ≥ 4.5:1,100 级仅作底色不与文字对比。
+      euro: {
+        50: '#EAF0F2',
+        100: '#DCE6EA',
+        300: '#A9C0C9',
+        500: '#5B7C8A',
+        600: '#476571',
+        700: '#3A5460',
+      },
+      playoff: {
+        50: '#F8EEDF',
+        100: '#F2E0C6',
+        300: '#DDBE8A',
+        500: '#B87A2E',
+        600: '#966124',
+        700: '#7C511E',
+      },
       },
       fontFamily: {
         // 毛体草书(国内 CDN)+ 粗楷体回退
@@ -84,6 +119,10 @@ export default {
       fontSize: {
         '2xs': ['11px', { lineHeight: '16px' }],
       },
+      // 报纸硬阴影:实心偏移、无模糊,替代此前内联的一次性写法
+      boxShadow: {
+        print: '4px 4px 0 0 rgb(0 0 0 / 0.06)',
+      },
     },
   },
   plugins: [],