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.

Author: waleedlatif1

apps/docs/app/global.css

@@ -65,9 +65,9 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
   --surface-5: #f3f3f3;
   --surface-6: #e5e5e5;
   --surface-active: #ececec;
-  --border: #dedede;
-  --border-1: #e0e0e0;
-  --divider: #ededed;
+  --border: #d8d8d8;
+  /** Legacy neutral-border aliases. New work should use --border. */
+  --border-1: var(--border);
   --text-primary: #1a1a1a;
   --text-secondary: #525252;
   --text-tertiary: #5c5c5c;
@@ -84,7 +84,7 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
   --surface-inverted: #1b1b1b;
   --surface-inverted-hover: #363636;
   --border-inverted: #363636;
-  --border-muted: #e4e4e4;
+  --border-muted: var(--border);
   --badge-success-bg: #bbf7d0;
   --badge-success-text: #15803d;
   --badge-blue-bg: #bfdbfe;
@@ -116,9 +116,9 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
   --surface-5: #363636;
   --surface-6: #454545;
   --surface-active: #2c2c2c;
-  --border: #333333;
-  --border-1: #3d3d3d;
-  --divider: #393939;
+  --border: #444444;
+  /** Legacy neutral-border aliases. New work should use --border. */
+  --border-1: var(--border);
   --text-primary: #e6e6e6;
   --text-secondary: #cccccc;
   --text-tertiary: #b3b3b3;
@@ -135,7 +135,7 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
   --surface-inverted: #242424;
   --surface-inverted-hover: #363636;
   --border-inverted: #3d3d3d;
-  --border-muted: #424242;
+  --border-muted: var(--border);
   --badge-success-bg: rgba(34, 197, 94, 0.2);
   --badge-success-text: #86efac;
   --badge-blue-bg: rgba(59, 130, 246, 0.2);

apps/docs/components/ai/ask-ai-panel.tsx

@@ -145,8 +145,8 @@ export function AskAIPanel({ locale, open, onClose }: AskAIPanelProps) {
                       className={cn(
                         'space-y-3 text-[var(--text-primary)] text-base leading-relaxed',
                         '[&_a]:text-[var(--text-primary)] [&_a]:underline [&_a]:decoration-dashed [&_a]:underline-offset-4',
-                        '[&_strong]:font-[600]',
-                        '[&_h1]:font-[600] [&_h2]:font-[600] [&_h3]:font-[600] [&_h4]:font-[600]',
+                        '[&_strong]:font-semibold',
+                        '[&_h1]:font-semibold [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold',
                         '[&_li]:my-1 [&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-5',
                         '[&_code]:font-mono [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-[var(--surface-5)] [&_pre]:p-3 [&_pre]:text-small'
                       )}

apps/docs/components/navbar/navbar.tsx

@@ -77,12 +77,12 @@ export function Navbar() {
                 className={cn(
                   '-mb-px relative flex items-center border-b text-[14px] tracking-[-0.01em] transition-colors',
                   isActive
-                    ? 'border-[var(--text-muted)] font-[480] text-[var(--text-primary)]'
-                    : 'border-transparent font-[430] text-[var(--text-muted)] hover:border-[var(--border-1)] hover:text-[var(--text-secondary)]'
+                    ? 'border-[var(--text-muted)] font-medium text-[var(--text-primary)]'
+                    : 'border-transparent font-normal text-[var(--text-muted)] hover:border-[var(--border-1)] hover:text-[var(--text-secondary)]'
                 )}
               >
                 {/* Invisible bold text reserves width to prevent layout shift */}
-                <span className='invisible font-[480]'>{tab.label}</span>
+                <span className='invisible font-medium'>{tab.label}</span>
                 <span className='absolute'>{tab.label}</span>
               </Link>
             )

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/workflow-preview/output-bundle.tsx

@@ -76,7 +76,7 @@ function TreeNode({ node, depth = 0 }: { node: OutputNode; depth?: number }) {
         />
       </div>
       {expanded && (node.children || node.value !== undefined) && (
-        <div className='mt-0.5 ml-[5px] flex min-w-0 flex-col gap-0.5 border-[var(--divider)] border-l pl-[10px]'>
+        <div className='mt-0.5 ml-[5px] flex min-w-0 flex-col gap-0.5 border-[var(--border)] border-l pl-[10px]'>
           {node.children
             ? node.children.map((child) => (
                 <TreeNode key={child.key} node={child} depth={depth + 1} />