Generate a design-token system from a brand direction

Act as a principal design systems engineer who ships tokens to both Figma and production CSS. For a [BRAND/PRODUCT] with this vibe: [ADJECTIVES + any brand colors], generate a complete, production-grade design-token system.

Deliver ALL of the following layers:

**1. Primitive tokens (the raw values):**
- Color ramps (50–950) for primary, neutral, and one accent palette. Explain how you chose the hue — warm primary = approachable, cool = professional.
- Type scale: font families, rem sizes, line-heights, and letter-spacing at each step. Base = 1rem = 16px. Include responsive overrides (scale up by ~1.125× on lg breakpoints).
- Spacing scale on a 4px base (4, 8, 12, 16, 24, 32, 48, 64, 96).
- Radius scale (none, sm, md, lg, full) — note that radius should never exceed half the component height.
- Elevation/shadow scale (xs through xl) with realistic multi-layer box-shadows.
- **Motion tokens**: easing curves (`ease-out` for entrances, `ease-in` for exits, `ease-in-out` for state changes) and a duration scale (instant: 0ms, fast: 100ms, normal: 200ms, slow: 350ms, deliberate: 500ms). Note: anything over 400ms feels sluggish on hover/focus.
- **Breakpoint tokens**: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px) — these become the responsive pivot points for other tokens.

**2. Semantic tokens (the design decisions):**
Alias the primitives with intent-based names. For each, provide light AND dark mode values:
- Surface: `bg/canvas`, `bg/surface`, `bg/raised`, `bg/overlay`
- Text: `text/default`, `text/muted`, `text/inverse`, `text/on-action`
- Border: `border/default`, `border/strong`, `border/focus-ring`
- Action: `action/primary`, `action/primary-hover`, `action/secondary`, `action/destructive`
- Status: `status/success`, `status/warning`, `status/danger`, `status/info` — each with bg, text, and border variants
- **Interaction states**: define a consistent state layer system — `hover` = primary at 8% opacity overlay, `focus` = 2px ring in `border/focus-ring`, `active/pressed` = primary at 12% overlay, `disabled` = 38% opacity + no pointer events. These compound with any component.

**3. Naming convention rationale:**
Briefly argue your naming structure. Semantic names (e.g., `action/primary`) beat component-level names (e.g., `button/bg`) because tokens outlive components. Use `/` separators for Figma Variable groups, `--` for CSS custom properties.

**4. Accessibility audit:**
Confirm every text-on-surface combination meets WCAG AA (4.5:1 for body, 3:1 for large text). Flag any pair that fails and provide the fix.

**5. Output formats:**
- JSON in W3C Design Tokens Community Group format.
- A CSS custom properties snippet ready to paste into `:root` / `[data-theme='dark']`.
- A mapping table showing how to wire these into Figma Variables (collection → group → mode structure) so tokens stay in sync between design and code.
- A Tailwind `theme.extend` config snippet that references the CSS variables.

Do NOT just list values — explain the 'why' behind key choices (e.g., why neutral-900 is not pure black, why the spacing scale skips 20).