Corner radius — design-system rule

A radius scale already exists — src/app/tw-theme.css (Tailwind v4 @theme). Use it. Do NOT define a parallel --radius-* in tokens.css/:root (it shadows the @theme scale and silently changes every rounded-* utility).

The scale (tw-theme.css @theme)

Token	rounded-*	px	Intended for
--radius-xs	rounded-xs	2	tab accent bar, hairline corners
--radius-sm	rounded-sm	4	buttons, inputs, badges
--radius-md	rounded-md	6	dropdowns, tooltips, alpha index tiles
--radius-lg	rounded-lg	8	primary card surface
--radius-xl	rounded-xl	12	modals, overlays, hero cards
--radius-2xl	rounded-2xl	16	hero blocks
--radius-full	rounded-full	∞	pills, toggles

How to apply

• Tailwind components → use the rounded-* utility (already token-backed). Don't use rounded-[10px] arbitraries.
• Raw CSS components (archive.css pills etc.) → border-radius: var(--radius-md) etc. Never a raw rem.

Convention by component

• Tabs (.cn-tabs, .cn-mc-tabnav) → no box radius (underline); accent bar rounded-xs/rounded-t.
• Pills / toggles (filter chips, presets, .cn-toggle) → rounded-full.
• Alpha index tiles → --radius-md (slightly squared — reads as an index, not a pill).
• Cards → rounded-lg / --radius-lg (or xl for elevated/hero cards).
• Inputs / buttons → rounded-sm / --radius-sm.

Status

• Standard already existed; documented + the convention mapped above.
• Aligned the alpha tile to --radius-md (was a raw 0.375rem).
• A brief mistake (a parallel --radius-* in tokens.css) was reverted — it had overridden the @theme scale.
• Migrate-on-touch: replace raw border-radius: <rem> / rounded-[..] arbitraries with the token when editing a file. No blind mass sweep — the Tailwind utilities are already token-backed, so most of the codebase is fine.