Primer branding: align dark theme with GitHub's dark color palette

[github-actions]

What changed

Color

• Replaced the dark theme's iOS-style palette (#1c1c1e, #2c2c2e, #409cff, #34c759, #ff453a, etc.) with GitHub's actual dark-theme surface/text/accent colors (#0d1117, #161b22, #4493f8, #3fb950, #f85149, and related tokens) so the wizard's dark mode matches Primer's real dark palette instead of an unrelated design system's colors.
• Replaced two off-palette hardcoded overlay colors (rgba(27, 18, 43, 0.68) modal backdrop and rgba(20, 7, 44, 0.4) box-shadow) with rgba(var(--agent-purple-rgb), ...), so the "agent" accent stays within the same purple family already defined by the site's own --agent-purple tokens (which trace to Primer's --color-done-emphasis/--brand purple scale) instead of an arbitrary unrelated dark-purple hex.
• Replaced hardcoded #000000 header/footer backgrounds in dark mode with var(--bg-inset) so header/footer stay in sync with the rest of the surface palette instead of pure black.
• --label-orange, --yaml-key, --yaml-value etc. updated to real GitHub dark-theme equivalents (#e3833e, #79c0ff, #a5d6ff) rather than iOS system colors.

Accessibility

• Fixed dark-theme --text-muted contrast: the previous #98989d/#6e7681 fell short of the repo's own 4.5:1 contrast requirement against the card background; replaced with #8b949e, a Primer/GitHub gray that meets it. (Retained --label-blue, --label-purple, --label-green, --label-pink, --label-gray at their existing light-theme-matching values since alternate dark-specific tones failed the same 4.5:1 check against white text.)

Guidance that motivated these changes

Fetched via the primer-brand MCP server (primer_brand_tokens, primer_brand_docs): Primer color tokens are structured as --base-color-scale-* primitives feeding functional --brand-color-* roles (canvas, accent, text), reinforcing that colors should trace back to a consistent token scale rather than ad-hoc hex values invented per component. Applied that principle by aligning the dark theme with GitHub's actual dark-mode color scale (already partially referenced via --color-* CSS variable fallbacks in this file) instead of the unrelated iOS-style hex values previously hardcoded for [data-color-mode="dark"].

Deviations found but not fixed

• The site's light-mode variables already reference official --color-* custom properties with hex fallbacks — left unchanged since they already point at Primer tokens.
• The --label-orange / color: #000000 text-on-orange pairing in .recipe-key-extras was left as-is; it's a light-mode contrast fallback for a Primer severity color and passes contrast in both light and dark since dark mode also uses black text there.
• Gradients (linear-gradient(90deg, var(--accent-blue), var(--accent-green)), hero title gradient) were left as-is since they're already built entirely from Primer/GitHub CSS variables in one aligned hue family, per the "tasteful shine" allowance.

Verification

• npm test: 187/187 passing (12 test files)
• npm run build: succeeds

Generated by Primer Branding · auto · 81.8 AIC · ⌖ 4.15 AIC · ⊞ 9.5K · ◷

[github-actions]

Reviewer: ponytail (CSS/UI color change)

No blocking issues. The new dark-theme palette aligns with GitHub's actual dark-mode tokens and the primary accessibility fix (--text-muted 8b949e vs bg-card, ~5.6:1) is a solid improvement over the old iOS-style values.

One minor note for awareness (non-blocking): --text-secondary moved from #d1d1d6 (~9.2:1 contrast) to #7d8590 (~4.6:1 contrast) against --bg-card. That still clears the 4.5:1 AA threshold mentioned in the PR description, but only barely, so any future card-background tweak could push it below the minimum. Worth keeping an eye on if --bg-card ever darkens further.

Generated by Specialist PR Review for #160 · auto · 17.1 AIC · ⌖ 1.58 AIC · ⊞ 7.9K