---
description: Dark theme design token system — enforces consistent color usage across all UI
globs: "**/*.tsx,**/*.css"
alwaysApply: false
---

# Design System: Dark Theme Tokens

This project uses a unified dark theme. All colors come from semantic tokens defined in `globals.css` via Tailwind v4 `@theme`.

## Token Map

| Token | Tailwind Class | Hex | Usage |
|-------|---------------|-----|-------|
| background | `bg-background` | #030712 | Page-level backgrounds |
| surface | `bg-surface` | #111827 | Cards, modals, inputs, panels |
| elevated | `bg-elevated` | #1f2937 | Hover states, secondary buttons, nested containers |
| border | `ring-border` / `bg-border` | #1f2937 | Borders, dividers |
| subtle | `ring-subtle` / `bg-subtle` | #374151 | Secondary borders, hover-next-level |
| foreground | `text-foreground` | #f3f4f6 | Primary text, input text |
| muted | `text-muted` | #6b7280 | Secondary text, labels, placeholders emphasis |
| dim | `text-dim` | #4b5563 | Tertiary text, timestamps, divider labels |
| accent | `bg-accent` | #10b981 | Primary CTA, active indicators |
| accent-hover | `bg-accent-hover` | #059669 | Accent hover state |

## Mandatory Rules

1. **NEVER use `bg-white`** for cards, modals, or page backgrounds. Use `bg-surface` or `bg-elevated`.
2. **NEVER use `text-zinc-*` or `text-gray-*` for standard text.** Use `text-foreground`, `text-muted`, or `text-dim`.
3. **NEVER use `bg-gray-950/900/800`** — use `bg-background`, `bg-surface`, `bg-elevated` respectively.
4. **NEVER use `ring-gray-*` / `border-gray-*`** — use `ring-border` or `ring-subtle`.
5. **Light-on-dark badges**: use `bg-{color}-500/10..15` + `text-{color}-400` (e.g. `bg-amber-500/10 text-amber-400`).
6. **Inputs**: `bg-surface ring-1 ring-border text-foreground placeholder:text-dim focus:ring-2 focus:ring-{accent}/50`.

## Button Color Hierarchy

Buttons follow a strict 4-tier color system:

| Tier | Color | When to use | Example |
|------|-------|-------------|---------|
| **System CTA** | `bg-accent` | Login, join room, navigate, share, save — any universal primary action | "导航过去", "登录", "加入房间" |
| **Mode Accent** | Orange gradient (Panic) / `bg-purple-600` (BlindBox) | The ONE primary CTA of each mode only | "创建新房间", "提交想法" |
| **Dramatic** | `from-red-600 to-rose-500` | Irreversible, high-ceremony actions only | "开启周末盲盒（绝不反悔）" |
| **Destructive** | `bg-rose-500` or `bg-amber-500` | Leave, kick, end session | "退出房间", "踢出" |
| **Secondary** | `bg-surface` or `bg-elevated` + `ring-1 ring-border` | Cancel, close, alternative actions | "继续滑卡", "换一批店" |

Rules:
- System-level actions ALWAYS use `bg-accent`, never mode-specific colors.
- Mode accent colors are ONLY for the core action of that mode, not for navigation or system actions within the mode.
- Never invent new CTA colors outside this hierarchy.

## Exceptions

- Image overlays and swipe overlays may use `bg-black/*` or `bg-white/*` for translucency on photos.
- Filter pills/tags in Panic mode use `bg-orange-500` for active state — these are toggles, not CTA buttons.