蒸汽朋克

STYLE: Steampunk
TYPE: Victorian industrial machinery aesthetic

MUST USE:
- Dark brown background: bg-[#2a1f15] or bg-[#3d2b1f]
- Brass color: text-[#b5a642], bg-[#b5a642]
- Copper color: text-[#b87333], border-[#b87333]
- Cream text: text-[#f5f0e1]
- Metallic gradients: bg-gradient-to-b from-[#b5a642] to-[#8a7d32]
- Brass glow shadows: shadow-[0_0_15px_rgba(181,166,66,0.3)]
- font-serif for Victorian feel
- uppercase tracking-wider for labels
- Rivet decorations: small gradient circles at corners
- Ornate borders: border-2 with copper/brass colors

MUST AVOID:
- White/light backgrounds
- Neon or fluorescent colors
- Flat design without texture
- Modern sans-serif fonts for headings
- Large rounded corners (rounded-2xl+)
- Cold blue/purple color schemes

COLOR RULES:
- Primary: Brass (#b5a642)
- Secondary: Copper (#b87333)
- Background: Dark Brown (#2a1f15, #3d2b1f)
- Text: Cream (#f5f0e1)
- Iron accent: (#4a4a4a)

SPECIAL EFFECTS:
- Corner rivet decorations (small brass circles)
- Metallic inset shadows for depth
- Warm glow on hover interactions
- Gradient overlays for metal texture

## Animation & Interaction Rules

- Clockwork Grind: 动效节奏短促且线性，模拟齿轮和杠杆的机械咬合，不做柔软回弹。
- Steam Release: active 时执行干脆下沉并压平阴影，释放时恢复黄铜高光，形成短促阀门反馈。
- Rivet Glint: 铆钉使用滑动渐变制造慢速反光流转，强调金属工艺细节。
- Brass Oxidation: hover 时深棕底色略加深，黄铜描边与文本同步提亮，拉开材质对比。

/* Steampunk Global Styles */
@layer base {
  body {
    @apply bg-[#2a1f15] text-[#f5f0e1] antialiased;
  }

  h1, h2, h3 {
    font-family: Georgia, 'Times New Roman', serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  ::selection {
    @apply bg-[#b5a642] text-[#2a1f15];
  }
}

@keyframes gear-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Steampunk Design Tokens */
:root {
  --steampunk-primary: #b5a642;
  --steampunk-secondary: #3d2b1f;
  --steampunk-accent: #b87333;
  --steampunk-glow: rgba(181, 166, 66, 0.3);
}

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

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

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

.steampunk-gradient {
  background: linear-gradient(135deg, #b5a642, #b87333);
}

.steampunk-gradient-text {
  background: linear-gradient(135deg, #b5a642, #b87333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.steampunk-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(181, 166, 66, 0.08);
}

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

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

{
  "border": {
    "width": "border-2",
    "color": "border-[#b87333]/40",
    "radius": "rounded",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_0_8px_rgba(181,166,66,0.2)]",
    "md": "shadow-[0_0_15px_rgba(181,166,66,0.3)]",
    "lg": "shadow-[0_0_25px_rgba(181,166,66,0.4)]",
    "none": "shadow-none",
    "hover": "shadow-[0_0_20px_rgba(184,115,51,0.4)]",
    "focus": "shadow-[0_0_12px_rgba(181,166,66,0.25)]",
    "colored": {
      "brass": "shadow-[0_0_15px_rgba(181,166,66,0.3)]",
      "copper": "shadow-[0_0_15px_rgba(184,115,51,0.3)]",
      "iron": "shadow-[0_2px_8px_rgba(0,0,0,0.4)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-300",
    "active": "active:scale-95",
    "hoverScale": "hover:shadow-[0_0_25px_rgba(181,166,66,0.5)]"
  },
  "typography": {
    "heading": "font-serif font-bold",
    "body": "font-serif",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-6xl lg:text-8xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs"
    }
  },
  "spacing": {
    "section": "py-16 md:py-24",
    "container": "px-4 md:px-8",
    "card": "p-6",
    "gap": {
      "sm": "gap-4",
      "md": "gap-6",
      "lg": "gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#2a1f15]",
      "secondary": "bg-[#3d2b1f]",
      "accent": [
        "bg-[#b5a642]",
        "bg-[#b87333]",
        "bg-[#4a4a4a]"
      ]
    },
    "text": {
      "primary": "text-[#f5f0e1]",
      "secondary": "text-[#b5a642]",
      "muted": "text-[#b87333]/70"
    },
    "button": {
      "primary": "bg-gradient-to-b from-[#b5a642] to-[#8a7d32] text-[#2a1f15]",
      "secondary": "bg-transparent text-[#b87333] border-2 border-[#b87333]",
      "danger": "bg-gradient-to-b from-[#8b2500] to-[#5a1800] text-[#f5f0e1] shadow-[0_0_10px_rgba(139,37,0,0.3)]"
    }
  },
  "forbidden": {
    "classes": [
      "bg-white",
      "bg-gray-50",
      "bg-slate-50",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "text-cyan-400",
      "text-fuchsia-500",
      "rounded-2xl",
      "rounded-3xl"
    ],
    "patterns": [
      "^bg-white",
      "^bg-gray-[1-3]",
      "^bg-slate-[1-3]",
      "^shadow-(?!\\[)",
      "^rounded-[23]xl",
      "^text-cyan",
      "^text-fuchsia",
      "^bg-cyan",
      "^bg-fuchsia"
    ],
    "reasons": {
      "bg-white": "Steampunk uses dark brown backgrounds only",
      "shadow-md": "Use warm brass glow shadows: shadow-[0_0_15px_rgba(181,166,66,0.3)]",
      "rounded-2xl": "Keep corners subtle (rounded or rounded-lg max)",
      "text-cyan-400": "Use warm brass/copper tones, not neon colors"
    }
  },
  "required": {
    "button": [
      "px-6 py-3",
      "rounded",
      "font-serif",
      "uppercase tracking-wider",
      "transition-all duration-300"
    ],
    "card": [
      "bg-[#2a1f15]",
      "border-2 border-[#b87333]/40",
      "rounded"
    ],
    "input": [
      "bg-[#2a1f15]",
      "border-2 border-[#b87333]/30",
      "rounded",
      "text-[#f5f0e1]",
      "font-serif",
      "focus:border-[#b5a642]",
      "focus:shadow-[0_0_12px_rgba(181,166,66,0.25)]"
    ]
  }
}