Quality pass 2: sticky header breathing room, a11y labels, semantic tokens

Visual fixes:
- Sticky headers: add pt: 2 so scrolling content doesn't bleed
  flush against the heading (ProvidersStep, VenueStep)

Accessibility:
- ProvidersStep: add role="list" to provider list container
  (aria-label needs a semantic role to be announced)
- VenueStep: add aria-label to search TextField (placeholder
  alone is not a reliable label for screen readers)

Token consistency:
- Map placeholders: var(--fa-color-sage-50) → var(--fa-color-surface-cool)
  (use semantic token, not primitive) in ProvidersStep, VenueStep
- ArrangementDialog: var(--fa-color-brand-50) → var(--fa-color-surface-warm)
  for package summary background
- ArrangementDialog: replace Box component="a" with Link atom
  for terms and conditions (consistent focus/hover styling)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/organisms/ArrangementDialog/ArrangementDialog.tsx

@@ -19,6 +19,7 @@ import { ProviderCardCompact } from '../../molecules/ProviderCardCompact';
 import { Collapse } from '../../atoms/Collapse';
 import { Typography } from '../../atoms/Typography';
 import { Button } from '../../atoms/Button';
+import { Link } from '../../atoms/Link';
 import { Divider } from '../../atoms/Divider';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
@@ -265,7 +266,7 @@ export const ArrangementDialog = React.forwardRef<HTMLDivElement, ArrangementDia
               {/* Package summary */}
               <Box
                 sx={{
-                  bgcolor: 'var(--fa-color-brand-50)',
+                  bgcolor: 'var(--fa-color-surface-warm)',
                   borderRadius: 2,
                   p: 2.5,
                   mb: 3,
@@ -534,17 +535,9 @@ export const ArrangementDialog = React.forwardRef<HTMLDivElement, ArrangementDia
               {/* Terms */}
               <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 3 }}>
                 By continuing, you agree to the{' '}
-                <Box
+                <Link href="#" sx={{ fontSize: 'inherit' }}>
-                  component="a"
-                  href="#"
-                  sx={{
-                    color: 'var(--fa-color-text-brand)',
-                    textDecoration: 'underline',
-                    fontSize: 'inherit',
-                  }}
-                >
                   terms and conditions
-                </Box>
+                </Link>
                 .
               </Typography>
 

src/components/pages/ProvidersStep/ProvidersStep.tsx

@@ -121,7 +121,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
         mapPanel || (
           <Box
             sx={{
-              bgcolor: 'var(--fa-color-sage-50)',
+              bgcolor: 'var(--fa-color-surface-cool)',
               height: '100%',
               display: 'flex',
               alignItems: 'center',
@@ -144,6 +144,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
           top: 0,
           zIndex: 1,
           bgcolor: 'background.default',
+          pt: 2,
           pb: 1,
           mx: { xs: -2, md: -3 },
           px: { xs: 2, md: 3 },
@@ -201,6 +202,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
 
       {/* Provider list — click-to-navigate (D-D) */}
       <Box
+        role="list"
         aria-label="Funeral providers"
         sx={{ display: 'flex', flexDirection: 'column', gap: 2, pb: 3 }}
       >

src/components/pages/VenueStep/VenueStep.tsx

@@ -181,7 +181,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
         mapPanel || (
           <Box
             sx={{
-              bgcolor: 'var(--fa-color-sage-50)',
+              bgcolor: 'var(--fa-color-surface-cool)',
               height: '100%',
               display: 'flex',
               alignItems: 'center',
@@ -213,6 +213,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
             top: 0,
             zIndex: 1,
             bgcolor: 'background.default',
+            pt: 2,
             pb: 1,
             mx: { xs: -2, md: -3 },
             px: { xs: 2, md: 3 },
@@ -232,6 +233,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
           <Box sx={{ display: 'flex', gap: 1, mb: 2, alignItems: 'flex-start' }}>
             <TextField
               placeholder="Search a town or suburb..."
+              aria-label="Search venues by town or suburb"
               value={values.search}
               onChange={(e) => onChange({ ...values, search: e.target.value })}
               fullWidth