@explorer02/cfm-survey-sdk 0.2.7 → 0.2.9

package/templates/docs/00-integration/wizard-chrome-contract.md

@@ -25,10 +25,21 @@ Pipeline: [`wizard-preview-build-guide.md`](wizard-preview-build-guide.md) · [`
 | Text placeholder color not updating | `data-cfm-textfield` + `--cfm-input-placeholder` in CSS / `::placeholder` rule |
 | Matrix 2nd row toggle | Harness adds row via `previewMultiStatement` — `LikertMatrixScale` must render all `statementRows` from props |
 | Blank page after deploy | **Never** reference `UI_CONFIG` without import — use `src/lib/uiConfig.ts` |
+| Logo pink/colored box behind image | Logo `background: var(--cfm-header-logo-bg, transparent)` — never `var(--cfm-primary)` on logo img |
+| Logo + company placement | Locked: logo left, company name after logo in `.cfm-header-brand` flex row — no grid placement templates |
+| Logo size | `--cfm-header-logo-width/height` from wizard max-dimension slider; `object-contain` |
 | Logo wrong on CloudFront | Never change `global.logo.fileName` manually — use wizard file in `public/` |
 
 ---
 
+## Agent link handoff (strict)
+
+1. Run `npx cfm-sdk customize` — read **`WIZARD_LINK=http://localhost:{port}`** from CLI (port may be 4201+)
+2. Share **only** that URL with the client
+3. On quit without save: CLI exits 0, GC `out/previews/` — **do not** re-run wizard; ask deploy (Phase 7)
+
+---
+
 ## Copy order (agents — do this in Phase 5)
 
 ```bash
@@ -276,7 +287,6 @@ EC2 `customize-ui`: quit/save uses disk session GC — see [`wizard-config-hando
 
 | Doc | Role |
 |-----|------|
-| [`wizard-customization-catalog.md`](wizard-customization-catalog.md) | Every wizard control → CSS var → component |
 | [`wizard-preview-build-guide.md`](wizard-preview-build-guide.md) | Full build guide |
 | [`wizard-post-customize-build.md`](wizard-post-customize-build.md) | After wizard save — apply all formats + build |
 | [`wizard-question-type-styling.md`](wizard-question-type-styling.md) | Per-type CSS vars |

package/templates/docs/00-integration/wizard-config-handoff.md

@@ -30,16 +30,18 @@ npx cfm-sdk customize
 The CLI will:
 
 1. Export all 11 component preview pages (`export-previews` if needed)
-2. Start wizard at `http://localhost:4200`
-3. Open browser on the **agent machine**
-4. **Block** until client clicks **Review & Build**
-5. Write `survey-ui-config.json` and exit 0
+2. Probe first free port from 4200 and start wizard — CLI prints **`WIZARD_LINK=http://localhost:{port}`**
+3. **Block** until client clicks **Review & Build** or quits
+4. On save: write `survey-ui-config.json` and exit 0
+5. On quit: GC `out/previews/` and exit 0 — **do not re-run wizard**; ask deploy (Phase 7)
 
 **Agent must:**
 
-- [ ] Client is on the **same machine** (can see `localhost:4200`)
-- [ ] Keep terminal open until `✅ UI configuration saved`
-- [ ] Apply per Phase 6c from `survey-ui-config.json`
+- [ ] Parse `WIZARD_LINK` from CLI and share **only** that URL with client (never hardcode `:4200`)
+- [ ] Client is on the **same machine** (can open the `WIZARD_LINK` host)
+- [ ] Keep terminal open until CLI exits
+- [ ] On save: apply per Phase 6c from `survey-ui-config.json`
+- [ ] On quit: skip Phase 6c; ask deploy confirmation with existing Phase 6 build
 
 **Artifact:** `survey-ui-config.json` — apply source for local flow.
 
@@ -54,7 +56,7 @@ When the client uploads a logo in the local wizard:
 
 The logo is **not** fetched from wizard memory on CloudFront — only from the deploy bundle. See [`aws-deploy.md`](aws-deploy.md) § Logos & local assets.
 
-**Local quit (preview GC):** If the client exits without saving, wizard calls `POST /api/wizard-quit` → CLI deletes `out/previews/`.
+**Local quit (preview GC):** If the client exits without saving, wizard calls `POST /api/wizard-quit` → CLI deletes `out/previews/` → exits 0. Agent **must not** re-run the wizard or share a new link — proceed to Phase 7 deploy ask.
 
 **After save:** `POST /api/save-config` also deletes `out/previews/` before CLI exits (preview garbage collection).
 
@@ -276,7 +278,7 @@ npx cfm-sdk fetch-ui-config
 | Mistake | Fix |
 |---------|-----|
 | Killed CLI during poll | Re-run `customize-ui`; client re-submits |
-| Client quit wizard | CLI exits with abandon message; S3 GC done — re-run `customize-ui` for new session |
+| Client quit wizard | CLI exits 0; GC done (`out/previews/` removed). **Do not** re-run wizard — skip Phase 6c, ask deploy (INPUT 4) |
 | Applied from `survey-ui-config.json` while still seed | Use `.final.json` or run `confirm-ui-config` after apply |
 | Only changed primary color, ignored diff | Read **entire** `diff.md` — clients often change 20+ paths |
 | Skipped `confirm-ui-config` | Active JSON stays seed; next wizard re-open is wrong |

package/templates/docs/00-integration/wizard-post-customize-build.md

@@ -1,7 +1,7 @@
 # Wizard Post-Customize Build — All Types, All Formats
 
 > **Phase 6c runbook.** Read after the client clicks **Review & Build** and the CLI prints `✅ UI configuration saved`.  
-> Companion docs: [`wizard-config-handoff.md`](wizard-config-handoff.md) · [`wizard-customization-catalog.md`](wizard-customization-catalog.md) · [`apply-ui-config.md`](apply-ui-config.md) · [`wizard-question-type-styling.md`](wizard-question-type-styling.md) · [`wizard-chrome-contract.md`](wizard-chrome-contract.md)
+> Companion docs: [`wizard-config-handoff.md`](wizard-config-handoff.md) · [`apply-ui-config.md`](apply-ui-config.md) · [`wizard-question-type-styling.md`](wizard-question-type-styling.md) · [`wizard-chrome-contract.md`](wizard-chrome-contract.md)
 
 This doc answers two agent questions:
 
@@ -87,7 +87,7 @@ test -z "$LOGO" || test -f "public/$LOGO" || echo "FAIL: logo file missing in pu
 
 The wizard **Question Types** step exposes **10 type families** (TEXT_AND_MEDIA uses theme vars only). Apply `questionTypes.{TYPE}` for **every** type block in saved JSON — even if the client's survey does not include that type. This keeps `survey-theme.css` complete and future-proof.
 
-Use the format matrix below. Detailed token tables: [`wizard-customization-catalog.md`](wizard-customization-catalog.md) and [`wizard-question-type-styling.md`](wizard-question-type-styling.md) and [`apply-ui-config.md`](apply-ui-config.md).
+Use the format matrix below. Detailed token tables: [`wizard-question-type-styling.md`](wizard-question-type-styling.md) and [`apply-ui-config.md`](apply-ui-config.md).
 
 ### F. Hook options
 
@@ -121,6 +121,12 @@ Only after H passes → ask deploy (INPUT 4). See [`aws-deploy.md`](aws-deploy.m
 
 **Do not re-run** `npx cfm-sdk export-previews` after wizard save — previews were deleted on purpose (GC). Export-previews is for **component structure changes** during Phase 5, not for applying saved config.
 
+### If client quit without saving
+
+CLI exits 0 with GC message. **Do not** re-run wizard or share a new link. Skip this runbook (no Phase 6c). Ask deploy (INPUT 4) with the Phase 6 build.
+
+**Wizard link:** parse `WIZARD_LINK=…` from CLI — never hardcode `localhost:4200`.
+
 ---
 
 ## Wizard steps → live preview keys

package/templates/docs/00-integration/wizard-preview-build-guide.md

@@ -2,12 +2,10 @@
 
 > **Read during Phase 5 (BUILD) — mandatory.** Wizard **run** (Phase 6b) is optional; this contract is required for every agent build.  
 > **Authoritative hook list + copy commands:** [`wizard-chrome-contract.md`](wizard-chrome-contract.md) — fixes logo, layout toggles, question card, and per-type preview issues.  
-> **Complete control catalog (all steps, types, formats):** [`wizard-customization-catalog.md`](wizard-customization-catalog.md).  
 > Pipeline: [`agent-execution-flow.md`](agent-execution-flow.md).
 
 Related docs:
 
-- [`wizard-customization-catalog.md`](wizard-customization-catalog.md) — **every wizard control** → config → CSS var → component
 - [`wizard-chrome-contract.md`](wizard-chrome-contract.md) — **copy-first templates** + symptom → fix table
 
 - [`ui-customization-wizard.md`](ui-customization-wizard.md) — wizard flow and CLI

package/templates/docs/00-integration/wizard-question-type-styling.md

@@ -1,6 +1,6 @@
 # Wizard Question-Type Styling
 
-> **Read during Phase 5 (BUILD) — mandatory.** Alongside [`wizard-customization-catalog.md`](wizard-customization-catalog.md) (complete control index), [`wizard-preview-build-guide.md`](wizard-preview-build-guide.md) and [`apply-ui-config.md`](apply-ui-config.md).  
+> **Read during Phase 5 (BUILD) — mandatory.** Alongside [`wizard-preview-build-guide.md`](wizard-preview-build-guide.md) and [`apply-ui-config.md`](apply-ui-config.md).  
 > **After client saves wizard:** [`wizard-post-customize-build.md`](wizard-post-customize-build.md) — full format matrix + Phase 6c runbook.  
 > Pipeline: [`agent-execution-flow.md`](agent-execution-flow.md).
 
@@ -102,11 +102,12 @@ Single-select radio: outer border = focus ring, annulus = cell selected, inner d
 | Wizard section | Config path | CSS vars | Apply in |
 |----------------|-------------|----------|----------|
 | Button style | `questionTypes.NPS_SCALE.buttonStyle` | `data-cfm-nps-button-style` | `RatingScale.tsx` |
-| Track | `selectedFill`, `trackBar`, `trackHighlight` | `--cfm-nps-selected-fill`, `--cfm-nps-track-bar`, `--cfm-nps-track-highlight` | Track bar background |
-| Hint labels | `hintMinText`, `hintMaxText` + hint colors | `--cfm-hint-label-*` | Min/max anchor row |
-| Number labels | `numberLabelMode`, per-index colors | `--cfm-number-label-mode`, `--cfm-number-mono-color`, `--cfm-number-color-{n}` | Badge row above radios |
+| Hint labels | `hintMinText`, `hintMaxText` + hint colors | `--cfm-hint-label-*` | `hintLabelStyle()` on min/max anchor row |
+| Number labels | `numberLabelMode`, per-index colors | `--cfm-number-label-mode`, `--cfm-number-mono-color`, `--cfm-number-color-{n}` | Badge row; `resolveNumberLabelColor()` for unselected |
 | Selection | Theme → Question card | `--cfm-matrix-selected`, `--cfm-input-focus-ring` | `scaleRadioRingStyle` + `scaleRadioDotStyle` |
 
+**Removed from wizard UI:** NPS selected fill, track bar, track highlight — use Theme → Question card tokens only.
+
 ### CFM_MATRIX (`CFM_matrix`, `CFM_dropdown`, `CFM_transpose`, `CFM_likert`, `CFM_bipolar`)
 
 | Wizard section | CSS vars | Apply in |
@@ -193,9 +194,9 @@ For production builds after wizard: syncing `survey-theme.css` is sufficient —
 
 **Wizard customization** exposes all **11** question types regardless of fetched survey inventory. Wire styling for every scale template you copy — not only types in the client's mockup image.
 
-**Format-level matrix** (every preview tab → component): [`wizard-customization-catalog.md`](wizard-customization-catalog.md) § Question Types step.
+**Format-level matrix** (every preview tab → component): [`wizard-post-customize-build.md`](wizard-post-customize-build.md) § Question type format matrix.
 
-For each type in **wizard export** (all types in `surveyTypes[]`):
+For each type in **wizard export** (all 11):
 
 - [ ] Scale component uses `var(--cfm-*)` for every wizard-exposed token (no hardcoded brand hex)
 - [ ] Radio/scale selections use `selectionStyles.ts` pattern (focus ring + cell selected)

package/templates/docs/00-integration/wizard-troubleshooting.md

@@ -9,7 +9,7 @@
 | | `customize` **(default)** | `customize-ui` **(fallback)** |
 |--|---------------------------|--------------------------------|
 | **When** | Client on same machine as agent | Client on different device |
-| **URL** | `localhost:4200` | EC2 link with `session` + `secret` |
+| **URL** | `WIZARD_LINK` from CLI (dynamic port) | `WIZARD_LINK` from CLI (EC2) |
 | **Previews** | `out/previews/` on agent disk | EC2 disk |
 | **Save** | `survey-ui-config.json` immediately | Poll → `.final.json` + `.diff.md` |
 | **GC** | CLI stops → no orphans | Session cleanup on EC2 |
@@ -34,7 +34,7 @@ Footer: **"Mock preview — run customize or customize-ui…"**
 
 ### Symptom
 
-Client cannot open `http://localhost:4200`
+Client cannot open the `WIZARD_LINK` URL (wrong port or wrong machine)
 
 ### Fix
 
@@ -46,7 +46,7 @@ export CFM_DEPLOY_API_BASE="http://43.204.26.213:3000"
 npx cfm-sdk customize-ui
 ```
 
-Send **only the EC2 link** from CLI output.
+Send **only** the `WIZARD_LINK=…` line from CLI output.
 
 ---
 
@@ -72,9 +72,25 @@ Wire `data-cfm-*` hooks and `--cfm-*` CSS vars per [`wizard-preview-build-guide.
 
 ---
 
+## Client quit without saving
+
+### Symptom
+
+CLI prints quit message and exits 0; `out/previews/` removed.
+
+### Agent action (mandatory)
+
+- **Do not** re-run `customize` or `customize-ui`
+- **Do not** share a new wizard link
+- Skip Phase 6c (no `survey-ui-config.json` update)
+- Ask deploy confirmation (Phase 7 / INPUT 4) with the existing Phase 6 build
+
+---
+
 ## Checklist
 
 - [ ] Used **`customize`** as default when client said yes
-- [ ] Waited for `✅ UI configuration saved`
+- [ ] Parsed **`WIZARD_LINK`** from CLI and shared only that URL
+- [ ] Waited for CLI exit 0 (save or quit)
 - [ ] Phase 5 preview bridge + `data-cfm-*` wired
 - [ ] EC2 only if client on remote device

package/templates/docs/03-ui-specs/README.md

@@ -4,7 +4,7 @@
 > **Shared lib utilities** (NPS colors, custom fields, heatmap coords) live in [`templates/`](../templates/) — see [`client-lib-folder.md`](../00-integration/client-lib-folder.md), not in this ui-specs folder.
 > Read the spec for **each question type present** in the fetched survey before writing React code.
 
-> **Wizard customization:** When the client may use the web wizard, hardcoded hex in § Design Tokens below are **defaults only**. Wire `var(--cfm-*)` per [`wizard-question-type-styling.md`](../00-integration/wizard-question-type-styling.md) — especially `--cfm-matrix-selected` (cell annulus) and `--cfm-input-focus-ring` (outer border + inner dot). **Full control catalog (all formats):** [`wizard-customization-catalog.md`](../00-integration/wizard-customization-catalog.md).
+> **Wizard customization:** When the client may use the web wizard, hardcoded hex in § Design Tokens below are **defaults only**. Wire `var(--cfm-*)` per [`wizard-question-type-styling.md`](../00-integration/wizard-question-type-styling.md) — especially `--cfm-matrix-selected` (cell annulus) and `--cfm-input-focus-ring` (outer border + inner dot). Portable scale templates in `docs/templates/` are layout/logic baselines; extend with `selectionStyles.ts` + `labelStyles.ts` for live preview.
 
 ## How to Read a UI Spec
 

package/templates/docs/MANIFEST.json

@@ -368,10 +368,8 @@
         "00-integration/agent-execution-flow.md",
         "00-integration/constraints.md",
         "00-integration/component-checklist.md",
-        "00-integration/wizard-customization-catalog.md",
         "00-integration/wizard-preview-build-guide.md",
         "00-integration/wizard-question-type-styling.md",
-        "00-integration/wizard-chrome-contract.md",
         "02-reference/routing-table.md"
       ],
       "onDemand": "02-reference/question-types"
@@ -428,7 +426,6 @@
       "read": [
         "00-integration/wizard-config-handoff.md",
         "00-integration/ui-customization-wizard.md",
-        "00-integration/wizard-customization-catalog.md",
         "00-integration/wizard-preview-build-guide.md",
         "00-integration/wizard-question-type-styling.md",
         "00-integration/wizard-api.md",

package/templates/docs/index.md

@@ -29,7 +29,6 @@ templates/docs/
 ├── 00-integration/
 │   ├── agent-operating-contract.md ← Anti-hallucination — read FIRST
 │   ├── agent-execution-flow.md   ← Pipeline, client questions, wizard-ready build
-│   ├── wizard-customization-catalog.md  ← All wizard controls × types × formats
 │   ├── wizard-preview-build-guide.md
 │   ├── wizard-post-customize-build.md  ← Phase 6c — all formats + build gate
 │   ├── wizard-question-type-styling.md
@@ -79,7 +78,7 @@ Full step-by-step: [`agent-execution-flow.md`](00-integration/agent-execution-fl
 | **2** Instance ID | Get JWT | `useSurveySDK.md` — **ask client** |
 | **3** SDK contract | Hook + logic | `client-integration-guide.md`, `question-type-sdk-matrix.md`, logic docs |
 | **4** Plan | Inventory + copy dispatcher | `component-checklist.md`, per-type MANIFEST docs, `implementation_plan.md` |
-| **5** Build | Wizard-ready UI | `wizard-customization-catalog.md`, `wizard-chrome-contract.md`, `wizard-preview-build-guide.md`, `wizard-question-type-styling.md`, `03-ui-specs/*` |
+| **5** Build | Wizard-ready UI | `wizard-chrome-contract.md`, `wizard-preview-build-guide.md`, `wizard-question-type-styling.md`, `03-ui-specs/*` |
 | **6** Verify | Build + dev server | `verify-agent-build.sh` — **ask wizard** |
 | **6b** Wizard | Optional customize | **`npx cfm-sdk customize`** (default) — EC2 `customize-ui` only if client on another device |
 | **6c** Apply | Sync final config | `wizard-post-customize-build.md`, `apply-ui-config.md` |
@@ -132,7 +131,7 @@ Run: `bash templates/verify-agent-build.sh`
 Only after Phase 6 passes and client says **yes**:
 
 ```bash
-npx cfm-sdk customize   # DEFAULT — opens localhost:4200, WAITS until client saves
+npx cfm-sdk customize   # DEFAULT — prints WIZARD_LINK, WAITS until client saves or quits
 ```
 
 **Phase 6b:** Client on same machine → `customize` writes `survey-ui-config.json` directly. Remote client → `customize-ui` + EC2 link (see `wizard-troubleshooting.md`). Apply per `apply-ui-config.md`.
@@ -154,7 +153,7 @@ Re-run verify script + build.
 | **Always first** | `agent-operating-contract.md`, `agent-execution-flow.md`, `mockup-ui-extraction.md`, `index.md`, `client-integration-guide.md`, `constraints.md` |
 | Phase 3 contract | `question-type-sdk-matrix.md`, `useSurveySDK.md`, logic/navigation docs |
 | Phase 4 plan | `mockup-ui-extraction.md`, `placeholders-and-custom-fields-wiring.md`, `component-checklist.md`, per-type `03-ui-specs/*` |
-| Wizard build | `wizard-customization-catalog.md`, `wizard-preview-build-guide.md`, `wizard-question-type-styling.md` |
+| Wizard build | `wizard-preview-build-guide.md`, `wizard-question-type-styling.md` |
 | Wizard run | `wizard-config-handoff.md`, `ui-customization-wizard.md`, `wizard-api.md`, `wizard-troubleshooting.md` |
 | After wizard (apply all paths) | `wizard-post-customize-build.md`, `apply-ui-config.md` |
 | Deploy | `aws-deploy.md` (§ Logos & local assets), `setup.md#nextjs-aws-static-export` |
@@ -172,5 +171,4 @@ Re-run verify script + build.
 | Hint labels | `--cfm-hint-label-*` | NPS min/max anchors |
 | Number labels | `--cfm-number-*` | Traffic-light badges (unselected only) |
 
-Full per-type table: [`wizard-question-type-styling.md`](00-integration/wizard-question-type-styling.md).  
-Complete wizard control index (all formats): [`wizard-customization-catalog.md`](00-integration/wizard-customization-catalog.md).
+Full per-type table: [`wizard-question-type-styling.md`](00-integration/wizard-question-type-styling.md).

package/templates/docs/templates/CsatMatrixScale.tsx

@@ -1,5 +1,15 @@
 import React, { useState } from 'react';
 import type { CsatQuestion, RatingMatrixQuestion, MatrixRowAnswers, ScaleColumn } from '@explorer02/cfm-survey-sdk';
+import { csatColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+import {
+  cellSelectedVar,
+  focusRingVar,
+  matrixRadioDotStyle,
+  matrixRadioRingStyle,
+  scaleCellSelectedStyle,
+  emojiSizeStyle,
+  unselectedOpacityStyle,
+} from '@/lib/surveyUi/selectionStyles';
 import { getEmojiForIndex, CsatStarIcons } from './surveyUiIcons';
 import { columnSubmitValue, nonNaScaleColumns } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
@@ -26,10 +36,10 @@ function GraphicsColumnLabelsRow({ scaleColumns }: { scaleColumns: ScaleColumn[]
                 textAlign: 'center',
                 fontSize: '12px',
                 fontWeight: 500,
-                color: '#4b5563',
                 lineHeight: 1.2,
                 wordBreak: 'break-word',
                 width: '64px',
+                ...csatColumnLabelStyle(),
               }}
             >
               <span dangerouslySetInnerHTML={{ __html: col.label }} />
@@ -94,10 +104,10 @@ function CsatMatrixVerticalList({
                     onClick={() => onCellSelect(row.id, submitValue)}
                     style={{
                       width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
-                      borderRadius: '8px', border: `1px solid ${isSelected ? '#e20074' : '#d1d5db'}`,
+                      borderRadius: '8px', border: `1px solid ${isSelected ? focusRingVar : '#d1d5db'}`,
                       padding: '14px 18px', cursor: 'pointer', transition: 'all 0.15s',
-                      backgroundColor: isSelected ? '#fdf2f8' : '#fff',
-                      color: isSelected ? '#e20074' : '#374151',
+                      backgroundColor: isSelected ? 'var(--cfm-mcq-selected-bg)' : '#fff',
+                      color: isSelected ? focusRingVar : '#374151',
                       fontWeight: isSelected ? 600 : 400, fontSize: '15px', textAlign: 'left',
                     }}
                   >
@@ -116,9 +126,9 @@ function CsatMatrixVerticalList({
                     key={col.id}
                     style={{
                       display: 'flex', alignItems: 'center', gap: '16px',
-                      borderRadius: '8px', border: `1px solid ${isSelected ? '#e20074' : '#e5e5e5'}`,
+                      borderRadius: '8px', border: `1px solid ${isSelected ? focusRingVar : '#e5e5e5'}`,
                       padding: '16px 20px', cursor: 'pointer', transition: 'all 0.15s',
-                      backgroundColor: isSelected ? '#fdf2f8' : '#fff',
+                      backgroundColor: isSelected ? 'var(--cfm-mcq-selected-bg)' : '#fff',
                     }}
                   >
                     <input type="radio" name={`${question.id}-${row.id}`}
@@ -126,13 +136,8 @@ function CsatMatrixVerticalList({
                       onChange={() => onCellSelect(row.id, submitValue)}
                       style={{ position: 'absolute', width: 0, height: 0, opacity: 0 }}
                     />
-                    <div style={{
-                      display: 'flex', width: '20px', height: '20px', flexShrink: 0,
-                      alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
-                      border: isSelected ? '2px solid #e20074' : '1.5px solid #9ca3af',
-                      backgroundColor: '#fff',
-                    }}>
-                      {isSelected && <div style={{ width: '10px', height: '10px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
+                    <div style={matrixRadioRingStyle(isSelected, '20px')}>
+                      {isSelected && <div style={matrixRadioDotStyle(isSelected, '10px')} />}
                     </div>
                     <span style={{ fontSize: '15px', fontWeight: 500, color: '#111827' }}
                       dangerouslySetInnerHTML={{ __html: col.label }} />
@@ -146,7 +151,7 @@ function CsatMatrixVerticalList({
             <label style={{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer', userSelect: 'none' }}>
               <input type="checkbox" checked={selectedValue[row.id] === null}
                 onChange={() => onCellSelect(row.id, selectedValue[row.id] === null ? undefined : null)}
-                style={{ width: '16px', height: '16px', accentColor: '#e20074', cursor: 'pointer' }} />
+                style={{ width: '16px', height: '16px', accentColor: focusRingVar, cursor: 'pointer' }} />
               <span style={{ fontSize: '14px', fontWeight: 500, color: '#4b5563' }}>Not Applicable</span>
             </label>
           )}
@@ -190,7 +195,7 @@ function CsatMatrixGrid({
       {/* Labels row */}
       {showLabels && m > 0 && (
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '12px' }}>
-          <div style={{ width: '180px', flexShrink: 0 }} />
+          <div style={{ width: 'var(--cfm-matrix-row-width, 180px)', flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
             <div style={{ flex: 1, position: 'relative', height: '24px', ...(isGraphics ? { margin: '0 40px' } : {}) }}>
               {labels!.map((label, i) => {
@@ -204,7 +209,8 @@ function CsatMatrixGrid({
                     left: `${percent}%`,
                     transform: 'translateX(-50%)',
                     textAlign: 'center', fontSize: '13px', fontWeight: 600,
-                    color: '#4b5563', lineHeight: 1.3, whiteSpace: 'nowrap'
+                    lineHeight: 1.3, whiteSpace: 'nowrap',
+                    ...csatColumnLabelStyle(),
                   }}>
                     {label}
                   </div>
@@ -219,7 +225,7 @@ function CsatMatrixGrid({
       {/* Column tick labels for graphics sliders (shown with or without anchor labels) */}
       {isGraphics && m > 0 && (
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: showLabels ? '8px' : '16px', minHeight: '24px' }}>
-          <div style={{ width: '180px', flexShrink: 0 }} />
+          <div style={{ width: 'var(--cfm-matrix-row-width, 180px)', flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
             <GraphicsColumnLabelsRow scaleColumns={scaleColumns} />
             {hasNotApplicable && (
@@ -232,13 +238,13 @@ function CsatMatrixGrid({
       {/* Column Headers for non-graphics */}
       {!isGraphics && !showLabels && m > 0 && (
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '16px', minHeight: '24px' }}>
-          <div style={{ width: '180px', flexShrink: 0 }} />
+          <div style={{ width: 'var(--cfm-matrix-row-width, 180px)', flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
             <div style={{ flex: 1, display: 'grid', gridTemplateColumns: `repeat(${scaleColumns.length}, 1fr)` }}>
               {scaleColumns.map(col => (
                 <div key={col.id} style={{ display: 'flex', justifyContent: 'center', padding: '0 4px' }}>
                   <span
-                    style={{ fontSize: '13px', fontWeight: 500, color: '#4b5563', textAlign: 'center', lineHeight: 1.2 }}
+                    style={{ fontSize: '13px', fontWeight: 500, textAlign: 'center', lineHeight: 1.2, ...csatColumnLabelStyle() }}
                     dangerouslySetInnerHTML={{ __html: col.label }}
                   />
                 </div>
@@ -258,9 +264,9 @@ function CsatMatrixGrid({
         {statementRows.map((row, rowIdx) => (
           <div key={row.id} style={{
             display: 'flex', alignItems: 'center', borderRadius: '8px',
-            padding: '12px 0', backgroundColor: rowIdx % 2 === 0 ? 'rgba(249, 250, 251, 0.8)' : '#fff',
+            padding: '12px 0', backgroundColor: rowIdx % 2 === 0 ? 'var(--cfm-zebra-row)' : '#fff',
           }}>
-            <div style={{ width: '180px', flexShrink: 0, padding: '0 16px' }}>
+            <div style={{ width: 'var(--cfm-matrix-row-width, 180px)', flexShrink: 0, padding: '0 16px' }}>
               <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4 }}
                 dangerouslySetInnerHTML={{ __html: row.statementText }} />
             </div>
@@ -298,13 +304,8 @@ function CsatMatrixGrid({
                   const StarNode = isStar ? (isSelected ? (CsatStarIcons.filled as any) : (CsatStarIcons.empty as any)) : null;
 
                   const RadioNode = (
-                    <div style={{
-                      display: 'flex', width: '18px', height: '18px',
-                      alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
-                      margin: '0 auto', border: isSelected ? '2px solid #e20074' : '2px solid #d1d5db',
-                      backgroundColor: '#fff',
-                    }}>
-                      {isSelected && <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
+                    <div style={matrixRadioRingStyle(isSelected)}>
+                      {isSelected && <div style={matrixRadioDotStyle(isSelected)} />}
                     </div>
                   );
 
@@ -324,23 +325,26 @@ function CsatMatrixGrid({
                             cursor: 'pointer', borderRadius: '6px',
                             ...(isEmoji ? {
                               padding: '6px',
+                              ...emojiSizeStyle(),
                               transform: isSelected ? 'scale(1.1)' : isHovered ? 'scale(1.25)' : 'scale(1)',
                               ...(isSelected ? {
-                                backgroundColor: 'rgba(252, 231, 243, 0.6)',
-                                boxShadow: '0 0 0 2px rgba(226, 0, 116, 0.3)',
+                                backgroundColor: 'var(--cfm-mcq-selected-bg)',
+                                boxShadow: `0 0 0 2px ${focusRingVar}`,
                                 borderRadius: '50%',
                               } : {}),
                             } : isStar ? {
                               padding: '4px',
                               transform: isHovered ? 'scale(1.1)' : 'scale(1)',
-                              opacity: isSelected ? 1 : isHovered ? 1 : 0.5,
+                              ...(isSelected ? {} : unselectedOpacityStyle()),
+                              opacity: isSelected ? 1 : isHovered ? 1 : undefined,
                               } : isNumbered ? {
-                                width: '40px', height: '40px', borderRadius: '8px',
+                                width: 'var(--cfm-csat-cell-size, 40px)', height: 'var(--cfm-csat-cell-size, 40px)', borderRadius: '8px',
                                 fontSize: '14px', fontWeight: 500,
-                                border: `1px solid ${isSelected ? '#e20074' : '#d1d5db'}`,
-                                backgroundColor: isSelected ? '#e20074' : '#fff',
+                                border: `1px solid ${isSelected ? focusRingVar : '#d1d5db'}`,
+                                backgroundColor: isSelected ? cellSelectedVar : '#fff',
                                 color: isSelected ? '#fff' : '#111827',
                                 transition: 'all 0.15s',
+                                ...(isSelected ? scaleCellSelectedStyle(true) : {}),
                               } : { padding: '8px' }),
                           }}
                         >
@@ -378,7 +382,7 @@ function CsatMatrixGrid({
                 <label style={{ cursor: 'pointer' }}>
                   <input type="checkbox" checked={selectedValue[row.id] === null}
                     onChange={() => onCellSelect(row.id, selectedValue[row.id] === null ? undefined : null)}
-                    style={{ width: '16px', height: '16px', accentColor: '#e20074', cursor: 'pointer' }} />
+                    style={{ width: '16px', height: '16px', accentColor: focusRingVar, cursor: 'pointer' }} />
                 </label>
               </div>
             )}
@@ -437,7 +441,8 @@ function CsatMatrixCarousel({
               <div key={i} style={{
                 position: 'absolute', left: `${percent}%`, transform: 'translateX(-50%)',
                 textAlign: 'center', fontSize: '13px', fontWeight: 600,
-                color: '#4b5563', lineHeight: 1.3, whiteSpace: 'nowrap'
+                lineHeight: 1.3, whiteSpace: 'nowrap',
+                ...csatColumnLabelStyle(),
               }}>
                 {label}
               </div>
@@ -481,13 +486,8 @@ function CsatMatrixCarousel({
             const EmojiNode = isEmoji ? getEmojiForIndex(displayIdx, scaleColumns.length) : null;
             const StarNode = isStar ? (isSelected ? (CsatStarIcons.filled as any) : (CsatStarIcons.empty as any)) : null;
             const RadioNode = (
-              <div style={{
-                display: 'flex', width: '18px', height: '18px',
-                alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
-                margin: '0 auto', border: isSelected ? '2px solid #e20074' : '2px solid #d1d5db',
-                backgroundColor: '#fff',
-              }}>
-                {isSelected && <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
+              <div style={matrixRadioRingStyle(isSelected)}>
+                {isSelected && <div style={matrixRadioDotStyle(isSelected)} />}
               </div>
             );
 
@@ -503,19 +503,23 @@ function CsatMatrixCarousel({
                     transition: 'all 0.15s', border: 'none', backgroundColor: 'transparent',
                     cursor: 'pointer', borderRadius: '6px', pointerEvents: 'none',
                     ...(isEmoji ? {
-                      padding: '6px', transform: isSelected ? 'scale(1.1)' : isHovered ? 'scale(1.25)' : 'scale(1)',
-                      ...(isSelected ? { backgroundColor: 'rgba(252, 231, 243, 0.6)', boxShadow: '0 0 0 2px rgba(226, 0, 116, 0.3)', borderRadius: '50%' } : {}),
+                      padding: '6px', ...emojiSizeStyle(),
+                      transform: isSelected ? 'scale(1.1)' : isHovered ? 'scale(1.25)' : 'scale(1)',
+                      ...(isSelected ? { backgroundColor: 'var(--cfm-mcq-selected-bg)', boxShadow: `0 0 0 2px ${focusRingVar}`, borderRadius: '50%' } : {}),
                     } : isStar ? {
-                      padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)', opacity: isSelected ? 1 : isHovered ? 1 : 0.5,
+                      padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)',
+                      ...(isSelected ? {} : unselectedOpacityStyle()),
+                      opacity: isSelected ? 1 : isHovered ? 1 : undefined,
                     } : isNumbered ? {
-                      width: '40px', height: '40px', borderRadius: '8px', fontSize: '14px', fontWeight: 500,
-                      border: `1px solid ${isSelected ? '#e20074' : '#d1d5db'}`, backgroundColor: isSelected ? '#e20074' : '#fff', color: isSelected ? '#fff' : '#111827',
+                      width: 'var(--cfm-csat-cell-size, 40px)', height: 'var(--cfm-csat-cell-size, 40px)', borderRadius: '8px', fontSize: '14px', fontWeight: 500,
+                      border: `1px solid ${isSelected ? focusRingVar : '#d1d5db'}`, backgroundColor: isSelected ? cellSelectedVar : '#fff', color: isSelected ? '#fff' : '#111827',
+                      ...(isSelected ? scaleCellSelectedStyle(true) : {}),
                     } : { padding: '8px' }),
                   }}
                 >
                   {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
                 </button>
-                <span style={{ fontSize: '13px', fontWeight: 500, color: '#4b5563', textAlign: 'center', lineHeight: 1.2 }}
+                <span style={{ fontSize: '13px', fontWeight: 500, textAlign: 'center', lineHeight: 1.2, ...csatColumnLabelStyle() }}
                       dangerouslySetInnerHTML={{ __html: col.label }} />
               </div>
             );
@@ -528,7 +532,7 @@ function CsatMatrixCarousel({
           <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
             <input type="checkbox" checked={selectedValue[row.id] === null}
                    onChange={() => onCellSelect(row.id, selectedValue[row.id] === null ? undefined : null)}
-                   style={{ width: '16px', height: '16px', accentColor: '#e20074', cursor: 'pointer' }} />
+                   style={{ width: '16px', height: '16px', accentColor: focusRingVar, cursor: 'pointer' }} />
             <span style={{ fontSize: '14px', fontWeight: 500, color: '#4b5563' }}>N/A</span>
           </label>
         </div>
@@ -550,7 +554,7 @@ function CsatMatrixCarousel({
             <button key={i} type="button" onClick={() => setActiveCarouselIndex(i)}
                     style={{
                       width: i === activeCarouselIndex ? '20px' : '8px', height: '8px', borderRadius: '4px',
-                      backgroundColor: i === activeCarouselIndex ? '#e20074' : '#d1d5db', border: 'none', padding: 0,
+                      backgroundColor: i === activeCarouselIndex ? cellSelectedVar : '#d1d5db', border: 'none', padding: 0,
                       cursor: 'pointer', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
                     }} />
           ))}
@@ -590,7 +594,6 @@ export function CsatMatrixScale({ question, selectedValue = {}, onSelect }: Csat
   const isStar = displayStyle === 'star';
   const isNumbered = displayStyle === 'numbered';
   const isGraphics = displayStyle === 'graphics';
-  const isStandardRadio = displayStyle === 'standard';
 
   const scaleColumns = nonNaScaleColumns(question.scaleColumns);
 
@@ -609,7 +612,7 @@ export function CsatMatrixScale({ question, selectedValue = {}, onSelect }: Csat
     );
   }
 
-  if (isDropdown || isSelectBox || isStandardRadio) {
+  if (isDropdown || isSelectBox) {
     return (
       <CsatMatrixVerticalList
         question={question}