新拟物派

# Neumorphism (新拟物派) 设计规范

## 核心原则
你正在使用 Neumorphism 设计风格。这种风格通过柔和的双重阴影创造元素的立体感。

## 必须遵循
1. 背景色使用浅灰色 bg-[#e0e5ec] 或 bg-[#f0f0f3]
2. 凸起效果: shadow-[8px_8px_16px_#b8bcc2,-8px_-8px_16px_#ffffff]
3. 凹陷效果: shadow-[inset_8px_8px_16px_#b8bcc2,inset_-8px_-8px_16px_#ffffff]
4. 圆角使用 rounded-xl 或 rounded-2xl (12-24px)
5. 按钮按下时从凸起变凹陷 (active: 伪类)
6. 输入框使用凹陷效果表示输入区域
7. 保持同色系：元素颜色与背景相近
8. 响应式阴影：移动端减小阴影尺寸

## 禁止使用
1. 纯黑/纯白背景
2. 硬边缘阴影 shadow-[Xpx_Xpx_0px]
3. 高对比度配色
4. 粗边框 border-2 及以上
5. 渐变背景
6. 直角 rounded-none

## 阴影参数说明
- 亮阴影方向：左上 (-X, -Y)，颜色接近白色 #ffffff
- 暗阴影方向：右下 (X, Y)，颜色比背景深 #b8bcc2
- 阴影模糊度通常是偏移量的 1.5-2 倍

## 配色方案
- 主背景: #e0e5ec
- 浅背景: #f0f0f3
- 暗阴影: #b8bcc2
- 亮阴影: #ffffff
- 强调色: #6d5dfc (紫色)
- 文字: #333333
- 次要文字: #6b7280

## 交互状态
- 默认: 凸起阴影
- Hover: 阴影缩小（Hover Shadowing，手指靠近遮光）
- Active/Pressed: 变为凹陷阴影（Extrude to Intrude，禁止 translate）
- Focus: 输入框内阴影减小（通道开放感）
- Disabled: 阴影减弱，透明度降低

## Animation & Interaction Rules

- Extrude to Intrude: 按钮 active 状态必须从外凸转为内凹（active:shadow-[inset_...]），严格禁止任何 translate 位移，元素是从背景材质中生长的。
- Hover Shadowing: hover 时减小外阴影（从 16px 减至 8px），模拟手指靠近遮挡光源——与常规相反，阴影应缩小不扩大。
- Smooth Molding: 所有过渡使用 duration-300 ease-in-out，模拟软橡胶/软塑料的柔韧弹性。
- Fixed Illuminant: 光源方向锁定左上（负 X/Y 偏移 = 白色），右下为暗（正 X/Y 偏移 = #b8bcc2），禁止任何破坏光方向的阴影配置。

/* Neumorphism 全局样式 */

/* 背景色 */
:root {
  --neu-bg: #e0e5ec;
  --neu-bg-light: #f0f0f3;
  --neu-shadow-dark: #b8bcc2;
  --neu-shadow-light: #ffffff;
  --neu-accent: #6d5dfc;
  --neu-text: #333333;
  --neu-text-muted: #6b7280;
}

/* 凸起效果 */
.neu-raised {
  background: var(--neu-bg);
  border-radius: 12px;
  box-shadow:
    8px 8px 16px var(--neu-shadow-dark),
    -8px -8px 16px var(--neu-shadow-light);
}

.neu-raised-sm {
  box-shadow:
    4px 4px 8px var(--neu-shadow-dark),
    -4px -4px 8px var(--neu-shadow-light);
}

/* 凹陷效果 */
.neu-pressed {
  background: var(--neu-bg);
  border-radius: 12px;
  box-shadow:
    inset 8px 8px 16px var(--neu-shadow-dark),
    inset -8px -8px 16px var(--neu-shadow-light);
}

.neu-pressed-sm {
  box-shadow:
    inset 4px 4px 8px var(--neu-shadow-dark),
    inset -4px -4px 8px var(--neu-shadow-light);
}

/* 悬停效果 */
.neu-hover:hover {
  box-shadow:
    4px 4px 8px var(--neu-shadow-dark),
    -4px -4px 8px var(--neu-shadow-light);
}

/* 激活效果 */
.neu-active:active {
  box-shadow:
    inset 4px 4px 8px var(--neu-shadow-dark),
    inset -4px -4px 8px var(--neu-shadow-light);
}

/* 圆形元素 */
.neu-circle {
  border-radius: 50%;
}
@keyframes neumorphism-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.neumorphism-card {
  position: relative;
  overflow: hidden;
}

.neumorphism-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(224, 229, 236, 0.05), transparent);
  pointer-events: none;
}

.neumorphism-card:hover::before {
  opacity: 1;
}

.neumorphism-gradient {
  background: linear-gradient(135deg, #e0e5ec, #6d5dfc);
}

.neumorphism-gradient-text {
  background: linear-gradient(135deg, #e0e5ec, #6d5dfc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.neumorphism-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(224, 229, 236, 0.08);
}

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

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

{
  "border": {
    "width": "border-0",
    "color": "border-transparent",
    "radius": "rounded-xl",
    "style": "border-none"
  },
  "shadow": {
    "sm": "shadow-[4px_4px_8px_#b8bcc2,-4px_-4px_8px_#ffffff]",
    "md": "shadow-[6px_6px_12px_#b8bcc2,-6px_-6px_12px_#ffffff] md:shadow-[8px_8px_16px_#b8bcc2,-8px_-8px_16px_#ffffff]",
    "lg": "shadow-[8px_8px_16px_#b8bcc2,-8px_-8px_16px_#ffffff] md:shadow-[12px_12px_24px_#b8bcc2,-12px_-12px_24px_#ffffff]",
    "none": "shadow-none",
    "hover": "hover:shadow-[4px_4px_8px_#b8bcc2,-4px_-4px_8px_#ffffff]",
    "focus": "focus:shadow-[6px_6px_12px_#b8bcc2,-6px_-6px_12px_#ffffff]",
    "colored": {
      "pressed": "shadow-[inset_4px_4px_8px_#b8bcc2,inset_-4px_-4px_8px_#ffffff]",
      "pressedLg": "shadow-[inset_8px_8px_16px_#b8bcc2,inset_-8px_-8px_16px_#ffffff]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-200",
    "active": "active:shadow-[inset_4px_4px_8px_#b8bcc2,inset_-4px_-4px_8px_#ffffff]",
    "hoverScale": "hover:scale-[0.98]"
  },
  "typography": {
    "heading": "font-semibold text-gray-800",
    "body": "text-gray-600",
    "mono": "font-mono text-gray-700",
    "sizes": {
      "hero": "text-4xl md:text-6xl",
      "h1": "text-3xl md:text-4xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-12 md:py-20",
    "container": "px-6 md:px-8",
    "card": "p-6 md:p-8",
    "gap": {
      "sm": "gap-3 md:gap-4",
      "md": "gap-4 md:gap-6",
      "lg": "gap-6 md:gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#e0e5ec]",
      "secondary": "bg-[#f0f0f3]",
      "accent": [
        "bg-[#6d5dfc]",
        "bg-[#ff6b6b]",
        "bg-[#4ecdc4]",
        "bg-[#ffe66d]"
      ]
    },
    "text": {
      "primary": "text-gray-800",
      "secondary": "text-gray-600",
      "muted": "text-gray-400"
    },
    "button": {
      "primary": "bg-[#6d5dfc] text-white",
      "secondary": "bg-[#e0e5ec] text-gray-700"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-none",
      "rounded-sm",
      "shadow-sm",
      "shadow",
      "shadow-md",
      "shadow-lg",
      "shadow-xl",
      "shadow-2xl",
      "bg-black",
      "bg-white",
      "bg-gray-900",
      "bg-gray-950",
      "border-2",
      "border-4",
      "border-8",
      "border",
      "bg-gradient-to-r",
      "bg-gradient-to-l",
      "bg-gradient-to-t",
      "bg-gradient-to-b",
      "text-black",
      "text-white"
    ],
    "patterns": [
      "^rounded-none",
      "^shadow-(?!\\[|none)",
      "^bg-gradient-",
      "^border-[248]",
      "^bg-black",
      "^bg-white$"
    ],
    "reasons": {
      "rounded-none": "Neumorphism requires rounded corners (rounded-xl or rounded-2xl)",
      "shadow-lg": "Neumorphism uses dual-shadow system, not standard shadows",
      "bg-white": "Neumorphism uses light gray backgrounds (#e0e5ec), not pure white",
      "bg-black": "Neumorphism uses light gray backgrounds, not black",
      "border-2": "Neumorphism avoids visible borders, shadows create separation",
      "bg-gradient-to-r": "Neumorphism uses solid colors, no gradients"
    }
  },
  "required": {
    "button": [
      "bg-[#e0e5ec]",
      "rounded-xl",
      "shadow-[6px_6px_12px_#b8bcc2,-6px_-6px_12px_#ffffff]",
      "hover:shadow-[4px_4px_8px_#b8bcc2,-4px_-4px_8px_#ffffff]",
      "active:shadow-[inset_4px_4px_8px_#b8bcc2,inset_-4px_-4px_8px_#ffffff]",
      "transition-all duration-200"
    ],
    "card": [
      "bg-[#e0e5ec]",
      "rounded-2xl",
      "shadow-[8px_8px_16px_#b8bcc2,-8px_-8px_16px_#ffffff]"
    ],
    "input": [
      "bg-[#e0e5ec]",
      "rounded-xl",
      "shadow-[inset_4px_4px_8px_#b8bcc2,inset_-4px_-4px_8px_#ffffff]",
      "focus:shadow-[inset_6px_6px_12px_#b8bcc2,inset_-6px_-6px_12px_#ffffff]",
      "focus:outline-none",
      "placeholder:text-gray-400",
      "transition-shadow duration-200"
    ]
  }
}