巫术核心

STYLE: Witchcore
TYPE: Occult mystical interface

MUST USE:
- Dark backgrounds: bg-[#0d0b14] or bg-[#4a1942]
- Gold rune text: text-[#c9a74e]
- Text glow: style={{textShadow: '0 0 10px rgba(201,167,78,0.3)'}}
- Glowing gold borders: border border-[#c9a74e]/30
- Serif fonts: font-serif for all text
- uppercase tracking-wider for labels
- Amethyst secondary: text-[#7b68ae]
- Herb green accent: text-[#3d8b6e]

MUST AVOID:
- Light/white backgrounds
- Neon/high-saturation modern colors
- Sans-serif fonts for headings
- Regular shadows (shadow-md)
- Rounded/cute elements (rounded-full)
- Bright cheerful gradients

COLOR RULES:
- Primary: Mystic purple (#4a1942)
- Secondary: Midnight (#0d0b14)
- Gold rune: #c9a74e
- Amethyst: #7b68ae
- Herb green: #3d8b6e

SPECIAL EFFECTS:
- Stardust particle overlays
- Rune glow pulsing animation
- Moon phase symbols as decorative elements
- Radial gradient for mystical light sources

ANIMATION & INTERACTION RULES:
- Ritual Levitation: Cards and primary elements must NOT bounce quickly. Use extremely slow upfloat (hover:-translate-y-2) with duration-1000 ease-in-out. Simulate the feeling of ritual levitation, not a spring.
- Occult Glow: On hover, the gold rune glow (text-shadow or box-shadow using #c9a74e) must expand and pulse as if imbued with magic. Use drop-shadow CSS filter on headings for text glow enhancement.
- Shadow Engulf: On dark backgrounds (#0d0b14), hover should expand a deep purple/amethyst outer glow outward, simulating dark matter or mystical fog spreading.
- Talisman Press: On :active, cancel the glow and add a deep inset shadow (active:shadow-[inset_0_0_20px_rgba(0,0,0,0.8)]) plus slight downward translate (active:translate-y-1), simulating pressing a heavy talisman or ritual object.

/* Witchcore Global Styles */
@layer base {
  body {
    @apply bg-[#0d0b14] text-[#c9a74e]/80 antialiased;
    font-family: Georgia, 'Times New Roman', serif;
  }

  h1, h2, h3 {
    text-shadow: 0 0 12px rgba(201, 167, 78, 0.3);
  }

  ::selection {
    @apply bg-[#4a1942] text-[#c9a74e];
  }
}

/* Stardust background */
.witchcore-stardust {
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(201, 167, 78, 0.3), transparent),
    radial-gradient(1px 1px at 30% 60%, rgba(123, 104, 174, 0.2), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(201, 167, 78, 0.2), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(61, 139, 110, 0.2), transparent);
}

@keyframes rune-pulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(201, 167, 78, 0.4); }
  50% { opacity: 0.8; text-shadow: 0 0 16px rgba(201, 167, 78, 0.6); }
}
/* Witchcore Design Tokens */
:root {
  --witchcore-primary: #4a1942;
  --witchcore-secondary: #0d0b14;
  --witchcore-accent: #c9a74e;
  --witchcore-glow: rgba(74, 25, 66, 0.3);
}

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

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

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

.witchcore-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(74, 25, 66, 0.08);
}

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

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

{
  "border": {
    "width": "border",
    "color": "border-[#c9a74e]/30",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_2px_8px_rgba(13,11,20,0.6)]",
    "md": "shadow-[0_4px_16px_rgba(13,11,20,0.7)]",
    "lg": "shadow-[0_8px_30px_rgba(13,11,20,0.8)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_0_25px_rgba(201,167,78,0.2)]",
    "focus": "focus:shadow-[0_0_15px_rgba(201,167,78,0.15)]",
    "colored": {
      "gold": "shadow-[0_0_20px_rgba(201,167,78,0.3)]",
      "amethyst": "shadow-[0_0_20px_rgba(123,104,174,0.3)]",
      "herb": "shadow-[0_0_20px_rgba(61,139,110,0.3)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-500 ease-in-out",
    "active": "active:scale-95",
    "hoverScale": "hover:scale-[1.01]"
  },
  "typography": {
    "heading": "font-serif tracking-wider uppercase",
    "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-8",
    "gap": {
      "sm": "gap-4",
      "md": "gap-6",
      "lg": "gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#0d0b14]",
      "secondary": "bg-[#4a1942]",
      "accent": [
        "bg-[#c9a74e]",
        "bg-[#7b68ae]",
        "bg-[#3d8b6e]"
      ]
    },
    "text": {
      "primary": "text-[#c9a74e]",
      "secondary": "text-[#7b68ae]",
      "muted": "text-[#c9a74e]/50"
    },
    "button": {
      "primary": "bg-[#4a1942] text-[#c9a74e] border border-[#c9a74e]/50",
      "secondary": "bg-transparent text-[#7b68ae] border border-[#7b68ae]/50",
      "danger": "bg-[#8b1a1a] text-[#c9a74e]"
    }
  },
  "forbidden": {
    "classes": [
      "bg-white",
      "bg-gray-50",
      "bg-gray-100",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "rounded-full",
      "rounded-2xl",
      "rounded-3xl",
      "text-cyan-",
      "text-lime-",
      "text-pink-",
      "bg-cyan-",
      "bg-lime-"
    ],
    "patterns": [
      "^bg-(?:white|gray-[1-3])",
      "^shadow-(?!\\[|none)",
      "^rounded-(?:full|2xl|3xl)",
      "^text-(?:cyan|lime|pink)-",
      "^bg-(?:cyan|lime|pink)-"
    ],
    "reasons": {
      "bg-white": "Witchcore uses dark backgrounds only",
      "shadow-md": "Use glowing shadows: shadow-[0_0_20px_rgba(201,167,78,0.3)]",
      "rounded-full": "Witchcore uses sharp edges, not rounded shapes",
      "text-cyan-": "Use gold (#c9a74e) or amethyst (#7b68ae) instead of neon colors"
    }
  },
  "required": {
    "button": [
      "px-8 py-3",
      "font-serif",
      "uppercase tracking-widest",
      "transition-all duration-500"
    ],
    "card": [
      "bg-[#0d0b14]/90",
      "border border-[#c9a74e]/30"
    ],
    "input": [
      "bg-[#0d0b14]/80",
      "border border-[#c9a74e]/20",
      "text-[#c9a74e]",
      "font-serif",
      "focus:border-[#c9a74e]/60",
      "focus:outline-none"
    ]
  }
}