refactor(ui): use product primitives in header search

web/src/components/layout/Header.tsx

@@ -4,7 +4,7 @@ import { useAppContext } from '../../context/AppContext';
 import { useNavigate } from 'react-router-dom';
 import { fetchMarketIndices, type IndexSnapshot } from '../../lib/marketApi';
 import { useTheme } from '../theme/ThemeProvider';
-import { Button } from '../ui/button';
+import { Button, Input } from '../ui/Primitives';
 
 
 export function Header() {
@@ -86,7 +86,7 @@ export function Header() {
             pointerEvents: 'none',
           }}
         />
-        <input
+        <Input
           ref={inputRef}
           aria-label="Search ticker"
           type="text"
@@ -101,14 +101,7 @@ export function Header() {
             width: '100%',
             paddingLeft: 34,
             paddingRight: 12,
-            paddingTop: 8,
-            paddingBottom: 8,
-            border: '1px solid var(--border)',
-            borderRadius: 8,
             fontSize: 13,
-            outline: 'none',
-            color: 'var(--foreground)',
-            background: 'var(--input)',
             boxSizing: 'border-box',
             fontFamily: 'inherit',
           }}