Establish the semantic token layer (UI parity round 1)

[s-annam]

Round 1 — Establish the semantic token layer

Part of the UI-parity epic (#22). resumelint has no design tokens: tailwind.config.js defines colors as zero (fontFamily only), src/styles.css hardcodes bg-white / bg-neutral-950 with a manual prefers-color-scheme block, and the three feature components carry ~120 raw palette classes (text-neutral-500, bg-amber-100, border-neutral-800, …) each with hand-rolled dark variants.

This round ports the token substrate from Recruidea so feature code has real semantic classes to reuse — matching what CLAUDE.md already (incorrectly) claims is canonical.

Scope

1. Palette → src/styles.css. Port the light + dark --color-* values from Recruidea packages/expo-common/src/theme/tokens.ts (lightPalette / darkPalette) into a :root { … } block plus a dark block. Recruidea drives dark mode via NativeWind vars(); resumelint is plain Vite + Tailwind, so adapt — use @media (prefers-color-scheme: dark) (current mechanism) to swap the --color-* values. Keep only the tokens resumelint actually uses (brand, surface, content, border, accent, feedback) — drop status/tier/sponsor/chip palettes that belong to the dashboard app.

2. Mapping → tailwind.config.js. Extend theme.extend.colors to map semantic names to the vars, matching Recruidea's names exactly:

   • surface: { base, card, card-warm, subtle, hover }
   • content: { primary, secondary, tertiary, muted, inverse }
   • border: { light, DEFAULT, strong }
   • brand: { navy, navy-dark, amber, amber-light, cream }
   • accent: { primary, primary-hover, forward, forward-bg }
   • feedback (error/warning/info/success) bg/border/text/icon

3. Migrate components. Replace every raw palette class in src/components/{DropZone,PdfPreview,Result}.tsx with the semantic equivalent. Manual dark: variants disappear — the var swap handles dark mode. Target: zero (bg|text|border|from|to)-(neutral|gray|slate|red|amber|green|orange|zinc|stone)-N classes remaining under src/components.

4. Reconcile CLAUDE.md. The "Styling & Tokens" section names bg-surface / text-ink / text-brand-primary. Rename to the adopted vocab (bg-surface-card, text-content-primary, text-brand-amber) so doc matches code.

Explicitly NOT this round

• No visual redesign. Net visual change should be ~neutral — this is a substrate swap, not the score-card chrome (that's Round 2).
• No Result.tsx decomposition (separate concern).

Acceptance

• grep -rE "(bg|text|border|from|to)-(neutral|gray|slate|red|amber|green|orange|zinc|stone)-[0-9]" src/components returns nothing
• tailwind.config.js exposes the semantic token names above; styles.css defines the light + dark --color-* values
• CLAUDE.md token vocab matches the shipped config
• npm run typecheck and npm run build green
• Manual check: light + dark render with no obvious regression vs current

References (local ~/recruidea)

• packages/expo-common/src/theme/tokens.ts — lightPalette / darkPalette
• dashboard/tailwind.config.js — semantic name mapping to copy

[s-annam]

Implementation Complete — 96cbcc8 (PR #27, merged)

Acceptance Criteria

• No raw palette classes under src/components — grep -rE "(bg|text|border|from|to)-(neutral|gray|slate|red|amber|green|orange|zinc|stone|emerald)-[0-9]" src/components returns nothing
• Semantic token names in tailwind.config.js — theme.extend.colors exposes brand / surface / content / border / accent / feedback, names matching Recruidea exactly; styles.css defines light + dark --color-* values in :root / @media (prefers-color-scheme: dark)
• CLAUDE.md vocab matches shipped config — Styling & Tokens section renamed to bg-surface-card / text-content-primary / border-border-light / text-brand-amber
• npm run typecheck + npm run build green
• Light + dark render, no regression — verified headless (Playwright colorScheme contexts) across landing + Result card; body var swap confirmed numerically (light #FAFAF8/#111827, dark #0f1419/#f0f2f5), feedback pills correct in both schemes

Additional Changes

• Body now uses bg-surface-base + text-content-primary; the old dark: body override and per-component dark: palette variants were removed (CSS var swap drives dark mode)
• Carry to Round 2: src/App.tsx still carries raw palette classes (out of scope this round — renders fine since Tailwind default palettes remain available)