Bump border radius tokens for rounder UI surfaces

Increase radius-md from 6px to 8px and radius-lg from 8px to 12px
for a more modern, polished look on buttons, inputs, and card surfaces.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/App.tsx

@@ -30,6 +30,7 @@ import { useBulkImport } from "./hooks/use-bulk-import";
 import { useEncounter } from "./hooks/use-encounter";
 import { usePlayerCharacters } from "./hooks/use-player-characters";
 import { useSidePanelState } from "./hooks/use-side-panel-state";
+import { cn } from "./lib/utils";
 
 function rollDice(): number {
 	return Math.floor(Math.random() * 20) + 1;
@@ -53,12 +54,12 @@ function useActionBarAnimation(combatantCount: number) {
 	}, [combatantCount]);
 
 	const empty = combatantCount === 0;
-	const risingClass = rising ? " animate-rise-to-center" : "";
-	const settlingClass = settling ? " animate-settle-to-bottom" : "";
+	const risingClass = rising ? "animate-rise-to-center" : "";
+	const settlingClass = settling ? "animate-settle-to-bottom" : "";
 	const exitingClass = topBarExiting
-		? " absolute inset-x-0 top-0 z-10 px-4 animate-slide-up-out"
+		? "absolute inset-x-0 top-0 z-10 px-4 animate-slide-up-out"
 		: "";
-	const topBarClass = settling ? " animate-slide-down-in" : exitingClass;
+	const topBarClass = settling ? "animate-slide-down-in" : exitingClass;
 	const showTopBar = !empty || topBarExiting;
 
 	return {
@@ -200,7 +201,7 @@ export function App() {
 			<div className="relative mx-auto flex min-h-0 w-full max-w-2xl flex-1 flex-col gap-3 px-4">
 				{!!actionBarAnim.showTopBar && (
 					<div
-						className={`shrink-0 pt-8${actionBarAnim.topBarClass}`}
+						className={cn("shrink-0 pt-8", actionBarAnim.topBarClass)}
 						onAnimationEnd={actionBarAnim.onTopBarExitEnd}
 					>
 						<TurnNavigation
@@ -216,7 +217,7 @@ export function App() {
 					/* Empty state — ActionBar centered */
 					<div className="flex min-h-0 flex-1 items-center justify-center pt-8 pb-[15%]">
 						<div
-							className={`w-full${actionBarAnim.risingClass}`}
+							className={cn("w-full", actionBarAnim.risingClass)}
 							onAnimationEnd={actionBarAnim.onRiseEnd}
 						>
 							<ActionBar
@@ -275,7 +276,7 @@ export function App() {
 
 						{/* Action Bar — fixed at bottom */}
 						<div
-							className={`shrink-0 pb-8${actionBarAnim.settlingClass}`}
+							className={cn("shrink-0 pb-8", actionBarAnim.settlingClass)}
 							onAnimationEnd={actionBarAnim.onSettleEnd}
 						>
 							<ActionBar

apps/web/src/components/__tests__/combatant-row.test.tsx

@@ -75,7 +75,7 @@ describe("CombatantRow", () => {
 	it("active combatant gets active border styling", () => {
 		const { container } = renderRow({ isActive: true });
 		const row = container.firstElementChild;
-		expect(row?.className).toContain("border-l-accent");
+		expect(row?.className).toContain("border-accent/40");
 	});
 
 	it("unconscious combatant (currentHp === 0) gets dimmed styling", () => {

apps/web/src/components/action-bar.tsx

@@ -77,7 +77,7 @@ function AddModeSuggestions({
 	onAddFromPlayerCharacter?: (pc: PlayerCharacter) => void;
 }>) {
 	return (
-		<div className="absolute bottom-full z-50 mb-1 w-full max-w-xs rounded-md border border-border bg-card shadow-lg">
+		<div className="card-glow absolute bottom-full z-50 mb-1 w-full max-w-xs rounded-lg border border-border bg-card">
 			<button
 				type="button"
 				className="flex w-full items-center gap-1.5 border-border border-b px-3 py-2 text-left text-accent text-sm hover:bg-accent/20"
@@ -137,12 +137,14 @@ function AddModeSuggestions({
 								<li key={key}>
 									<button
 										type="button"
-										className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${(() => {
-											if (isQueued) return "bg-accent/30 text-foreground";
-											if (i === suggestionIndex)
-												return "bg-accent/20 text-foreground";
-											return "text-foreground hover:bg-hover-neutral-bg";
-										})()}`}
+										className={cn(
+											"flex w-full items-center justify-between px-3 py-1.5 text-left text-foreground text-sm",
+											isQueued && "bg-accent/30",
+											!isQueued && i === suggestionIndex && "bg-accent/20",
+											!isQueued &&
+												i !== suggestionIndex &&
+												"hover:bg-hover-neutral-bg",
+										)}
 										onMouseDown={(e) => e.preventDefault()}
 										onClick={() => onClickSuggestion(result)}
 										onMouseEnter={() => onSetSuggestionIndex(i)}
@@ -455,7 +457,7 @@ export function ActionBar({
 	});
 
 	return (
-		<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
+		<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
 			<form
 				onSubmit={handleAdd}
 				className="relative flex flex-1 items-center gap-2"
@@ -496,17 +498,18 @@ export function ActionBar({
 							</button>
 						)}
 						{browseMode && deferredSuggestions.length > 0 && (
-							<div className="absolute bottom-full z-50 mb-1 w-full rounded-md border border-border bg-card shadow-lg">
+							<div className="card-glow absolute bottom-full z-50 mb-1 w-full rounded-lg border border-border bg-card">
 								<ul className="max-h-48 overflow-y-auto py-1">
 									{deferredSuggestions.map((result, i) => (
 										<li key={creatureKey(result)}>
 											<button
 												type="button"
-												className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${
+												className={cn(
+													"flex w-full items-center justify-between px-3 py-1.5 text-left text-sm",
 													i === suggestionIndex
 														? "bg-accent/20 text-foreground"
-														: "text-foreground hover:bg-hover-neutral-bg"
-												}`}
+														: "text-foreground hover:bg-hover-neutral-bg",
+												)}
 												onMouseDown={(e) => e.preventDefault()}
 												onClick={() => handleBrowseSelect(result)}
 												onMouseEnter={() => setSuggestionIndex(i)}

apps/web/src/components/combatant-row.tsx

@@ -365,7 +365,7 @@ function rowBorderClass(
 	isActive: boolean,
 	isConcentrating: boolean | undefined,
 ): string {
-	if (isActive) return "border-l-2 border-l-accent bg-accent/10";
+	if (isActive) return "border border-accent/40 bg-accent/10 card-glow";
 	if (isConcentrating) return "border-l-2 border-l-purple-400";
 	return "border-l-2 border-l-transparent";
 }
@@ -434,7 +434,7 @@ export function CombatantRow({
 		<div
 			ref={ref}
 			className={cn(
-				"group rounded-md pr-3 transition-colors",
+				"group rounded-lg pr-3 transition-colors",
 				rowBorderClass(isActive, combatant.isConcentrating),
 				isPulsing && "animate-concentration-pulse",
 			)}

apps/web/src/components/condition-picker.tsx

@@ -97,7 +97,7 @@ export function ConditionPicker({
 		<div
 			ref={ref}
 			className={cn(
-				"absolute left-0 z-10 w-fit overflow-y-auto rounded-md border border-border bg-background p-1 shadow-lg",
+				"card-glow absolute left-0 z-10 w-fit overflow-y-auto rounded-lg border border-border bg-background p-1",
 				flipped ? "bottom-full mb-1" : "top-full mt-1",
 			)}
 			style={maxHeight ? { maxHeight } : undefined}

apps/web/src/components/condition-tags.tsx

@@ -18,6 +18,7 @@ import {
 	Sparkles,
 	ZapOff,
 } from "lucide-react";
+import { cn } from "../lib/utils.js";
 
 const ICON_MAP: Record<string, LucideIcon> = {
 	EyeOff,
@@ -75,7 +76,10 @@ export function ConditionTags({
 						type="button"
 						title={def.label}
 						aria-label={`Remove ${def.label}`}
-						className={`inline-flex items-center rounded p-0.5 transition-colors hover:bg-hover-neutral-bg ${colorClass}`}
+						className={cn(
+							"inline-flex items-center rounded p-0.5 transition-colors hover:bg-hover-neutral-bg",
+							colorClass,
+						)}
 						onClick={(e) => {
 							e.stopPropagation();
 							onRemove(condId);

apps/web/src/components/create-player-modal.tsx

@@ -106,7 +106,7 @@ export function CreatePlayerModal({
 	return (
 		<dialog
 			ref={dialogRef}
-			className="m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl backdrop:bg-black/50"
+			className="card-glow m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 backdrop:bg-black/50"
 		>
 			<div className="mb-4 flex items-center justify-between">
 				<h2 className="font-semibold text-foreground text-lg">

apps/web/src/components/hp-adjust-popover.tsx

@@ -87,7 +87,7 @@ export function HpAdjustPopover({ onAdjust, onClose }: HpAdjustPopoverProps) {
 	return (
 		<div
 			ref={ref}
-			className="fixed z-10 rounded-md border border-border bg-background p-2 shadow-lg"
+			className="card-glow fixed z-10 rounded-lg border border-border bg-background p-2"
 			style={
 				pos
 					? { top: pos.top, left: pos.left }

apps/web/src/components/player-management.tsx

@@ -55,7 +55,7 @@ export function PlayerManagement({
 	return (
 		<dialog
 			ref={dialogRef}
-			className="m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl backdrop:bg-black/50"
+			className="card-glow m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 backdrop:bg-black/50"
 		>
 			<div className="mb-4 flex items-center justify-between">
 				<h2 className="font-semibold text-foreground text-lg">

apps/web/src/components/stat-block-panel.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import { getSourceDisplayName } from "../adapters/bestiary-index-adapter.js";
 import type { BulkImportState } from "../hooks/use-bulk-import.js";
 import { useSwipeToDismiss } from "../hooks/use-swipe-to-dismiss.js";
+import { cn } from "../lib/utils.js";
 import { BulkImportPrompt } from "./bulk-import-prompt.js";
 import { SourceFetchPrompt } from "./source-fetch-prompt.js";
 import { SourceManager } from "./source-manager.js";
@@ -55,9 +56,10 @@ function CollapsedTab({
 		<button
 			type="button"
 			onClick={onToggleCollapse}
-			className={`flex h-full w-[40px] cursor-pointer items-center justify-center text-muted-foreground hover:text-hover-neutral ${
-				side === "right" ? "self-start" : "self-end"
-			}`}
+			className={cn(
+				"flex h-full w-[40px] cursor-pointer items-center justify-center text-muted-foreground hover:text-hover-neutral",
+				side === "right" ? "self-start" : "self-end",
+			)}
 			aria-label="Expand stat block panel"
 		>
 			<span className="writing-vertical-rl font-medium text-sm">
@@ -152,7 +154,11 @@ function DesktopPanel({
 
 	return (
 		<div
-			className={`fixed top-0 bottom-0 flex w-[400px] flex-col border-border bg-card transition-slide-panel ${sideClasses} ${isCollapsed ? collapsedTranslate : "translate-x-0"}`}
+			className={cn(
+				"panel-glow fixed top-0 bottom-0 flex w-[400px] flex-col border-border bg-card transition-slide-panel",
+				sideClasses,
+				isCollapsed ? collapsedTranslate : "translate-x-0",
+			)}
 		>
 			{isCollapsed ? (
 				<CollapsedTab
@@ -194,7 +200,10 @@ function MobileDrawer({
 				aria-label="Close stat block"
 			/>
 			<div
-				className={`absolute top-0 right-0 bottom-0 w-[85%] max-w-md border-border border-l bg-card shadow-xl ${isSwiping ? "" : "animate-slide-in-right"}`}
+				className={cn(
+					"panel-glow absolute top-0 right-0 bottom-0 w-[85%] max-w-md border-border border-l bg-card",
+					!isSwiping && "animate-slide-in-right",
+				)}
 				style={
 					isSwiping ? { transform: `translateX(${offsetX}px)` } : undefined
 				}

apps/web/src/components/toast.tsx

@@ -24,7 +24,7 @@ export function Toast({
 
 	return createPortal(
 		<div className="fixed bottom-4 left-4 z-50">
-			<div className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 shadow-lg">
+			<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
 				<span className="text-foreground text-sm">{message}</span>
 				{progress !== undefined && (
 					<div className="h-2 w-24 overflow-hidden rounded-full bg-muted">

apps/web/src/components/turn-navigation.tsx

@@ -21,7 +21,7 @@ export function TurnNavigation({
 	const activeCombatant = encounter.combatants[encounter.activeIndex];
 
 	return (
-		<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
+		<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
 			<Button
 				variant="outline"
 				size="icon"

apps/web/src/components/ui/button.tsx

@@ -9,7 +9,7 @@ const buttonVariants = cva(
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",
 				outline:
-					"border border-border bg-transparent text-foreground hover:bg-hover-neutral-bg hover:text-hover-neutral",
+					"border border-border bg-background/50 text-foreground hover:bg-hover-neutral-bg hover:text-hover-neutral",
 				ghost:
 					"text-foreground hover:bg-hover-neutral-bg hover:text-hover-neutral",
 			},

apps/web/src/components/ui/overflow-menu.tsx

@@ -49,7 +49,7 @@ export function OverflowMenu({ items }: OverflowMenuProps) {
 				<EllipsisVertical className="h-5 w-5" />
 			</Button>
 			{!!open && (
-				<div className="absolute right-0 bottom-full z-50 mb-1 min-w-48 rounded-md border border-border bg-card py-1 shadow-lg">
+				<div className="card-glow absolute right-0 bottom-full z-50 mb-1 min-w-48 rounded-lg border border-border bg-card py-1">
 					{items.map((item) => (
 						<button
 							key={item.label}

apps/web/src/index.css

@@ -1,14 +1,14 @@
 @import "tailwindcss";
 
 @theme {
-	--color-background: #0f172a;
+	--color-background: #0e1a2e;
 	--color-foreground: #e2e8f0;
-	--color-muted: #64748b;
+	--color-muted: #7a8ba4;
 	--color-muted-foreground: #94a3b8;
-	--color-card: #1e293b;
+	--color-card: #1a2e4a;
 	--color-card-foreground: #e2e8f0;
-	--color-border: #334155;
-	--color-input: #334155;
+	--color-border: #2a5088;
+	--color-input: #2a5088;
 	--color-primary: #3b82f6;
 	--color-primary-foreground: #ffffff;
 	--color-accent: #3b82f6;
@@ -20,8 +20,8 @@
 	--color-hover-action-bg: var(--color-muted);
 	--color-hover-destructive-bg: transparent;
 	--radius-sm: 0.25rem;
-	--radius-md: 0.375rem;
-	--radius-lg: 0.5rem;
+	--radius-md: 0.5rem;
+	--radius-lg: 0.75rem;
 	--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
 }
 
@@ -169,6 +169,28 @@
 		concentration-glow 1200ms ease-out;
 }
 
+@utility card-glow {
+	background-image: radial-gradient(
+		ellipse at 50% 50%,
+		oklch(0.35 0.05 250 / 0.5) 0%,
+		transparent 70%
+	);
+	box-shadow:
+		0 0 15px -2px oklch(0.623 0.214 259 / 0.2),
+		inset 0 1px 0 0 oklch(0.7 0.15 259 / 0.1);
+}
+
+@utility panel-glow {
+	background-image: linear-gradient(
+		to bottom,
+		oklch(0.35 0.05 250 / 0.4) 0%,
+		transparent 40%
+	);
+	box-shadow:
+		0 0 20px -2px oklch(0.623 0.214 259 / 0.15),
+		inset 0 1px 0 0 oklch(0.7 0.15 259 / 0.1);
+}
+
 * {
 	scrollbar-color: var(--color-border) transparent;
 	scrollbar-width: thin;

package.json

@@ -30,6 +30,7 @@
 		"jscpd": "jscpd",
 		"oxlint": "oxlint --tsconfig apps/web/tsconfig.json --type-aware",
 		"check:ignores": "node scripts/check-lint-ignores.mjs",
-		"check": "pnpm audit --audit-level=high && knip && biome check . && oxlint --tsconfig apps/web/tsconfig.json --type-aware && node scripts/check-lint-ignores.mjs && tsc --build && vitest run && jscpd"
+		"check:classnames": "node scripts/check-cn-classnames.mjs",
+		"check": "pnpm audit --audit-level=high && knip && biome check . && oxlint --tsconfig apps/web/tsconfig.json --type-aware && node scripts/check-lint-ignores.mjs && node scripts/check-cn-classnames.mjs && tsc --build && vitest run && jscpd"
 	}
 }

scripts/check-cn-classnames.mjs

@@ -0,0 +1,47 @@
+/**
+ * Ban template-literal classNames in TSX files.
+ *
+ * Tailwind v4's production content extractor does static analysis on source
+ * files to discover utility classes. Template literals like
+ *   className={`foo ${bar}`}
+ * can cause the extractor to miss classes adjacent to `${`, leading to
+ * styles that work in dev (JIT) but break in production.
+ *
+ * Rule: always use cn() for dynamic class composition instead.
+ */
+
+import { execSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+
+const PATTERN = /className\s*=\s*\{`/;
+
+function findFiles() {
+	return execSync("git ls-files -- '*.tsx'", { encoding: "utf-8" })
+		.trim()
+		.split("\n")
+		.filter(Boolean);
+}
+
+let errors = 0;
+
+for (const file of findFiles()) {
+	const lines = readFileSync(file, "utf-8").split("\n");
+
+	for (let i = 0; i < lines.length; i++) {
+		if (PATTERN.test(lines[i])) {
+			console.error(
+				`${file}:${i + 1}: className uses template literal — use cn() instead`,
+			);
+			errors++;
+		}
+	}
+}
+
+if (errors > 0) {
+	console.error(
+		`\n${errors} template-literal className(s) found. Use cn() for dynamic classes.`,
+	);
+	process.exit(1);
+} else {
+	console.log("No template-literal classNames found.");
+}