feat(audit): Batch 6-7 — design tokens + type/color roles, full migration

Landed complete design-token foundation (Batch 6) and type/color standardization (Batch 7):
- New src/renderer/src/components/ui/tokens.ts: SPACE, RADIUS, ELEVATION, Z, ICON, MOTION, SCRIM, META_SEP scales
- New src/renderer/src/components/ui/text.ts: useTextStyles hook + type-role convention (Subtitle2/Text/Body1/Caption1)
- Migrated scattered literals in 17 renderer files to named tokens
- Adopted unified muted color and row-title component across 7 list views
- All tile glyphs snapped to ICON tiers (no literal px remain)
- base.css reduced-motion gate + prefers-color-scheme alignment
- Verified tile-glyph visual deltas (≤2px) for watched pass; UI3/UI12 implementation confirmed, awaiting visual check
- CODE-AUDIT.md reconciled: Batch 6 complete (12 items checked, UI3+UI12 flagged); Batch 7 complete (6 items checked)

Verified: typecheck (node+web) + 268 tests + eslint + production build green; touched files prettier-clean.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/renderer/src/components/Select.tsx

@@ -1,4 +1,10 @@
-import { makeStyles, mergeClasses, tokens, shorthands } from '@fluentui/react-components'
+import {
+  makeStyles,
+  mergeClasses,
+  tokens,
+  shorthands,
+  useFieldControlProps_unstable
+} from '@fluentui/react-components'
 
 // A native <select> styled to match Fluent inputs. We use this instead of
 // Fluent's <Dropdown> because Fluent's portal/popover menu is a composited
@@ -69,8 +75,16 @@ export function Select({
   disabled
 }: SelectProps): React.JSX.Element {
   const styles = useStyles()
+  // Integrate with a wrapping Fluent <Field> (L133): pick up the id + label/hint
+  // association so the Field's visible label names the select natively (via
+  // `htmlFor`), instead of every call site repeating the name in an `aria-label`.
+  // Outside a Field this returns the props unchanged, so standalone selects keep
+  // their own `aria-label`. `supportsLabelFor` = native <label for>, not aria-labelledby.
+  const fieldProps = useFieldControlProps_unstable({}, { supportsLabelFor: true })
   return (
     <select
+      {...fieldProps}
+      aria-label={ariaLabel}
       className={mergeClasses(
         styles.select,
         size === 'large' && styles.large,
@@ -79,7 +93,6 @@ export function Select({
       )}
       value={value}
       onChange={(e) => onChange(e.target.value)}
-      aria-label={ariaLabel}
       disabled={disabled}
     >
       {options.map((o) => (