Replace raw Tailwind color utilities with semantic theme tokens

[Copilot]

HTML fragments violated theme guidelines by using hardcoded Tailwind color utilities (bg-blue-500, text-cyan-900, etc.) instead of semantic theme classes or CSS variables.

Changes

Fixed 5 files with raw color violations:

• papers/p26/interactive.html - Replaced cyan color scheme with panel panel-info and semantic classes
• papers/p31,p32,p33,p49/interactive.html - Converted progress bar colors from utility classes to inline CSS variables

Example transformation:

- <div id="bar" class="h-full bg-blue-500" style="width: 70%"></div>
+ <div id="bar" class="h-full" style="width: 70%; background-color: var(--tone-sky-strong);"></div>

Color mapping applied:

• bg-blue-500 → var(--tone-sky-strong)
• bg-green-500 → var(--tone-emerald-strong)
• bg-purple-500 → var(--tone-purple-strong)
• text-cyan-900, border-cyan-100 → semantic classes (text-heading, panel-muted, panel panel-info)

Note

Inline style="width: X%" attributes remain - these are dynamically updated by JavaScript and are legitimate per guidelines. Only hardcoded color utilities were violations.

Original prompt

Review the HTML structure of the pages and check if they stick to the theme and the guidelines as described in the md files

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.