fix(search): use proper folds color tokens for date range picker (P4-9)

Replaces undefined --border-surface-variant CSS variable with
color.SurfaceVariant.ContainerLine from folds, and --bg-surface-variant
with color.SurfaceVariant.Container. Both are valid theme tokens
that adapt to light/dark mode correctly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/features/message-search/SearchFilters.tsx

@@ -25,6 +25,7 @@ import {
   Badge,
   RectCords,
 } from 'folds';
+import { color } from 'folds';
 import { SearchOrderBy } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -372,8 +373,8 @@ function DateRangeButton({ fromTs, toTs, onChange }: DateRangeButtonProps) {
                   max={toDate || undefined}
                   onChange={(e) => handleFrom(e.target.value)}
                   style={{
-                    background: 'var(--bg-surface-variant)',
-                    border: '1px solid var(--border-surface-variant)',
+                    background: color.SurfaceVariant.Container,
+                    border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
                     borderRadius: config.radii.R300,
                     color: 'inherit',
                     fontSize: '0.82rem',
@@ -389,8 +390,8 @@ function DateRangeButton({ fromTs, toTs, onChange }: DateRangeButtonProps) {
                   min={fromDate || undefined}
                   onChange={(e) => handleTo(e.target.value)}
                   style={{
-                    background: 'var(--bg-surface-variant)',
-                    border: '1px solid var(--border-surface-variant)',
+                    background: color.SurfaceVariant.Container,
+                    border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
                     borderRadius: config.radii.R300,
                     color: 'inherit',
                     fontSize: '0.82rem',