霓虹东京

STYLE: Neon Tokyo
TYPE: Urban nightscape interface

MUST USE:
- Dark night sky background: bg-[#0a0a1a]
- Multi-color neon glows (not single-color)
- Primary pink: text-[#ff1493], border-[#ff1493]
- Cyan accent: text-[#00f0ff]
- Warm neon: text-[#ff6b00]
- Purple neon: text-[#bc13fe]
- Glow shadows with color: shadow-[0_0_20px_rgba(255,20,147,0.5)]
- backdrop-blur for glass/reflection effect
- font-bold uppercase tracking-wider for labels
- rounded-sm for subtle edge softness

MUST AVOID:
- Light/white backgrounds
- Low saturation or muted colors
- Regular shadows (shadow-md)
- Serif fonts (except for Japanese decorative text)
- Single-color neon palettes
- Corporate or overly clean layouts

COLOR RULES:
- Neon Pink: #ff1493 (primary)
- Night Sky: #0a0a1a (background)
- Cyan Neon: #00f0ff
- Warm Neon: #ff6b00
- Purple Neon: #bc13fe

DIFFERENCE FROM CYBERPUNK-NEON:
- Warmer, more organic feel
- Multi-color neon mixing (not cyan-dominant)
- Street photography aesthetic, not sci-fi
- Wet reflections, not scan lines

## Animation & Interaction Rules

- Rain-Slicked Reflections: bottom reflection gradients should intensify on hover with higher opacity and mixed-color refraction.
- Signboard Flicker: primary neon headings can use subtle irregular flicker to mimic aging street signage.
- Bleeding Glows: hover state should expand pink/cyan/orange glow layers simultaneously so light bleeds at the edges.
- Damp Atmosphere: transitions stay smooth (duration-300 to 500) to preserve wet-night ambience rather than sharp arcade motion.

/* Neon Tokyo Global Styles */
@layer base {
  body {
    @apply bg-[#0a0a1a] text-white antialiased;
  }

  h1, h2, h3 {
    text-shadow: 0 0 15px rgba(255, 20, 147, 0.4);
  }

  ::selection {
    @apply bg-[#ff1493] text-white;
  }
}

/* Wet street reflection */
.neon-tokyo-reflect {
  position: relative;
}
.neon-tokyo-reflect::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    rgba(255, 20, 147, 0.03) 80%,
    rgba(0, 240, 255, 0.03) 100%
  );
  pointer-events: none;
}

@keyframes neon-flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.6; }
  97% { opacity: 1; }
  98% { opacity: 0.8; }
}
/* Neon Tokyo Design Tokens */
:root {
  --neon-tokyo-primary: #ff1493;
  --neon-tokyo-secondary: #0a0a1a;
  --neon-tokyo-accent: #00f0ff;
  --neon-tokyo-glow: rgba(255, 20, 147, 0.3);
}

.neon-tokyo-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255, 20, 147, 0.08);
}

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

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

.neon-tokyo-hover-lift { transition: transform 0.3s ease; }

.neon-tokyo-hover-lift:hover { transform: translateY(-2px); }

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

{
  "border": {
    "width": "border-2",
    "color": "border-[#ff1493]/30",
    "radius": "rounded-sm",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_0_10px_rgba(255,20,147,0.2)]",
    "md": "shadow-[0_0_15px_rgba(255,20,147,0.3)]",
    "lg": "shadow-[0_0_25px_rgba(255,20,147,0.4)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_0_30px_rgba(255,20,147,0.5)]",
    "focus": "focus:shadow-[0_0_20px_rgba(255,20,147,0.4)]",
    "colored": {
      "pink": "shadow-[0_0_20px_rgba(255,20,147,0.5)]",
      "cyan": "shadow-[0_0_20px_rgba(0,240,255,0.5)]",
      "orange": "shadow-[0_0_20px_rgba(255,107,0,0.5)]",
      "purple": "shadow-[0_0_20px_rgba(188,19,254,0.5)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-300",
    "active": "active:scale-95",
    "hoverScale": "hover:shadow-[0_0_30px_rgba(255,20,147,0.5)]"
  },
  "typography": {
    "heading": "font-bold",
    "body": "font-sans",
    "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-[#0a0a1a]",
      "secondary": "bg-[#0a0a1a]/80",
      "accent": [
        "bg-[#ff1493]",
        "bg-[#00f0ff]",
        "bg-[#ff6b00]",
        "bg-[#bc13fe]"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-[#ff1493]",
      "muted": "text-gray-400"
    },
    "button": {
      "primary": "bg-transparent text-[#ff1493] border-2 border-[#ff1493]",
      "secondary": "bg-[#00f0ff] text-[#0a0a1a]",
      "danger": "bg-red-600 text-white shadow-[0_0_15px_rgba(255,0,0,0.5)]"
    }
  },
  "forbidden": {
    "classes": [
      "bg-white",
      "bg-gray-50",
      "bg-gray-100",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "text-gray-900",
      "rounded-2xl",
      "rounded-3xl"
    ],
    "patterns": [
      "^bg-(?:white|gray-[1-3]|slate-[1-3])",
      "^shadow-(?!\\[|none)",
      "^rounded-(?:2xl|3xl)"
    ],
    "reasons": {
      "bg-white": "Neon Tokyo uses dark night-sky backgrounds only",
      "shadow-md": "Use colored neon glow: shadow-[0_0_20px_rgba(255,20,147,0.5)]",
      "rounded-2xl": "Keep corners minimal (rounded-sm max)"
    }
  },
  "required": {
    "button": [
      "px-6 py-3",
      "font-bold",
      "uppercase tracking-wider",
      "transition-all duration-300",
      "rounded-sm"
    ],
    "card": [
      "bg-[#0a0a1a]/80",
      "backdrop-blur-md",
      "border border-[#ff1493]/30",
      "rounded-sm"
    ],
    "input": [
      "bg-[#0a0a1a]/80",
      "border border-[#ff1493]/30",
      "rounded-sm",
      "text-white",
      "focus:border-[#ff1493]",
      "focus:shadow-[0_0_15px_rgba(255,20,147,0.3)]",
      "focus:outline-none"
    ]
  }
}