Notion 风格

你是一个 Notion Style 设计风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 使用大圆角 rounded-2xl, rounded-3xl, rounded-full
- 使用渐变背景 bg-gradient-*
- 使用重阴影 shadow-xl, shadow-2xl
- 使用过于鲜艳的颜色
- 过度装饰和动画

## 必须遵守

- 使用 Notion 米色背景 bg-[#f7f6f3]
- 微妙边框 border border-gray-200
- 小圆角 rounded-md 或 rounded-lg
- 轻柔悬停 hover:bg-gray-100
- 清晰的文字层级

## 配色

主色调：
- 文字: text-[#37352f] (Notion 深灰)
- 背景: bg-white, bg-[#f7f6f3]
- 边框: border-gray-200

强调色：
- 蓝色: text-[#2eaadc], bg-blue-50
- 红色: text-[#eb5757], bg-red-50
- 绿色: text-[#0f7b6c], bg-green-50
- 黄色: text-[#dfab01], bg-yellow-50

## 交互

- 悬停: hover:bg-[#efedea]（Block Highlighting，极低信噪比）
- 选中: bg-[#e3e1db]（Micro-click，仅加深背景）
- 聚焦: focus:ring-2 focus:ring-blue-500/30

## Animation & Interaction Rules

- Ultimate Restraint: 严格禁止任何 translate 或 scale 动画，文档工具要求绝对的视觉稳定性。
- Block Highlighting: hover 背景从 #f7f6f3 变为 #efedea（约 5% 亮度变化），transition-colors duration-150，信噪比刻意保持极低。
- Drag Handle Illusion: 卡片/列表项使用 group 类，左侧 ⋮⋮ 拖拽手柄 opacity-0 group-hover:opacity-100 transition-opacity duration-150，这是 Notion 标志性 UX 模式。
- Micro-click: active 状态仅加深背景至 #e3e1db，无其他任何视觉变化，体现效率工具的克制感。

## 自检

每次生成代码后检查：
1. 没有使用渐变
2. 圆角适中（rounded-md 或 rounded-lg）
3. 阴影轻柔（shadow-sm 或 shadow-md）
4. 整体感觉简洁清爽

/* Notion Style 全局样式 */

:root {
  --notion-text: #37352f;
  --notion-text-gray: #9b9a97;
  --notion-bg: #ffffff;
  --notion-bg-gray: #f7f6f3;
  --notion-blue: #2eaadc;
  --notion-red: #eb5757;
  --notion-green: #0f7b6c;
  --notion-yellow: #dfab01;
  --notion-border: rgba(55, 53, 47, 0.09);
}

/* 基础文字样式 */
body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
  color: var(--notion-text);
  line-height: 1.5;
}

/* Notion 风格链接 */
.notion-link {
  color: var(--notion-text);
  text-decoration: underline;
  text-decoration-color: rgba(55, 53, 47, 0.4);
  text-underline-offset: 2px;
}

.notion-link:hover {
  text-decoration-color: var(--notion-text);
}

/* Notion 风格代码块 */
.notion-code {
  font-family: SFMono-Regular, Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace;
  font-size: 85%;
  background: rgba(135, 131, 120, 0.15);
  border-radius: 3px;
  padding: 0.2em 0.4em;
}

/* Notion 风格分割线 */
.notion-divider {
  border: none;
  border: 1px solid var(--notion-border);
  margin: 1rem 0;
}
@keyframes notion-style-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes notion-style-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.notion-style-card {
  position: relative;
  overflow: hidden;
}

.notion-style-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(55, 53, 47, 0.05), transparent);
  pointer-events: none;
}

.notion-style-card:hover::before {
  opacity: 1;
}

.notion-style-gradient {
  background: linear-gradient(135deg, #37352f, #2eaadc);
}

.notion-style-gradient-text {
  background: linear-gradient(135deg, #37352f, #2eaadc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.notion-style-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(55, 53, 47, 0.08);
}

.notion-style-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.notion-style-animate-in {
  animation: notion-style-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border",
    "color": "border-gray-200",
    "radius": "rounded-md",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-sm",
    "md": "shadow-md",
    "lg": "shadow-lg",
    "none": "shadow-none",
    "hover": "hover:shadow-md",
    "focus": "focus:shadow-sm",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-colors duration-150",
    "active": "active:scale-95",
    "hoverOpacity": "hover:bg-gray-100"
  },
  "typography": {
    "heading": "font-semibold text-gray-900",
    "body": "text-gray-700",
    "mono": "font-mono text-gray-600 text-sm",
    "sizes": {
      "hero": "text-4xl md:text-5xl",
      "h1": "text-3xl md:text-4xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-base",
      "small": "text-sm"
    }
  },
  "spacing": {
    "section": "py-12 md:py-16",
    "container": "px-4 md:px-6",
    "card": "p-4 md:p-6",
    "gap": {
      "sm": "gap-2",
      "md": "gap-4",
      "lg": "gap-6"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-white",
      "secondary": "bg-[#f7f6f3]",
      "accent": [
        "bg-blue-50",
        "bg-red-50",
        "bg-green-50",
        "bg-yellow-50"
      ]
    },
    "text": {
      "primary": "text-[#37352f]",
      "secondary": "text-gray-600",
      "muted": "text-gray-400"
    },
    "button": {
      "primary": "bg-[#2eaadc] text-white",
      "secondary": "bg-gray-100 text-gray-700"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-2xl",
      "rounded-3xl",
      "rounded-full",
      "shadow-2xl",
      "bg-gradient-to-r",
      "bg-gradient-to-br"
    ],
    "patterns": [
      "^rounded-(?:2xl|3xl|full)",
      "^shadow-(?:2xl|inner)",
      "^bg-gradient"
    ],
    "reasons": {
      "rounded-2xl": "Notion style uses subtle rounded corners (rounded-md or rounded-lg)",
      "rounded-full": "Notion style avoids pill-shaped elements except for avatars",
      "shadow-2xl": "Notion style uses minimal, subtle shadows",
      "bg-gradient-to-r": "Notion style uses flat, solid colors without gradients"
    }
  },
  "required": {
    "button": [
      "px-3 py-1.5",
      "rounded-md",
      "text-sm font-medium",
      "hover:bg-gray-100",
      "transition-colors duration-150"
    ],
    "card": [
      "bg-white",
      "border border-gray-200",
      "rounded-lg",
      "shadow-sm"
    ],
    "input": [
      "bg-white",
      "border border-gray-200",
      "rounded-md",
      "text-gray-900 placeholder-gray-400",
      "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
      "transition-all"
    ]
  }
}