improvement(docs): inherit the platform border and font-weight scales (#6252)

* improvement(docs): inherit the platform border and font-weight scales

#6241 consolidated the app's neutral border tokens and flattened its
font-weight scale. `apps/docs` was carrying an untouched copy of the
pre-migration values, so the two have visibly drifted — the docs `@theme`
block already declares it "mirrors apps/sim/tailwind.config.ts", so the
drift is against stated intent rather than a deliberate divergence.

Borders — same consolidation as the app:
- `--border` #dedede -> #d8d8d8 (light), #333333 -> #444444 (dark)
- `--border-1` and `--border-muted` become aliases of `--border`, so the 19
  existing `var(--border-1)` consumers pick up the unified colour without
  being touched
- `--divider` is retired; its single consumer moves to `--border`

Font weights — the arbitrary values the app dropped:
- `font-[480]`/`font-[470]`/`font-[500]` -> `font-medium`, `font-[430]` ->
  `font-normal`, `font-[600]` -> `font-semibold`

The navbar's active tab and its invisible width-reserving ghost both used
`font-[480]`; they move to `font-medium` together, so the anti-layout-shift
trick still holds.

Deliberately NOT ported: the app's `--border-width` hairline (0.5px on hi-dpi).
The app wires it through `borderWidth.DEFAULT` in a Tailwind v3 JS config; docs
is Tailwind v4 CSS-first, which hardcodes `border: 1px` in the utility with no
theme key, so matching it means overriding a Tailwind utility. That is a
site-wide visual change and wants its own PR with visual review.

Also unchanged: the inline SVGs. `components/icons.tsx` (328) is the brand and
integration set, `sim-logo` is a brand mark, and the handful of remaining
shapes are bespoke and positioned by hand. Docs already consumes
`@sim/emcn/icons` in the 15 places where a shared icon is the right call, and
imports zero lucide.

* improvement(docs): finish the platform token sweep

Follow-on within the same PR. A full comparison of every custom token docs
rolls against the platform found three more classes of drift.

Text scale — #6241 retuned these and docs kept the old values:
- `--text-body` #3b3b3b -> #434343 (light), #cdcdcd -> #c1c1c1 (dark)
- `--text-muted` #707070 -> #7a7a7a (light), #787878 -> #6e6e6e (dark)
- `--text-icon`  #525252 -> #5a5a5a (light), #a0a0a0 -> #969696 (dark)

Docs and the app now agree on all 62 shared token names, with zero divergent
values.

Missing shared-component tokens. Docs renders `@sim/emcn` (Badge, Chip,
ChipLink) and `@sim/workflow-renderer` (block, subflow and note views), but
never defined 14 of the tokens those components reference — an undefined
`var()` silently falls back to `currentColor`, so the failure is invisible
until the branch that uses it renders. Several are live: `--warning` on an
edited subflow, `--caution` on inline code inside a note, `--text-placeholder`
on an empty note, `--border-success` on a successful run edge. Added with the
app's values, along with `--text-icon-muted` (new in #6241) and the four Badge
palettes docs lacked (teal, cyan, pink, blue-secondary), so any variant renders
correctly rather than being one prop away from black.

Type scale — docs declares micro/xs/caption/small/base/md in `@theme` but 20
call sites bypassed it with identical raw values (`text-[13px]`,
`text-[0.8125rem]`, `text-[12px]`, `text-[15px]`, `text-[10px]`). Each now uses
the token; every value is byte-identical, so this is a rename, not a restyle.
The class reordering in the same files is biome's `useSortedClasses` reacting
to the rename — verified as a pure permutation, with the class multiset
unchanged in every file.

Deliberately left alone:
- `#33C482` / `#2FB3FF` — brand-mark SVG fills and default props in demo data,
  not styling.
- The Ask AI button's inverted `#383838`/`#575757`/`#e0e0e0`/`#cfcfcf`. The
  platform's `--surface-inverted`/`--surface-inverted-hover` hold *different*
  values, so adopting them would restyle the control rather than tokenize it.
  Worth doing, but as a visual change with review.

apps/docs/components/ui/faq.tsx

@@ -30,7 +30,7 @@ function FAQItemRow({
         type='button'
         onClick={onToggle}
         aria-expanded={isOpen}
-        className='flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left font-[470] text-[0.875rem] text-[var(--text-body)] transition-colors hover:bg-[var(--surface-3)]'
+        className='flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left font-medium text-[0.875rem] text-[var(--text-body)] transition-colors hover:bg-[var(--surface-3)]'
       >
         <ChevronRight
           className={cn(
@@ -79,7 +79,7 @@ export function FAQ({ items, title = 'Common Questions' }: FAQProps) {
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: serializeJsonLd(faqSchema) }}
       />
-      <h2 className='mb-4 font-[500] text-xl'>{title}</h2>
+      <h2 className='mb-4 font-medium text-xl'>{title}</h2>
       <div className='border-[var(--border)] border-t border-b'>
         {items.map((item, index) => (
           <div

apps/docs/components/ui/search-trigger.tsx

@@ -34,8 +34,8 @@ export function SearchTrigger() {
       <Search className={chipContentIconClass} />
       <span>Search&hellip;</span>
       <kbd className='ml-auto flex items-center'>
-        <span className='text-[15px]'>⌘</span>
-        <span className='text-[12px]'>K</span>
+        <span className='text-base'>⌘</span>
+        <span className='text-caption'>K</span>
       </kbd>
     </button>
   )

apps/docs/components/ui/video-chapters.tsx

@@ -43,7 +43,7 @@ export function VideoChapters({ title = 'Chapters', chapters, className }: Video
 
   return (
     <aside className={cn('not-prose', className)}>
-      <p className='mb-2 px-2.5 font-medium text-[0.8125rem] text-[var(--text-muted)]'>{title}</p>
+      <p className='mb-2 px-2.5 font-medium text-[var(--text-muted)] text-small'>{title}</p>
       <ul className='m-0 flex list-none flex-col gap-0.5 p-0'>
         {chapters.map((chapter) => (
           <li key={chapter.title}>

apps/docs/components/ui/video-placeholder.tsx

@@ -143,7 +143,7 @@ export function VideoPlaceholder({
 
       {/* Top-right status pill — only until a video is wired up */}
       {!hasVideo && (
-        <span className='absolute top-6 right-6 z-10 inline-flex items-center gap-2 rounded-full border border-[var(--border-1)] bg-[var(--surface-2)] px-4 py-2 font-medium text-[12px] text-[var(--text-secondary)] uppercase tracking-[0.14em] md:top-8 md:right-8 dark:bg-[var(--surface-1)]'>
+        <span className='absolute top-6 right-6 z-10 inline-flex items-center gap-2 rounded-full border border-[var(--border-1)] bg-[var(--surface-2)] px-4 py-2 font-medium text-[var(--text-secondary)] text-caption uppercase tracking-[0.14em] md:top-8 md:right-8 dark:bg-[var(--surface-1)]'>
           <span className='size-1.5 rounded-full bg-[var(--brand-accent)]' />
           {label}
         </span>

apps/docs/components/ui/what-you-will-learn.tsx

@@ -19,9 +19,7 @@ interface WhatYouWillLearnProps {
 export function WhatYouWillLearn({ items, className }: WhatYouWillLearnProps) {
   return (
     <div className={cn('not-prose', className)}>
-      <p className='mb-3 font-medium text-[0.8125rem] text-[var(--text-muted)]'>
-        What you will learn
-      </p>
+      <p className='mb-3 font-medium text-[var(--text-muted)] text-small'>What you will learn</p>
       <div className='divide-y divide-[var(--border)]'>
         {items.map((item) => (
           <div key={item.title} className='py-3.5 first:pt-0 last:pb-0'>