---
description: 项目基本原则 - 响应式、夜间模式、主题与动画
globs: 
alwaysApply: true
---

# 项目基本原则

## 1. 响应式设计 (PC / H5)

- **断点**：使用 Tailwind 默认断点 `sm:640px` `md:768px` `lg:1024px` `xl:1280px`
- **移动优先**：默认样式面向 H5，再用 `sm:` `md:` 等增强 PC 体验
- **触控友好**：按钮、链接最小点击区域约 44×44px
- **布局**：`flex` / `grid` 配合 `flex-wrap`、`gap` 实现自适应
- **字体**：使用 `clamp()` 或 `text-sm sm:text-base md:text-lg` 做响应式字号

## 2. 夜间模式切换

- **实现**：通过 `ThemeProvider` 与 `ThemeToggle`，在 `html` 上切换 `.light` / `.dark` 类
- **变量**：使用 CSS 变量 `--background` `--foreground` `--card` `--muted` `--accent` 等
- **新页面**：必须支持 `.dark` 下的样式，或直接使用 CSS 变量
- **初始化**：`theme-init.ts` 在首屏渲染前执行，避免主题闪烁

## 3. 主题与科技感

- **主色**：`--accent: #f59e0b`（琥珀色），用于按钮、链接、强调
- **背景**：日间 `#fafafa`，夜间 `#0c0c0f`
- **科技感**：渐变、毛玻璃 `backdrop-blur`、轻微阴影、边框透明度

## 4. CSS 动画

- **过渡**：`transition` 时长 0.2s–0.3s，`ease` / `ease-out`
- **已有动画**：`animate-gradient`、`hover-shimmer`、`animate-float-badge`
- **交互**：悬停时 `hover:-translate-y-0.5`、`hover:scale-105` 等
- **加载**：使用 `animate.css` 的 `animate__fadeInDown` 等