feat(tokens): add saturated surface tokens for danger/success/warning/info

[talissoncosta]

Thanks for submitting a PR! Please check the boxes below:

• I have read the Contributing Guide.
• I have added information to `docs/` if required so people know about the feature.
• I have filled in the "Changes" section below.
• I have filled in the "How did you test this code" section below.

Changes

TL;DR. Adds 12 saturated surface tokens (4 intents × 3 states) so danger/success/warning/info buttons can use semantic tokens instead of hardcoded hex. Pure additive — no consumers wired up yet.

Why

The token system had asymmetric intent coverage:

Intent	Surface tokens	Gap
action	subtle, muted, base, hover, active	✓ complete
danger	subtle (0.08 α) only	no saturated
success	subtle (0.08 α) only	no saturated
warning	subtle (0.08 α) only	no saturated
info	subtle (0.08 α) only	no saturated

That forced `_variables.scss` to fill the gap with hardcoded hex (`$btn-danger-hover: #cd384d;`) and primitive references (`$btn-success-hover: $success;`), silently bypassing the token system for every saturated intent button.

What's new

12 new tokens using the `Strong` qualifier already in use by `colorBorderStrong`:

```
--color-surface-{intent}-strong # saturated bg
--color-surface-{intent}-strong-hover # hover state
--color-surface-{intent}-strong-active # active state
```

For each of `danger`, `success`, `warning`, `info`. Light theme uses the `{intent}-500/600/700` primitive scale; dark theme shifts one step lighter (`-400/500/600`) for contrast — same pattern `action` already follows.

Why `Strong` instead of other naming

• `colorBorderStrong` already uses this convention in the project — no new word to learn.
• Maps cleanly to mature design systems: GitHub Primer's `emphasis`, Material 3's `error` (vs `errorContainer`), Carbon's `bg` (vs `background`). They all distinguish foreground-saturated from backdrop-subtle.
• Read aloud: "the danger surface, but stronger" — natural.

Why `action` stays without a `Strong` qualifier

The `action` intent's saturated colour is its default `colorSurfaceAction` (no qualifier). Adding a `Strong` qualifier there would be a breaking rename for zero semantic gain. The asymmetry is honest — `action` is the brand's primary surface and the default; other intents are secondary and need explicit qualification.

How did you test this code?

• `npm run generate:tokens` regenerated the four downstream files cleanly (tokens.ts, _tokens.scss, _token-utilities.scss, TokenReference.generated.stories.tsx).
• `git diff --stat` confirms changes are isolated to the 5 token files.
• Pure additive — no existing tokens renamed or removed, no consumer code touched. Visual diff on Chromatic should be zero.
• Phase 1 of a three-PR sequence: this adds the tokens, [Phase 2] migrates _buttons.scss to use them, [Phase 3] extracts a DocsLink component. See investigation document for the full design rationale.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	May 6, 2026 1:05pm
flagsmith-frontend-staging	Ready	Preview, Comment	May 6, 2026 1:05pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	May 6, 2026 1:05pm

[talissoncosta]

Closing in favour of a documented design plan for Button + Link before further code changes. The implementation here was outpacing the architectural decisions — pausing the code, will reopen replacements once the plan is agreed.