From a2d9782d8f834e7247eec6208c5988bcfa326554 Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Tue, 21 Apr 2026 21:43:17 -0400
Subject: [PATCH] refactor(ui): switch surfaces to shared shadow tokens

---
 src/app/auth/error/page.tsx              |  2 +-
 src/app/auth/signin/sign-in-form.tsx     |  2 +-
 src/app/auth/signout/page.tsx            |  4 ++--
 src/app/page.tsx                         |  4 ++--
 src/components/ai-toolbar.tsx            | 10 ++++++----
 src/components/event-card.tsx            |  2 +-
 src/components/event-dialog.tsx          | 16 +++++++++++-----
 src/components/location-autocomplete.tsx |  2 +-
 src/components/settings-panel.tsx        | 11 +++++------
 src/components/ui/badge.tsx              |  7 +++----
 src/components/ui/button.tsx             |  5 ++---
 src/components/ui/card.tsx               |  2 +-
 src/components/ui/dialog.tsx             |  7 +++++--
 src/components/ui/dropdown-menu.tsx      |  4 ++--
 src/components/ui/input.tsx              |  2 +-
 src/components/ui/textarea.tsx           |  2 +-
 src/lib/ui-shell-contract.ts             | 14 ++++++--------
 tests/ai-toolbar.test.ts                 |  2 +-
 tests/event-dialog.test.tsx              |  2 +-
 tests/ui-shell-contract.test.ts          | 15 ++++++++++-----
 20 files changed, 63 insertions(+), 52 deletions(-)

diff --git a/src/app/auth/error/page.tsx b/src/app/auth/error/page.tsx
index a9a04d7..5383860 100644
--- a/src/app/auth/error/page.tsx
+++ b/src/app/auth/error/page.tsx
@@ -25,7 +25,7 @@ function ErrorMessage() {
 export default function AuthErrorPage() {
 	return (
 		<div className="flex items-center justify-center px-4 py-20">
-			<div className="w-full max-w-sm space-y-6 rounded-[10px] bg-card p-8 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_12px_40px_rgba(0,0,0,0.12)]">
+			<div className="w-full max-w-sm space-y-6 rounded-[10px] bg-card p-8 shadow-xl">
 				<div className="text-center">
 					<AlertTriangle className="h-8 w-8 text-destructive mx-auto mb-3" />
 					<h1 className="text-lg font-semibold">Authentication Error</h1>
diff --git a/src/app/auth/signin/sign-in-form.tsx b/src/app/auth/signin/sign-in-form.tsx
index 36bb041..38fef50 100644
--- a/src/app/auth/signin/sign-in-form.tsx
+++ b/src/app/auth/signin/sign-in-form.tsx
@@ -144,7 +144,7 @@ export function SignInForm({ providers }: SignInFormProps) {
 				initial={{ opacity: 0, y: 16 }}
 				animate={{ opacity: 1, y: 0 }}
 				transition={{ duration: 0.3 }}
-				className="w-full max-w-sm rounded-[10px] bg-card p-8 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_12px_40px_rgba(0,0,0,0.12)]"
+				className="w-full max-w-sm rounded-[10px] bg-card p-8 shadow-xl"
 			>
 				{/* Header */}
 				<div className="flex items-center justify-center gap-2 mb-2">
diff --git a/src/app/auth/signout/page.tsx b/src/app/auth/signout/page.tsx
index bd46921..fd51c69 100644
--- a/src/app/auth/signout/page.tsx
+++ b/src/app/auth/signout/page.tsx
@@ -28,7 +28,7 @@ export default function SignOutPage() {
 
 	return (
 		<div className="flex items-center justify-center px-4 py-20">
-			<div className="w-full max-w-sm space-y-6 rounded-[10px] bg-card p-8 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_12px_40px_rgba(0,0,0,0.12)]">
+			<div className="w-full max-w-sm space-y-6 rounded-[10px] bg-card p-8 shadow-xl">
 				<div className="text-center">
 					<LogOut className="h-8 w-8 text-muted-foreground mx-auto mb-3" />
 					<h1 className="text-lg font-semibold">Sign Out</h1>
@@ -37,7 +37,7 @@ export default function SignOutPage() {
 					</p>
 				</div>
 
-				<div className="rounded-[8px] bg-muted px-4 py-3 text-center shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)]">
+				<div className="rounded-[8px] bg-secondary px-4 py-3 text-center shadow-[inset_0_0_0_1px_var(--color-border)]">
 					<div className="text-xs text-muted-foreground mb-0.5">
 						Signed in as
 					</div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index afedd7c..1d48b9e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -516,8 +516,8 @@ export default function HomePage() {
 											Capture from text or files.
 										</h2>
 										<p className="text-sm leading-6 text-muted-foreground">
-											Start with a prompt, screenshots, or both. Review happens in the
-											timeline rather than a separate flow.
+											Start with a prompt, screenshots, or both. Review happens
+											in the timeline rather than a separate flow.
 										</p>
 									</div>
 
diff --git a/src/components/ai-toolbar.tsx b/src/components/ai-toolbar.tsx
index 68a1c95..b9a8076 100644
--- a/src/components/ai-toolbar.tsx
+++ b/src/components/ai-toolbar.tsx
@@ -283,7 +283,7 @@ export const AIToolbar = ({
 			) : isAuthenticated ? (
 				<div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
 					<div className="space-y-3">
-						<div className="rounded-[10px] bg-card shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_2px_2px_rgba(0,0,0,0.04),0_0_0_1px_#fafafa] focus-within:ring-[3px] focus-within:ring-ring/20">
+						<div className="rounded-[10px] bg-card shadow focus-within:ring-[3px] focus-within:ring-ring/20">
 							<Textarea
 								id="ai-event-prompt"
 								className="wrap-anywhere field-sizing-content min-h-48 w-full resize-none rounded-none border-0 bg-transparent px-4 py-3 text-sm shadow-none placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0"
@@ -416,18 +416,20 @@ export const AIToolbar = ({
 						</div>
 					</div>
 
-					<div className="rounded-[10px] bg-card p-3 shadow-[0_0_0_1px_rgba(0,0,0,0.08)]">
+					<div className="rounded-[10px] bg-card p-3 shadow-sm">
 						<div className="mb-3 flex items-start justify-between gap-3">
 							<div>
 								<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
 									Attachments
 								</p>
 								<p className="mt-1 text-sm leading-6 text-muted-foreground">
-									Add screenshots, flyers, or pasted images alongside the prompt.
+									Add screenshots, flyers, or pasted images alongside the
+									prompt.
 								</p>
 							</div>
 							<span className="rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
-								{imagePreviews.length} file{imagePreviews.length === 1 ? "" : "s"}
+								{imagePreviews.length} file
+								{imagePreviews.length === 1 ? "" : "s"}
 							</span>
 						</div>
 
diff --git a/src/components/event-card.tsx b/src/components/event-card.tsx
index f640675..ad1e2ef 100644
--- a/src/components/event-card.tsx
+++ b/src/components/event-card.tsx
@@ -29,7 +29,7 @@ interface EventCardProps {
 }
 
 export const EVENT_CARD_SURFACE_CLASSES =
-	"group cursor-pointer rounded-[10px] bg-card p-4 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_2px_2px_rgba(0,0,0,0.04),0_0_0_1px_#fafafa] transition-[background-color,transform,box-shadow] duration-150 hover:-translate-y-0.5 hover:bg-accent/20";
+	"group cursor-pointer rounded-[10px] bg-card p-4 shadow transition-[background-color,transform,box-shadow] duration-150 hover:-translate-y-0.5 hover:bg-accent/20";
 
 export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
 	const validationIssues = getEventValidationIssues(event);
diff --git a/src/components/event-dialog.tsx b/src/components/event-dialog.tsx
index 1080c0c..e8d3239 100644
--- a/src/components/event-dialog.tsx
+++ b/src/components/event-dialog.tsx
@@ -147,8 +147,8 @@ export const EventDialog = ({
 
 	return (
 		<Dialog open={open} onOpenChange={handleOpenChange}>
-			<DialogContent className="max-w-2xl rounded-[10px] bg-card p-0 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_12px_40px_rgba(0,0,0,0.12)]">
-				<DialogHeader className="border-b border-foreground/10 px-6 py-5">
+			<DialogContent className="max-w-2xl rounded-[10px] bg-card p-0 shadow-xl">
+				<DialogHeader className="px-6 py-5 shadow-[inset_0_-1px_0_0_var(--color-border)]">
 					<DialogTitle className="text-[28px] tracking-[-0.06em]">
 						{titleText}
 					</DialogTitle>
@@ -176,7 +176,9 @@ export const EventDialog = ({
 								{...register("title")}
 							/>
 							{errors.title && (
-								<p className="text-xs text-destructive">{errors.title.message}</p>
+								<p className="text-xs text-destructive">
+									{errors.title.message}
+								</p>
 							)}
 						</div>
 
@@ -209,7 +211,9 @@ export const EventDialog = ({
 								<Label htmlFor="event-url">URL</Label>
 								<Input id="event-url" placeholder="URL" {...register("url")} />
 								{errors.url && (
-									<p className="text-xs text-destructive">{errors.url.message}</p>
+									<p className="text-xs text-destructive">
+										{errors.url.message}
+									</p>
 								)}
 							</div>
 						</div>
@@ -293,7 +297,9 @@ export const EventDialog = ({
 								)}
 							/>
 							{errors.start && (
-								<p className="text-xs text-destructive">{errors.start.message}</p>
+								<p className="text-xs text-destructive">
+									{errors.start.message}
+								</p>
 							)}
 							{errors.end && (
 								<p className="text-xs text-destructive">{errors.end.message}</p>
diff --git a/src/components/location-autocomplete.tsx b/src/components/location-autocomplete.tsx
index d2b07e3..4055159 100644
--- a/src/components/location-autocomplete.tsx
+++ b/src/components/location-autocomplete.tsx
@@ -189,7 +189,7 @@ const ServerLocationInput = ({
 					value={value}
 				/>
 				{showSuggestions ? (
-					<div className="absolute left-0 right-0 top-[calc(100%+0.375rem)] z-20 rounded-[10px] bg-popover p-1.5 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_8px_24px_rgba(0,0,0,0.08)]">
+					<div className="absolute left-0 right-0 top-[calc(100%+0.375rem)] z-20 rounded-[10px] bg-popover p-1.5 shadow-lg">
 						<div className="space-y-1" role="listbox">
 							{suggestions.map((suggestion) => {
 								const suggestionKey =
diff --git a/src/components/settings-panel.tsx b/src/components/settings-panel.tsx
index 4dab1a6..ffb9415 100644
--- a/src/components/settings-panel.tsx
+++ b/src/components/settings-panel.tsx
@@ -13,8 +13,7 @@ interface SettingsPanelProps {
 	settings: UserSettings;
 }
 
-const settingRowClasses =
-	"rounded-[10px] bg-card p-4 shadow-[0_0_0_1px_rgba(0,0,0,0.08)]";
+const settingRowClasses = "rounded-[10px] bg-card p-4 shadow-sm";
 
 export function SettingsPanel({
 	adminAiEnabled,
@@ -74,7 +73,7 @@ export function SettingsPanel({
 								</div>
 								<Label
 									htmlFor="settings-skip-ai-review"
-									className="min-h-11 cursor-pointer justify-between rounded-[8px] bg-muted px-3 py-2 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)]"
+									className="min-h-11 cursor-pointer justify-between rounded-[8px] bg-secondary px-3 py-2 shadow-[inset_0_0_0_1px_var(--color-border)]"
 								>
 									<span className="text-sm font-medium text-foreground">
 										{settings.skipAiReview
@@ -115,7 +114,7 @@ export function SettingsPanel({
 								</div>
 								<Label
 									htmlFor="settings-ai-enabled"
-									className="min-h-11 cursor-pointer justify-between rounded-[8px] bg-muted px-3 py-2 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)]"
+									className="min-h-11 cursor-pointer justify-between rounded-[8px] bg-secondary px-3 py-2 shadow-[inset_0_0_0_1px_var(--color-border)]"
 								>
 									<span className="text-sm font-medium text-foreground">
 										{settings.aiEnabled
@@ -151,7 +150,7 @@ export function SettingsPanel({
 						</p>
 					</div>
 					<dl className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
-						<div className="rounded-[8px] bg-muted p-3 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)]">
+						<div className="rounded-[8px] bg-secondary p-3 shadow-[inset_0_0_0_1px_var(--color-border)]">
 							<dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
 								Direct create preference
 							</dt>
@@ -161,7 +160,7 @@ export function SettingsPanel({
 									: `${valuePrefix}: off`}
 							</dd>
 						</div>
-						<div className="rounded-[8px] bg-muted p-3 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)]">
+						<div className="rounded-[8px] bg-secondary p-3 shadow-[inset_0_0_0_1px_var(--color-border)]">
 							<dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
 								AI integrations
 							</dt>
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index f5d5b65..01ffa0f 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -10,13 +10,12 @@ const badgeVariants = cva(
 		variants: {
 			variant: {
 				default:
-					"bg-secondary text-secondary-foreground shadow-[0_0_0_1px_rgba(0,0,0,0.08)] [a&]:hover:bg-accent",
+					"bg-secondary text-secondary-foreground shadow-sm [a&]:hover:bg-accent",
 				secondary:
-					"bg-[#ebf5ff] text-[#0068d6] shadow-[0_0_0_1px_rgba(0,0,0,0.08)] [a&]:hover:opacity-90",
+					"bg-[#ebf5ff] text-[#0068d6] shadow-sm [a&]:hover:opacity-90",
 				destructive:
 					"bg-destructive/12 text-destructive shadow-[0_0_0_1px_rgba(255,91,79,0.2)] [a&]:hover:bg-destructive/18 focus-visible:ring-destructive/25",
-				outline:
-					"bg-background text-foreground shadow-[0_0_0_1px_rgba(0,0,0,0.08)] [a&]:hover:bg-accent",
+				outline: "bg-background text-foreground shadow-sm [a&]:hover:bg-accent",
 			},
 		},
 		defaultVariants: {
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 56019b5..8e9c8e9 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -12,10 +12,9 @@ const buttonVariants = cva(
 				default: "bg-primary text-primary-foreground hover:opacity-92",
 				destructive:
 					"bg-destructive text-destructive-foreground hover:opacity-92 focus-visible:ring-destructive/25 dark:focus-visible:ring-destructive/35",
-				outline:
-					"bg-background text-foreground shadow-[0_0_0_1px_rgba(0,0,0,0.08)] hover:bg-accent",
+				outline: "bg-background text-foreground shadow-xs hover:bg-accent",
 				secondary:
-					"bg-secondary text-secondary-foreground shadow-[0_0_0_1px_rgba(0,0,0,0.05)] hover:bg-accent",
+					"bg-secondary text-secondary-foreground shadow-sm hover:bg-accent",
 				ghost: "text-muted-foreground hover:bg-accent hover:text-foreground",
 				link: "text-[#0072f5] underline-offset-4 hover:underline",
 			},
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 3b88720..a629899 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
 		<div
 			data-slot="card"
 			className={cn(
-				"bg-card text-card-foreground flex flex-col gap-6 rounded-[10px] py-6 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_2px_2px_rgba(0,0,0,0.04),0_0_0_1px_#fafafa]",
+				"bg-card text-card-foreground flex flex-col gap-6 rounded-[10px] py-6 shadow",
 				className,
 			)}
 			{...props}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index b3fc798..6d61c84 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -60,7 +60,7 @@ function DialogContent({
 			<DialogPrimitive.Content
 				data-slot="dialog-content"
 				className={cn(
-					"bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-5 rounded-[10px] p-6 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_2px_2px_rgba(0,0,0,0.04),0_0_0_1px_#fafafa] duration-200 sm:max-w-lg",
+					"bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-5 rounded-[10px] p-6 shadow-xl duration-200 sm:max-w-lg",
 					className,
 				)}
 				{...props}
@@ -110,7 +110,10 @@ function DialogTitle({
 	return (
 		<DialogPrimitive.Title
 			data-slot="dialog-title"
-			className={cn("text-[24px] leading-none font-semibold tracking-[-0.04em]", className)}
+			className={cn(
+				"text-[24px] leading-none font-semibold tracking-[-0.04em]",
+				className,
+			)}
 			{...props}
 		/>
 	);
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 8fab481..bf60988 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -42,7 +42,7 @@ function DropdownMenuContent({
 				data-slot="dropdown-menu-content"
 				sideOffset={sideOffset}
 				className={cn(
-					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[11rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[10px] p-1.5 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_8px_24px_rgba(0,0,0,0.08)]",
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[11rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[10px] p-1.5 shadow-lg",
 					className,
 				)}
 				{...props}
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
 		<DropdownMenuPrimitive.SubContent
 			data-slot="dropdown-menu-sub-content"
 			className={cn(
-				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[11rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-[10px] p-1.5 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_8px_24px_rgba(0,0,0,0.08)]",
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[11rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-[10px] p-1.5 shadow-lg",
 				className,
 			)}
 			{...props}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 7065960..6949b64 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 			type={type}
 			data-slot="input"
 			className={cn(
-				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-10 w-full min-w-0 rounded-[8px] bg-background px-3 py-2 text-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)] transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-10 w-full min-w-0 rounded-[8px] bg-secondary px-3 py-2 text-sm shadow-sm transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 				"focus-visible:ring-[3px] focus-visible:ring-ring/25",
 				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
 				className,
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 70e5b64..db39d6d 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 		<textarea
 			data-slot="textarea"
 			className={cn(
-				"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"placeholder:text-muted-foreground aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-[8px] bg-secondary px-3 py-2 text-base shadow-sm transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 				className,
 			)}
 			{...props}
diff --git a/src/lib/ui-shell-contract.ts b/src/lib/ui-shell-contract.ts
index 4a34174..56ef8b2 100644
--- a/src/lib/ui-shell-contract.ts
+++ b/src/lib/ui-shell-contract.ts
@@ -1,24 +1,22 @@
 import { cn } from "@/lib/utils";
 
 export const APP_HEADER_SURFACE_CLASSES =
-	"mb-6 flex min-h-14 items-center justify-between gap-3 border-b border-foreground/10 bg-background/95 px-4 py-3 sm:px-6";
+	"mb-6 flex min-h-14 items-center justify-between gap-3 bg-background/95 px-4 py-3 shadow-[inset_0_-1px_0_0_var(--color-border)] sm:px-6";
 
 export const APP_SECTION_SURFACE_CLASSES =
-	"rounded-[10px] bg-card px-4 py-4 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_2px_2px_rgba(0,0,0,0.04),0_0_0_1px_#fafafa] sm:px-5";
+	"rounded-[10px] bg-card px-4 py-4 shadow sm:px-5";
 
 export const APP_ACTION_BAR_CLASSES =
-	"rounded-[10px] bg-card px-3 py-3 shadow-[0_0_0_1px_rgba(0,0,0,0.08)]";
+	"rounded-[10px] bg-secondary px-3 py-3 shadow-sm";
 
 export const APP_NAV_SURFACE_CLASSES =
-	"fixed inset-x-4 bottom-4 mx-auto flex max-w-3xl items-center justify-between rounded-[10px] bg-background/95 px-3 py-2 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_8px_24px_rgba(0,0,0,0.08)] sm:inset-x-6 lg:hidden";
+	"fixed inset-x-4 bottom-4 mx-auto flex max-w-3xl items-center justify-between rounded-[10px] bg-card/95 px-3 py-2 shadow-lg sm:inset-x-6 lg:hidden";
 
 const CONNECTION_BADGE_BASE_CLASSES =
-	"gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium shadow-[0_0_0_1px_rgba(0,0,0,0.08)]";
+	"gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium shadow-sm";
 
 export const getConnectionBadgeClasses = (isOnline: boolean) =>
 	cn(
 		CONNECTION_BADGE_BASE_CLASSES,
-		isOnline
-			? "bg-[#ebf5ff] text-[#0068d6]"
-			: "bg-muted text-muted-foreground",
+		isOnline ? "bg-[#ebf5ff] text-[#0068d6]" : "bg-muted text-muted-foreground",
 	);
diff --git a/tests/ai-toolbar.test.ts b/tests/ai-toolbar.test.ts
index d7963cd..045930b 100644
--- a/tests/ai-toolbar.test.ts
+++ b/tests/ai-toolbar.test.ts
@@ -168,7 +168,7 @@ describe("AI capture redesign", () => {
 	test("attachments panel is a first-class surfaced region, not an inline footer affordance", () => {
 		const source = readToolbarSource();
 
-		expect(source).toContain("rounded-[10px] bg-card p-3 shadow-[0_0_0_1px_rgba(0,0,0,0.08)]");
+		expect(source).toContain("rounded-[10px] bg-card p-3 shadow-sm");
 	});
 });
 
diff --git a/tests/event-dialog.test.tsx b/tests/event-dialog.test.tsx
index d31d2dc..2b917d0 100644
--- a/tests/event-dialog.test.tsx
+++ b/tests/event-dialog.test.tsx
@@ -19,7 +19,7 @@ describe("EventDialog public modes", () => {
 		const source = readFileSync("src/components/ui/dialog.tsx", "utf8");
 
 		expect(source).toContain("rounded-[10px]");
-		expect(source).toContain("shadow-[0_0_0_1px_rgba(0,0,0,0.08)");
+		expect(source).toContain("shadow-xl");
 		expect(source).not.toContain("rounded-lg border p-6 shadow-lg");
 	});
 
diff --git a/tests/ui-shell-contract.test.ts b/tests/ui-shell-contract.test.ts
index a3c407e..3a191fc 100644
--- a/tests/ui-shell-contract.test.ts
+++ b/tests/ui-shell-contract.test.ts
@@ -11,23 +11,28 @@ import { EVENT_CARD_SURFACE_CLASSES } from "@/components/event-card";
 describe("app shell surfaces", () => {
 	test("header surface is a thin structural bar instead of a glass panel", () => {
 		expect(APP_HEADER_SURFACE_CLASSES).toContain("min-h-14");
-		expect(APP_HEADER_SURFACE_CLASSES).toContain("border-b");
+		expect(APP_HEADER_SURFACE_CLASSES).toContain("shadow-[inset_0_-1px_0_0_var(--color-border)]");
 		expect(APP_HEADER_SURFACE_CLASSES).not.toContain("glass-surface");
 	});
 
-	test("section and action surfaces use tokenized shell classes instead of glass helpers", () => {
+	test("section and action surfaces use tokenized shell classes instead of frozen light-mode shadows", () => {
 		expect(APP_SECTION_SURFACE_CLASSES).not.toContain("glass-panel");
 		expect(APP_ACTION_BAR_CLASSES).not.toContain("glass-subtle");
 		expect(APP_NAV_SURFACE_CLASSES).not.toContain("glass-surface");
+		expect(APP_SECTION_SURFACE_CLASSES).toContain("shadow");
+		expect(APP_SECTION_SURFACE_CLASSES).not.toContain("rgba(0,0,0,0.08)");
+		expect(APP_ACTION_BAR_CLASSES).toContain("shadow-sm");
+		expect(APP_ACTION_BAR_CLASSES).not.toContain("rgba(0,0,0,0.08)");
+		expect(APP_NAV_SURFACE_CLASSES).toContain("shadow-lg");
+		expect(APP_NAV_SURFACE_CLASSES).not.toContain("rgba(0,0,0,0.08)");
 	});
 });
 
 describe("event cards", () => {
 	test("event cards use the redesigned console card treatment", () => {
 		expect(EVENT_CARD_SURFACE_CLASSES).toContain("rounded-[10px]");
-		expect(EVENT_CARD_SURFACE_CLASSES).toContain(
-			"shadow-[0_0_0_1px_rgba(0,0,0,0.08)",
-		);
+		expect(EVENT_CARD_SURFACE_CLASSES).toContain("shadow");
+		expect(EVENT_CARD_SURFACE_CLASSES).not.toContain("rgba(0,0,0,0.08)");
 	});
 });