chore(theme): migrate remaining inline var()/style theme colors to Tailwind utilities

[yigitdot]

Background

Follow-up to review comments on #3. The design system exposes --color-ink, --color-paper, and --color-whisper through @theme inline in app/globals.css, so Tailwind v4 auto-generates utilities (text-ink, bg-paper, text-whisper, bg-whisper, …). Some components still use arbitrary-value classes (text-[var(--paper)]) or inline style={{ color: "var(--whisper)" }} for those same tokens, which both review bots flagged for consistency. Folding this in now would have widened the PR diff; tracking here instead.

Audit refresh (2026-05-11): issue body updated against current main. Line numbers shifted, two original bullets are obsolete (Hero live-dot and Close brand dot were removed in 8b206ea), the Chrome IO threshold concern is already fixed (now uses rootMargin scheme), and the "optional broader pass" collapses to one file (Frame.tsx). One new instance found.

In scope

• `components/ui/Frame.tsx:13-16` — the section-tone map is the central place this lives. Two strings to migrate:
  • `ink: "bg-[var(--ink)] text-[var(--paper)]"` → `"bg-ink text-paper"`
  • `paper: "bg-[var(--paper)] text-[var(--ink)]"` → `"bg-paper text-ink"`
• `components/site/Chrome.tsx:117` — `text-[var(--paper)]` / `text-[var(--ink)]` → `text-paper` / `text-ink`.
• `components/site/Chrome.tsx:173` (Docs) and `:183` (Litepaper) — both links carry inline `style={{ borderBottom: "1px solid currentColor", paddingBottom: 2 }}` → `className="… border-b border-current pb-[2px]"`.
• `components/site/Hero.tsx:25` — accent period `style={{ color: "var(--whisper)" }}` → `className="text-whisper"`.
• `components/site/Hero.tsx:43` — brand span inside hero paragraph → `text-whisper`.
• `components/site/Comparison.tsx:35` — brand span in bridge paragraph → `text-whisper`.
• `components/site/Comparison.tsx:81` — strikethrough rule `style={{ background: "var(--paper)" }}` → `className="… bg-paper"`. (Not flagged originally; same anti-pattern.)
• `components/site/Close.tsx:46` — brand span → `text-whisper`.
• `components/ui/FaqItem.tsx:6` — brand span → `text-whisper`.

Already resolved (no action)

• `Chrome.tsx` — the IO threshold `[0.3, 0.6]` concern from round 3 is gone. The tone-flip and active-nav indicator share one `rootMargin`-driven IO (`threshold: 0`), so the FAQ-mobile activation bug it called out is already addressed.

Verification

1. `pnpm lint && pnpm exec tsc --noEmit && pnpm build`.
2. `pnpm dev` and confirm at `localhost:3000`:
   • Whisper-green accents remain on: hero headline period, every `deCDN` in body copy (hero, comparison, close, FAQ), fleet-node pulses.
   • Per-section navbar tone flip: ink text on §01/§03/§05, paper text on §02/§04, no flicker as you scroll.
   • The strikethrough rule across the legacy CDN price in §02 still renders 2px / 4px at the @XL breakpoint.
   • Docs and Litepaper navbar links keep their 1px underline + 2px gap.

Links

• Source PR: feat: brutalist one-page rebuild with scroll reveals #3
• Review rounds: 2026-04-17 17:10 (gemini), 2026-04-17 21:49 (copilot + gemini), 2026-04-18 11:20 (gemini — round 3, this issue)
• Audit refresh: 2026-05-11