fix(ui): GIF picker surface tokens + background swatch chrome (N8, N70)

- N8: GifPicker non-TDS container used undefined var(--bg-surface) + raw
  rgba/12px/boxShadow. Switch to folds tokens (color.Surface.Container,
  config.radii.R400, color.Surface.ContainerLine, color.Other.Shadow).
  TDS branch keeps its --lt-* glow chrome.
- N70: ChatBgGrid/SeasonalBgGrid swatch buttons moved chrome (radius, border,
  hover, keyboard :focus-visible ring, selected via data-selected) into shared
  BgSwatch.css.ts using design tokens; only per-swatch size + live preview
  background stay inline (custom preview tiles, not MenuItem/Chip candidates).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/settings/general/BgSwatch.css.ts

@@ -0,0 +1,31 @@
+import { style } from '@vanilla-extract/css';
+import { color, config } from 'folds';
+
+// Shared base for the chat-background / seasonal-theme preview swatches. These
+// are inherently custom tiles (they render a live background preview), so they
+// can't be a folds MenuItem/Chip — but the chrome (radius, border, hover, and a
+// proper keyboard focus ring) now comes from design tokens instead of raw
+// rgba/px inline styles. Size + the preview background stay inline per-swatch.
+export const BgSwatch = style({
+  display: 'block',
+  padding: 0,
+  cursor: 'pointer',
+  overflow: 'hidden',
+  borderRadius: config.radii.R300,
+  borderWidth: config.borderWidth.B400,
+  borderStyle: 'solid',
+  borderColor: color.SurfaceVariant.ContainerLine,
+  transition: 'border-color 100ms ease-in-out',
+  selectors: {
+    '&:hover': {
+      borderColor: color.Primary.ContainerLine,
+    },
+    '&:focus-visible': {
+      outline: `${config.borderWidth.B400} solid ${color.Primary.Main}`,
+      outlineOffset: config.space.S100,
+    },
+    '&[data-selected="true"]': {
+      borderColor: color.Primary.Main,
+    },
+  },
+});