复古怀旧风

STYLE: Retro Vintage
TYPE: Nostalgic, classic design aesthetic

MUST USE:
- Vintage color palette: sepia, amber, brown tones
- Paper texture or aged effects on backgrounds
- Serif fonts or vintage sans-serif
- Thick borders: border-2 or border-4
- Decorative elements (corner ornaments, dividers)
- Old-style typography: uppercase, tracking-widest
- Image filters: sepia, brightness-90

MUST AVOID:
- Modern gradients
- Neon/high saturation colors
- Minimalist/flat modern design
- Very rounded corners
- Glass morphism effects
- Heavy animations

COLOR PALETTE:
- Primary: Saddle brown (#8b4513)
- Background: Cream/Parchment (#f5e6d3)
- Accent: Rust red (#c94c4c), Forest green (#2e4a3f)

TYPOGRAPHY:
- Headings: font-serif, uppercase option
- Labels: text-xs uppercase tracking-[0.2em]
- Body: font-serif, relaxed leading

## Animation & Interaction Rules

- Antique Stillness: Absolutely zero `scale` or `translate-y` motion. Old parchment lies flat on the table — it does not float, lift, or bounce. Forbidden: `hover:-translate-y-*`, `hover:scale-*`.
- Ink & Oxidation: Hover subtly darkens the background (`hover:bg-[#eedbc2]`) and deepens text color (`group-hover:text-[#5c2e0a]`). This simulates paper yellowing and ink darkening over time — not a modern color swap.
- Slow Passage of Time: All transitions must use `duration-700 ease-in-out` or longer. Historical materials change slowly. Never use `duration-150` or faster.
- Corner Reveal: Decorative corner ornaments use `opacity-30 group-hover:opacity-100 transition-opacity duration-700` — as if readers discover hidden details by leaning in closely.

/* Retro Vintage Global Styles */
@layer base {
  body {
    @apply bg-[#f5e6d3] text-[#8b4513] antialiased;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  }

  h1, h2, h3, h4 {
    @apply font-serif;
  }
}

/* Decorative divider */
.retro-divider {
  @apply flex items-center gap-4;
}
.retro-divider::before,
.retro-divider::after {
  content: '';
  @apply flex-1 h-px bg-[#8b4513]/30;
}
/* Retro Vintage Design Tokens */
:root {
  --retro-vintage-primary: #8b4513;
  --retro-vintage-secondary: #f5e6d3;
  --retro-vintage-accent: #c94c4c;
  --retro-vintage-glow: rgba(139, 69, 19, 0.3);
}

@keyframes retro-vintage-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.retro-vintage-gradient {
  background: linear-gradient(135deg, #8b4513, #c94c4c);
}

.retro-vintage-gradient-text {
  background: linear-gradient(135deg, #8b4513, #c94c4c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.retro-vintage-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(139, 69, 19, 0.08);
}

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

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

.retro-vintage-focus { outline: 2px solid var(--retro-vintage-primary, currentColor); outline-offset: 2px; }

/* Responsive utilities */
@media (prefers-reduced-motion: reduce) {
  .retro-vintage-animate-in {
    animation: none;
  }
}

@media (min-width: 768px) {
  .retro-vintage-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
}

/* Print styles */
@media print {
  .retro-vintage-gradient,
  .retro-vintage-frosted {
    background: none;
    backdrop-filter: none;
  }
}

{
  "border": {
    "width": "border-2",
    "color": "border-[#8b4513]",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_2px_4px_rgba(139,69,19,0.1)]",
    "md": "shadow-[0_4px_8px_rgba(139,69,19,0.15)]",
    "lg": "shadow-[0_8px_16px_rgba(139,69,19,0.2)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_4px_12px_rgba(139,69,19,0.2)]",
    "focus": "focus:shadow-[0_2px_8px_rgba(139,69,19,0.15)]",
    "colored": {
      "brown": "shadow-[0_4px_12px_rgba(139,69,19,0.2)]",
      "rust": "shadow-[0_4px_12px_rgba(201,76,76,0.2)]"
    }
  },
  "interaction": {
    "transition": "transition-colors duration-200",
    "active": "active:opacity-75",
    "hoverOpacity": "hover:opacity-85"
  },
  "typography": {
    "heading": "font-serif uppercase tracking-widest",
    "body": "font-serif",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-6xl lg:text-7xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-lg md:text-xl",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-14 md:py-24 lg:py-32",
    "container": "px-6 md:px-10 lg:px-16",
    "card": "p-6 md:p-8",
    "gap": {
      "sm": "gap-3 md:gap-5",
      "md": "gap-5 md:gap-8",
      "lg": "gap-8 md:gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#f5e6d3]",
      "secondary": "bg-[#e8d5c0]",
      "accent": [
        "bg-[#c94c4c]",
        "bg-[#2e4a3f]",
        "bg-[#d4a373]"
      ]
    },
    "text": {
      "primary": "text-[#8b4513]",
      "secondary": "text-[#f5e6d3]",
      "muted": "text-[#8b4513]/60"
    },
    "button": {
      "primary": "bg-[#8b4513] text-[#f5e6d3]",
      "secondary": "bg-transparent text-[#8b4513] border-2 border-[#8b4513]",
      "danger": "bg-[#c94c4c] text-[#f5e6d3]"
    }
  },
  "forbidden": {
    "classes": [
      "bg-gradient-to-r",
      "bg-gradient-to-b",
      "bg-gradient-to-l",
      "rounded-xl",
      "rounded-2xl",
      "rounded-full",
      "bg-[#ff00ff]",
      "bg-[#00ffff]",
      "bg-[#ff71ce]",
      "text-[#ff00ff]",
      "text-[#00ffff]",
      "shadow-[0_0_",
      "backdrop-blur",
      "font-sans",
      "bg-white"
    ],
    "patterns": [
      "^bg-gradient-",
      "^rounded-(?:xl|2xl|3xl|full)$",
      "^bg-(?:pink|cyan|violet|fuchsia)-",
      "^text-(?:pink|cyan|violet|fuchsia)-",
      "^shadow-\\[0_0_",
      "^backdrop-blur"
    ],
    "reasons": {
      "bg-gradient-to-r": "Retro Vintage uses solid vintage tones, not modern gradients",
      "rounded-xl": "Retro Vintage uses minimal rounding to maintain classic feel",
      "bg-[#ff00ff]": "Retro Vintage uses warm brown/cream palette, not neon colors",
      "shadow-[0_0_": "Retro Vintage avoids neon glow shadows",
      "font-sans": "Retro Vintage uses serif typography (font-serif)",
      "bg-white": "Retro Vintage uses cream/parchment (#f5e6d3), not pure white"
    }
  },
  "required": {
    "button": [
      "font-serif uppercase tracking-widest",
      "transition-colors duration-200"
    ],
    "card": [
      "border-2 border-[#8b4513]",
      "bg-[#f5e6d3]",
      "font-serif"
    ],
    "input": [
      "border-2 border-[#8b4513]",
      "bg-transparent",
      "text-[#8b4513]",
      "font-serif",
      "focus:outline-none",
      "focus:bg-[#8b4513]/5",
      "transition-colors duration-200"
    ]
  }
}