暗黑模式

STYLE: Dark Mode
TYPE: Professional dark interface design

MUST USE:
- Dark backgrounds: bg-slate-900, bg-gray-900, bg-[#0f172a]
- Card backgrounds: bg-slate-800/50 (semi-transparent) at rest, bg-slate-800 on hover
- Low contrast borders: border-slate-700 at rest, border-slate-500 on hover (border illumination)
- Text hierarchy: text-slate-100 (primary), text-slate-400 (secondary); secondary brightens to group-hover:text-slate-300
- Saturated accent colors: blue-500, green-500
- Inset top-edge glow on buttons: shadow-[inset_0_1px_0_rgba(255,255,255,0.15)]
- Hover states: hover:bg-slate-800, hover:bg-white/5
- Standard rounded corners: rounded-lg, rounded-xl

MUST AVOID:
- Pure white text (too harsh)
- High contrast borders
- Pure black background (#000000)
- Dark text on dark backgrounds
- Too many highlight colors
- Light-colored shadows (light shadows invisible on dark backgrounds)
- Buttons without active:scale-[0.98] (no tactile confirmation)
- focus:ring without focus:ring-offset-slate-900 (ring invisible on dark background)

COLOR HIERARCHY:
- Background: slate-900 (#0f172a)
- Surface: slate-800/50 → slate-800 on hover
- Border: slate-700 → slate-500 on hover
- Text primary: slate-100 → white on group-hover
- Text secondary: slate-400 → slate-300 on group-hover
- Accent: blue-500, green-500

TYPOGRAPHY:
- Headings: font-semibold text-slate-100
- Body: text-slate-300 or text-slate-400

## Animation & Interaction Rules

- Illumination Physics: On hover, borders brighten from slate-700 to slate-500 (hover:border-slate-500). This simulates a nearby light source illuminating the card's edge — NOT a background change. Combined with hover:bg-slate-800 (surface rises slightly), the effect is of a surface catching light.
- Text Light-Up: Secondary text (text-slate-400) transitions to group-hover:text-slate-300. Title text (text-slate-200) to group-hover:text-white. Use transition-colors duration-200. The card must use the group class.
- Inset Glow Button: Primary buttons use shadow-[inset_0_1px_0_rgba(255,255,255,0.15)] at rest (top edge highlight simulating overhead light). On hover: shadow-[inset_0_1px_0_rgba(255,255,255,0.2),0_0_10px_rgba(59,130,246,0.3)] — glow intensifies and bleeds outward. On active: shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] — inset depression shadow simulates the button being physically pressed down.
- Tactile Confirmation: ALL buttons must use active:scale-[0.98]. The 2% scale reduction is the minimum signal that a press occurred. Without it, a dark button feels completely unresponsive.
- Focus Ring Visibility: ALWAYS pair focus:ring-2 with focus:ring-offset-2 focus:ring-offset-slate-900. Without ring-offset-slate-900, the ring merges with the dark background and becomes invisible — violating WCAG 2.1 AA.
- Card Elevation: hover:-translate-y-0.5 + hover:shadow-[0_8px_30px_rgba(0,0,0,0.5)] — the deep dark shadow reinforces the dark environment. Never use light-colored shadows on dark backgrounds.
- Easing: duration-200 ease-out for buttons and interactive controls. duration-300 ease-out for card-level transitions. Never exceed duration-300.

## Self-Check

After generating code, verify:
1. All buttons have active:scale-[0.98]
2. All focusable elements have focus:ring-2 focus:ring-{color}-500 focus:ring-offset-2 focus:ring-offset-slate-900
3. Cards use group class; text uses group-hover:text-* for light-up
4. Card hover: border brightens (hover:border-slate-500) + bg lightens (hover:bg-slate-800) + hover:-translate-y-0.5
5. Button shadows use inset for glow, deep dark for elevation
6. No light-colored shadows anywhere

/* Dark Mode Global Styles */
@layer base {
  body {
    @apply bg-slate-900 text-slate-100 antialiased;
  }

  h1, h2, h3, h4 {
    @apply font-semibold text-slate-100;
  }

  ::selection {
    @apply bg-blue-600 text-white;
  }
}

/* Subtle glow for focus states */
.dark-focus-glow:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}
/* Dark Mode Design Tokens */
:root {
  --dark-mode-primary: #3b82f6;
  --dark-mode-secondary: #0f172a;
  --dark-mode-accent: #22c55e;
  --dark-mode-glow: rgba(59, 130, 246, 0.3);
}

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

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

.dark-mode-card {
  position: relative;
  overflow: hidden;
}

.dark-mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), transparent);
  pointer-events: none;
}

.dark-mode-card:hover::before {
  opacity: 1;
}

.dark-mode-gradient {
  background: linear-gradient(135deg, #3b82f6, #22c55e);
}

.dark-mode-gradient-text {
  background: linear-gradient(135deg, #3b82f6, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark-mode-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(59, 130, 246, 0.08);
}

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

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

{
  "border": {
    "width": "border",
    "color": "border-slate-700",
    "radius": "rounded-lg",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-none",
    "md": "shadow-none",
    "lg": "shadow-lg shadow-black/20",
    "none": "shadow-none",
    "hover": "shadow-none",
    "focus": "ring-1 ring-blue-500",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-colors duration-200",
    "active": "active:scale-95",
    "hoverOpacity": "hover:bg-slate-700"
  },
  "typography": {
    "heading": "font-semibold",
    "body": "font-normal",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-5xl lg: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-16 lg:py-20",
    "container": "px-4 md:px-6 lg:px-8",
    "card": "p-6",
    "gap": {
      "sm": "gap-4",
      "md": "gap-6",
      "lg": "gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-slate-900",
      "secondary": "bg-slate-800",
      "accent": [
        "bg-blue-600",
        "bg-green-500",
        "bg-amber-500"
      ]
    },
    "text": {
      "primary": "text-slate-100",
      "secondary": "text-slate-300",
      "muted": "text-slate-400"
    },
    "button": {
      "primary": "bg-blue-600 text-white hover:bg-blue-500",
      "secondary": "bg-slate-700 text-slate-200 hover:bg-slate-600",
      "danger": "bg-red-600/20 text-red-400 border border-red-500/30"
    }
  },
  "forbidden": {
    "classes": [
      "text-white",
      "bg-white",
      "bg-gray-50",
      "border-black",
      "shadow-white",
      "bg-black"
    ],
    "patterns": [
      "^text-white$",
      "^bg-white",
      "^bg-gray-[1-3]00",
      "^bg-black$"
    ],
    "reasons": {
      "text-white": "Use text-slate-100 for softer contrast",
      "bg-white": "Dark mode uses dark backgrounds",
      "bg-black": "Use bg-slate-900 for better depth"
    }
  },
  "required": {
    "button": [
      "px-4 py-2",
      "rounded-lg",
      "font-medium",
      "transition-colors duration-200"
    ],
    "card": [
      "bg-slate-800",
      "border border-slate-700",
      "rounded-xl"
    ],
    "input": [
      "bg-slate-800",
      "border border-slate-700",
      "rounded-lg",
      "text-slate-100",
      "placeholder:text-slate-500",
      "focus:border-blue-500",
      "focus:ring-1 focus:ring-blue-500"
    ]
  }
}