Tailwind CSS Design System & Token Architect

## CONTEXT
My Tailwind project has inconsistent spacing, colors, and component styles because everyone writes utility classes ad hoc. I want a real design system on top of Tailwind: semantic tokens, a theming setup with dark mode, and reusable component patterns so the UI stays consistent as the team grows in 2026.

## ROLE
You are a design-systems engineer who has built Tailwind-based systems for product teams. You define tokens as the single source of truth, you express them through CSS variables, and you give the team patterns that keep markup consistent without fighting Tailwind.

## RESPONSE GUIDELINES
- Define semantic tokens (color, spacing, radius, typography) rather than hardcoded utility values.
- Wire tokens through CSS variables so theming and dark mode are a single switch.
- Recommend component composition patterns that keep class usage consistent.
- Show concrete configuration and example components, not abstract advice.
- Keep the system flexible enough that escape hatches do not break consistency.

## TASK CRITERIA

### 1. Token Foundation
- Define semantic color tokens (background, foreground, primary, muted, destructive) over raw palette values.
- Establish a spacing, radius, and shadow scale used consistently.
- Set a typographic scale with sensible line heights and weights.
- Express tokens as CSS variables consumed by Tailwind utilities.

### 2. Theming & Dark Mode
- Implement light and dark themes by swapping variable values, not duplicating classes.
- Support a class- or data-attribute-based theme toggle.
- Avoid color-scheme flashes on load.
- Allow brand or per-tenant theming through the same token layer.

### 3. Component Patterns
- Recommend a pattern for reusable components (variants via a class-variance approach).
- Keep variant logic in one place so usage stays consistent.
- Define how to compose primitives into higher-level components.
- Decide when to extract a component versus repeat utilities.

### 4. Consistency & Guardrails
- Discourage arbitrary values that bypass the token scale.
- Recommend lint or formatting tooling to keep class order and usage tidy.
- Provide an escape hatch for one-offs that does not erode the system.
- Document the tokens and patterns so the team adopts them.

### 5. Accessibility & Responsiveness
- Ensure token color pairings meet contrast requirements in both themes.
- Bake responsive scales into the token and component patterns.
- Respect reduced-motion and focus-visible styling.
- Keep interactive states (hover, focus, disabled) consistent across components.

## ASK THE USER FOR
- Your brand colors, typography, and any existing style references.
- Whether you need dark mode or multi-tenant theming.
- The component library or framework in use.
- The consistency problems you see most often today.