diff --git a/src/components/dashboard/ComponentsEcosystemCard.tsx b/src/components/dashboard/ComponentsEcosystemCard.tsx
index b6de3a2..381d7d2 100644
--- a/src/components/dashboard/ComponentsEcosystemCard.tsx
+++ b/src/components/dashboard/ComponentsEcosystemCard.tsx
@@ -47,7 +47,7 @@ export function ComponentsEcosystemCard({
       : UNAVAILABLE;
 
   return (
-    <div className="flex h-full flex-col gap-4 rounded-lg bg-card px-5 py-4 shadow-xs ring-1 ring-foreground/10">
+    <div className="flex h-full flex-col gap-4 rounded-lg bg-card px-5 py-4 elevation-xs ring-1 ring-foreground/10">
       <h2 className="font-heading text-sm font-semibold leading-5 text-secondary-foreground">
         {intl.formatMessage({ id: "dashboard.home.system.components" })}
       </h2>
diff --git a/src/components/dashboard/MiniCard.tsx b/src/components/dashboard/MiniCard.tsx
index 0f5ea4b..8835f84 100644
--- a/src/components/dashboard/MiniCard.tsx
+++ b/src/components/dashboard/MiniCard.tsx
@@ -30,7 +30,7 @@ export function MiniCard({ id, status, className }: MiniCardProps) {
       type="button"
       onClick={() => navigate(viewHref(meta.view))}
       className={cn(
-        "flex w-full flex-col gap-2 rounded-lg bg-card px-4 py-3 text-left text-sm ring-1 ring-foreground/10 shadow-xs",
+        "flex w-full flex-col gap-2 rounded-lg bg-card px-4 py-3 text-left text-sm ring-1 ring-foreground/10 elevation-xs",
         "transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         className,
       )}
diff --git a/src/components/dashboard/SystemStatsCard.tsx b/src/components/dashboard/SystemStatsCard.tsx
index cd97101..b3b4630 100644
--- a/src/components/dashboard/SystemStatsCard.tsx
+++ b/src/components/dashboard/SystemStatsCard.tsx
@@ -20,7 +20,7 @@ export function SystemStatsCard({ stats, loading }: SystemStatsCardProps) {
   const intl = useIntl();
 
   return (
-    <div className="rounded-lg bg-card px-5 py-4 shadow-xs ring-1 ring-foreground/10">
+    <div className="rounded-lg bg-card px-5 py-4 elevation-xs ring-1 ring-foreground/10">
       <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
         <StatBlock
           label={intl.formatMessage({ id: "dashboard.home.system.executions" })}
diff --git a/src/components/dashboard/VirtualServersCard.tsx b/src/components/dashboard/VirtualServersCard.tsx
index ce018ed..be4069d 100644
--- a/src/components/dashboard/VirtualServersCard.tsx
+++ b/src/components/dashboard/VirtualServersCard.tsx
@@ -41,7 +41,7 @@ export function VirtualServersCard({
     : UNAVAILABLE;
 
   return (
-    <div className="flex h-full flex-col gap-4 rounded-lg bg-card px-5 py-4 shadow-xs ring-1 ring-foreground/10">
+    <div className="flex h-full flex-col gap-4 rounded-lg bg-card px-5 py-4 elevation-xs ring-1 ring-foreground/10">
       <h2 className="font-heading text-sm font-semibold leading-5 text-secondary-foreground">
         {intl.formatMessage({ id: "dashboard.home.system.virtualServers" })}
       </h2>
diff --git a/src/components/gateways/CreateServerForm.tsx b/src/components/gateways/CreateServerForm.tsx
index fbca0f6..93f5ce8 100644
--- a/src/components/gateways/CreateServerForm.tsx
+++ b/src/components/gateways/CreateServerForm.tsx
@@ -88,19 +88,21 @@ export function CreateServerForm({
 
   return (
     <form
-      className="rounded-xl border border-border bg-card px-7 py-7 shadow-xs dark:border-[#2b2b2f] dark:bg-[#141414]"
+      className="rounded-xl border border-neutral-200 bg-white p-6 elevation-panel sm:p-8 dark:border-neutral-800 dark:bg-inherit"
       onSubmit={onSubmit}
       noValidate
     >
       <div className="flex items-center gap-3">
-        <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-[#f554ff] text-black">
-          <Server className="size-5" aria-hidden="true" />
+        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-[#f554ff] text-neutral-950 elevation-sm">
+          <Server className="size-4" aria-hidden="true" />
         </span>
-        <h1 className="text-xl font-semibold tracking-tight text-foreground">{resolvedTitle}</h1>
+        <h1 className="text-lg font-semibold tracking-tight text-neutral-950 dark:text-neutral-50">
+          {resolvedTitle}
+        </h1>
       </div>
 
       <div className="mt-5">
-        <p className="max-w-[48rem] text-sm leading-5 text-muted-foreground">
+        <p className="text-sm leading-6 text-neutral-600 dark:text-neutral-400">
           {resolvedDescription}
         </p>
       </div>
@@ -146,7 +148,7 @@ export function CreateServerForm({
                   />
                   <label
                     htmlFor={`server-visibility-${option.value}`}
-                    className="flex h-full cursor-pointer items-center justify-center rounded-sm px-3 text-sm font-medium text-muted-foreground transition hover:text-foreground peer-checked:bg-background peer-checked:text-foreground peer-checked:shadow-xs peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background"
+                    className="flex h-full cursor-pointer items-center justify-center rounded-sm px-3 text-sm font-medium text-muted-foreground transition hover:text-foreground peer-checked:bg-background peer-checked:text-foreground peer-checked:elevation-control peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background"
                   >
                     {intl.formatMessage({ id: option.labelId })}
                   </label>
@@ -159,10 +161,10 @@ export function CreateServerForm({
         <div className="space-y-3">
           <label
             htmlFor="server-name"
-            className="inline-flex items-center gap-0.5 text-sm font-medium text-foreground"
+            className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
           >
             {intl.formatMessage({ id: "gateways.createServer.name" })}
-            <span className="text-destructive">*</span>
+            <span className="text-red-500">*</span>
             <span className="sr-only">
               {intl.formatMessage({ id: "gateways.createServer.required" })}
             </span>
@@ -179,7 +181,7 @@ export function CreateServerForm({
             aria-invalid={Boolean(errors.name)}
             aria-describedby={errors.name ? "server-name-error" : undefined}
             maxLength={100}
-            className="h-10 rounded-md border-input bg-background px-3 text-sm shadow-none"
+            className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 dark:border-neutral-700 dark:text-neutral-100"
           />
           {errors.name && (
             <p id="server-name-error" className="text-sm text-destructive">
@@ -189,7 +191,10 @@ export function CreateServerForm({
         </div>
 
         <div className="space-y-3">
-          <label htmlFor="oauth-enabled" className="text-sm font-medium text-foreground">
+          <label
+            htmlFor="oauth-enabled"
+            className="text-sm font-medium text-neutral-900 dark:text-neutral-100"
+          >
             {intl.formatMessage({ id: "gateways.createServer.oauthLabel" })}
           </label>
           <div className="flex items-center gap-4">
@@ -201,7 +206,6 @@ export function CreateServerForm({
                 validateField("oauthEnabled", checked);
               }}
               aria-describedby="oauth-enabled-description"
-              className="data-[state=checked]:bg-primary data-[state=unchecked]:bg-[#343438]"
             />
             <p id="oauth-enabled-description" className="text-sm leading-5 text-muted-foreground">
               {intl.formatMessage({ id: "gateways.createServer.oauthDescription" })}
@@ -213,7 +217,7 @@ export function CreateServerForm({
           type="button"
           variant="ghost"
           onClick={() => setOptionalOpen((current) => !current)}
-          className="flex h-12 w-full items-center gap-3 rounded-md border border-border px-4 text-left text-sm font-medium text-muted-foreground transition hover:bg-muted/40 hover:text-foreground dark:border-[#252529]"
+          className="inline-flex w-full items-center justify-center gap-2 rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-sm font-medium text-neutral-600 transition hover:text-neutral-950 aria-expanded:bg-transparent dark:border-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300"
           aria-expanded={optionalOpen}
           aria-controls="optional-server-configuration"
         >
@@ -227,7 +231,10 @@ export function CreateServerForm({
         {optionalOpen && (
           <div id="optional-server-configuration" className="grid gap-7">
             <div className="space-y-3">
-              <label htmlFor="server-tags" className="text-sm font-medium text-foreground">
+              <label
+                htmlFor="server-tags"
+                className="text-sm font-medium text-neutral-900 dark:text-neutral-100"
+              >
                 {intl.formatMessage({ id: "gateways.createServer.tags" })}
               </label>
               <TagInput
@@ -253,7 +260,10 @@ export function CreateServerForm({
             </div>
 
             <div className="space-y-3">
-              <label htmlFor="server-description" className="text-sm font-medium text-foreground">
+              <label
+                htmlFor="server-description"
+                className="text-sm font-medium text-neutral-900 dark:text-neutral-100"
+              >
                 {intl.formatMessage({ id: "gateways.createServer.descriptionLabel" })}
               </label>
               <Textarea
@@ -270,7 +280,7 @@ export function CreateServerForm({
                 aria-invalid={Boolean(errors.description)}
                 aria-describedby={errors.description ? "server-description-error" : undefined}
                 maxLength={500}
-                className="min-h-[4.5rem] resize-y rounded-md border-border bg-background px-3 py-3 text-sm shadow-none placeholder:text-muted-foreground/70 focus-visible:ring-1 focus-visible:ring-offset-0 dark:border-[#55555c] dark:bg-[#141414]"
+                className="min-h-28 resize-y placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-offset-0"
               />
               {errors.description && (
                 <p id="server-description-error" className="text-sm text-destructive">
@@ -285,13 +295,18 @@ export function CreateServerForm({
       {children && <div className="mt-7">{children}</div>}
 
       <div className="mt-8 flex items-center justify-end gap-5">
-        <Button type="button" variant="ghost" onClick={onCancel} className="h-8 px-2 text-sm">
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={onCancel}
+          className="h-10 rounded-md px-3 text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-950 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-neutral-100"
+        >
           {intl.formatMessage({ id: "common.button.cancel" })}
         </Button>
         <Button
           type="submit"
           disabled={isSubmitting}
-          className="h-8 rounded-md bg-white px-3 text-sm font-medium text-black hover:bg-white/90"
+          className="h-10 rounded-md bg-neutral-950 px-4 text-sm font-medium text-white hover:enabled:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-950 dark:hover:enabled:bg-neutral-200"
         >
           {resolvedSubmitLabel}
         </Button>
diff --git a/src/components/gateways/ExposeComponentsForm.tsx b/src/components/gateways/ExposeComponentsForm.tsx
index b6a1937..8992102 100644
--- a/src/components/gateways/ExposeComponentsForm.tsx
+++ b/src/components/gateways/ExposeComponentsForm.tsx
@@ -277,7 +277,7 @@ export function ExposeComponentsForm({
 
   if (isLoading) {
     return (
-      <div className="mx-auto mt-6 w-full max-w-5xl rounded-xl border border-neutral-200 bg-inherit p-0 shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+      <div className="mx-auto mt-6 w-full max-w-5xl rounded-xl border border-neutral-200 bg-inherit p-0 elevation-panel dark:border-neutral-800">
         <div className="flex items-center justify-center p-12">
           <Loading />
         </div>
@@ -296,7 +296,7 @@ export function ExposeComponentsForm({
   const somePromptsSelected = selectedPrompts.size > 0 && selectedPrompts.size < prompts.length;
 
   return (
-    <div className="mx-auto mt-6 w-full max-w-5xl rounded-xl border border-neutral-200 bg-inherit p-0 shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+    <div className="mx-auto mt-6 w-full max-w-5xl rounded-xl border border-neutral-200 bg-inherit p-0 elevation-panel dark:border-neutral-800">
       <div className="flex flex-col gap-8 p-6 sm:p-8">
         {oauthNotification && (
           <InlineNotification
@@ -319,7 +319,7 @@ export function ExposeComponentsForm({
         {/* Main content */}
         <div className="flex flex-col gap-4">
           <div className="flex items-center gap-2">
-            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-purple-500 text-neutral-950 shadow-sm">
+            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-purple-500 text-neutral-950 elevation-sm">
               <Server className="h-4 w-4" aria-hidden="true" />
             </div>
             <h2 className="text-lg font-semibold tracking-tight text-neutral-950 dark:text-neutral-50">
diff --git a/src/components/gateways/VirtualServerDetailsPanel.tsx b/src/components/gateways/VirtualServerDetailsPanel.tsx
index e97a34f..bbf548c 100644
--- a/src/components/gateways/VirtualServerDetailsPanel.tsx
+++ b/src/components/gateways/VirtualServerDetailsPanel.tsx
@@ -469,7 +469,7 @@ export function VirtualServerDetailsPanel({
                         className={cn(
                           "h-8 shrink-0 rounded-sm px-4 text-sm font-medium transition-colors",
                           isSelected
-                            ? "bg-background text-foreground shadow-sm"
+                            ? "bg-background text-foreground elevation-control"
                             : "text-muted-foreground hover:text-foreground",
                         )}
                         onClick={() => setSourceFilter(source.id)}
diff --git a/src/components/layout/HeaderProfileMenu.tsx b/src/components/layout/HeaderProfileMenu.tsx
index 1170caf..5bfe35e 100644
--- a/src/components/layout/HeaderProfileMenu.tsx
+++ b/src/components/layout/HeaderProfileMenu.tsx
@@ -50,7 +50,7 @@ export function HeaderProfileMenu() {
               variant="ghost"
               size="icon-sm"
               onClick={() => setTheme("light")}
-              className={`rounded-full transition-colors ${theme === "light" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}
+              className={`rounded-full transition-colors ${theme === "light" ? "bg-background text-foreground elevation-control" : "text-muted-foreground hover:text-foreground"}`}
               aria-label={intl.formatMessage({ id: "common.theme.light" })}
             >
               <Sun className="size-4" />
@@ -60,7 +60,7 @@ export function HeaderProfileMenu() {
               variant="ghost"
               size="icon-sm"
               onClick={() => setTheme("dark")}
-              className={`rounded-full transition-colors ${theme === "dark" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}
+              className={`rounded-full transition-colors ${theme === "dark" ? "bg-background text-foreground elevation-control" : "text-muted-foreground hover:text-foreground"}`}
               aria-label={intl.formatMessage({ id: "common.theme.dark" })}
             >
               <Moon className="size-4" />
@@ -70,7 +70,7 @@ export function HeaderProfileMenu() {
               variant="ghost"
               size="icon-sm"
               onClick={() => setTheme("system")}
-              className={`rounded-full transition-colors ${theme === "system" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}
+              className={`rounded-full transition-colors ${theme === "system" ? "bg-background text-foreground elevation-control" : "text-muted-foreground hover:text-foreground"}`}
               aria-label={intl.formatMessage({ id: "common.theme.system" })}
             >
               <Monitor className="size-4" />
diff --git a/src/components/mcp-servers/AdvancedSettings.tsx b/src/components/mcp-servers/AdvancedSettings.tsx
index bd53ec3..7a9f61d 100644
--- a/src/components/mcp-servers/AdvancedSettings.tsx
+++ b/src/components/mcp-servers/AdvancedSettings.tsx
@@ -251,7 +251,7 @@ export function AdvancedSettings({
         <div
           role="radiogroup"
           aria-label="Authentication type"
-          className="flex w-full flex-nowrap gap-1 rounded-md bg-neutral-100 p-1 dark:bg-neutral-800"
+          className="flex w-full flex-nowrap gap-1 rounded-md bg-muted p-1"
         >
           {(["none", "basic", "bearer", "custom", "oauth", "query"] as AuthType[]).map((type) => {
             const label =
@@ -280,7 +280,7 @@ export function AdvancedSettings({
                 />
                 <label
                   htmlFor={`auth-${type}`}
-                  className="flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-center text-sm font-medium text-neutral-500 transition hover:bg-neutral-200 hover:text-neutral-700 peer-checked:bg-neutral-800 peer-checked:text-white peer-checked:px-4 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-neutral-300 dark:peer-checked:bg-neutral-950 dark:peer-checked:text-white"
+                  className="flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-center text-sm font-medium text-muted-foreground transition hover:text-foreground peer-checked:bg-background peer-checked:px-4 peer-checked:text-foreground peer-checked:elevation-control peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"
                 >
                   {label}
                 </label>
diff --git a/src/components/mcp-servers/BasicAuth.tsx b/src/components/mcp-servers/BasicAuth.tsx
index 198a862..3060aa3 100644
--- a/src/components/mcp-servers/BasicAuth.tsx
+++ b/src/components/mcp-servers/BasicAuth.tsx
@@ -29,7 +29,7 @@ export function BasicAuth({
           value={username}
           onChange={(e) => onUsernameChange(e.target.value)}
           placeholder="Add username for basic authentication..."
-          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
         />
       </div>
 
@@ -47,7 +47,7 @@ export function BasicAuth({
           value={password}
           onChange={(e) => onPasswordChange(e.target.value)}
           placeholder="Add password..."
-          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
         />
       </div>
     </div>
diff --git a/src/components/mcp-servers/BearerTokenAuth.tsx b/src/components/mcp-servers/BearerTokenAuth.tsx
index 1ff6ca4..7b50b59 100644
--- a/src/components/mcp-servers/BearerTokenAuth.tsx
+++ b/src/components/mcp-servers/BearerTokenAuth.tsx
@@ -26,7 +26,7 @@ export function BearerTokenAuth({ token, onTokenChange }: BearerTokenAuthProps)
         value={token}
         onChange={(e) => onTokenChange(e.target.value)}
         placeholder="Paste bearer token..."
-        className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+        className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
       />
     </div>
   );
diff --git a/src/components/mcp-servers/CACertificateUpload.tsx b/src/components/mcp-servers/CACertificateUpload.tsx
index 68f3d3f..5411ef2 100644
--- a/src/components/mcp-servers/CACertificateUpload.tsx
+++ b/src/components/mcp-servers/CACertificateUpload.tsx
@@ -125,13 +125,7 @@ export function CACertificateUpload({ onFilesSelected }: CACertificateUploadProp
             : "border-neutral-300 bg-transparent hover:border-neutral-400 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"
         }`}
       >
-        <Button
-          type="button"
-          onClick={handleClick}
-          variant="default"
-          size="sm"
-          className="h-7 gap-2 border border-neutral-700 bg-neutral-800 text-white hover:bg-neutral-700 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800"
-        >
+        <Button type="button" onClick={handleClick} variant="ghost" size="sm" className="h-7 gap-2">
           <Upload className="h-3 w-3" />
           Upload
         </Button>
diff --git a/src/components/mcp-servers/CustomHeadersAuth.tsx b/src/components/mcp-servers/CustomHeadersAuth.tsx
index 57ddd40..ce93df9 100644
--- a/src/components/mcp-servers/CustomHeadersAuth.tsx
+++ b/src/components/mcp-servers/CustomHeadersAuth.tsx
@@ -62,7 +62,7 @@ export function CustomHeadersAuth({
                 placeholder={
                   index === 0 && headers.length === 1 ? "e.g. X-API-Key..." : "Add header key..."
                 }
-                className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+                className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
               />
             </div>
 
@@ -80,7 +80,7 @@ export function CustomHeadersAuth({
                 value={header.value}
                 onChange={(e) => updateHeader(index, "value", e.target.value)}
                 placeholder={"Add header value..."}
-                className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+                className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
               />
             </div>
 
diff --git a/src/components/mcp-servers/MCPServerForm.tsx b/src/components/mcp-servers/MCPServerForm.tsx
index 9d63516..a64dddd 100644
--- a/src/components/mcp-servers/MCPServerForm.tsx
+++ b/src/components/mcp-servers/MCPServerForm.tsx
@@ -146,11 +146,11 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
 
   return (
     <>
-      <div className="mx-auto mt-6 w-full max-w-3xl rounded-xl border border-neutral-200 bg-inherit p-0 shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+      <div className="mx-auto mt-6 w-full max-w-3xl rounded-xl border border-neutral-200 bg-white p-0 elevation-panel dark:border-neutral-800 dark:bg-inherit">
         <div className="flex flex-col gap-8 p-6 sm:p-8">
           <div className="flex flex-col gap-4">
             <div className="flex items-center gap-2">
-              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-orange-500 text-neutral-950 shadow-sm">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-orange-500 text-neutral-950 elevation-sm">
                 <MCPIcon className="h-4 w-4" />
               </div>
               <h2 className="text-lg font-semibold tracking-tight text-neutral-950 dark:text-neutral-50">
@@ -193,7 +193,7 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
               <div
                 role="radiogroup"
                 aria-label="Server transport type"
-                className="flex gap-2 rounded-md bg-neutral-100 p-1 dark:bg-neutral-800"
+                className="flex gap-2 rounded-md bg-muted p-1"
               >
                 {(["STREAMABLEHTTP", "SSE"] as TransportType[]).map((type) => {
                   const label = type === "STREAMABLEHTTP" ? "Streamable HTTP" : "SSE";
@@ -210,7 +210,7 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
                       />
                       <label
                         htmlFor={`transport-${type}`}
-                        className="flex cursor-pointer items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-neutral-500 transition hover:bg-neutral-200 hover:text-neutral-700 peer-checked:bg-neutral-800 peer-checked:text-white peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-neutral-300 dark:peer-checked:bg-neutral-950 dark:peer-checked:text-white"
+                        className="flex cursor-pointer items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-muted-foreground transition hover:text-foreground peer-checked:bg-background peer-checked:text-foreground peer-checked:elevation-control peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"
                       >
                         {label}
                       </label>
@@ -233,7 +233,7 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
                 value={name}
                 onChange={(event) => setName(event.target.value)}
                 placeholder="Add MCP server name..."
-                className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+                className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
                 aria-invalid={!!errors.name}
                 aria-describedby={errors.name ? "name-error" : undefined}
               />
@@ -258,7 +258,7 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
                 value={url}
                 onChange={(event) => setUrl(event.target.value)}
                 placeholder="Add URL for a running MCP server..."
-                className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+                className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
                 aria-invalid={!!errors.url}
                 aria-describedby={errors.url ? "url-error" : undefined}
               />
@@ -278,7 +278,7 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
                 value={description}
                 onChange={(event) => setDescription(event.target.value)}
                 placeholder="Add an optional description..."
-                className="min-h-28 focus-visible:ring-1 focus-visible:ring-offset-0"
+                className="min-h-28 placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-offset-0"
                 aria-invalid={!!errors.description}
                 aria-describedby={errors.description ? "description-error" : undefined}
               />
@@ -294,7 +294,7 @@ export function MCPServerForm({ isOpen, onToggle, serverId, onSuccess }: MCPServ
                 type="button"
                 variant="ghost"
                 onClick={() => setAdvancedOpen((current) => !current)}
-                className="inline-flex w-full items-center gap-2 rounded-md border border-neutral-200 px-3 py-2 text-sm font-medium text-neutral-600 transition hover:text-neutral-950 dark:border-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300"
+                className="inline-flex w-full items-center gap-2 rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-sm font-medium text-neutral-600 transition hover:text-neutral-950 aria-expanded:bg-transparent dark:border-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300"
                 aria-expanded={advancedOpen}
               >
                 <ChevronDown className={`h-4 w-4 transition ${advancedOpen ? "rotate-180" : ""}`} />
diff --git a/src/components/mcp-servers/OAuth2Auth.tsx b/src/components/mcp-servers/OAuth2Auth.tsx
index bd0fc8a..092fbe7 100644
--- a/src/components/mcp-servers/OAuth2Auth.tsx
+++ b/src/components/mcp-servers/OAuth2Auth.tsx
@@ -105,7 +105,7 @@ export function OAuth2Auth({
           value={issuerUrl}
           onChange={(e) => onIssuerUrlChange(e.target.value)}
           placeholder="e.g. https://auth.example.com"
-          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
         />
         <p className="text-xs text-neutral-600 dark:text-neutral-500">
           {
@@ -129,7 +129,7 @@ export function OAuth2Auth({
             value={redirectUri}
             onChange={(e) => onRedirectUriChange(e.target.value)}
             placeholder="e.g. https://gateway.example.com/oauth/callback"
-            className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+            className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
           />
           <p className="text-xs text-neutral-600 dark:text-neutral-500">
             {"Copy URI into the OAuth application's allowed redirect URI"}
@@ -155,7 +155,7 @@ export function OAuth2Auth({
               placeholder="e.g. service-account"
               aria-invalid={!!errors?.username}
               aria-describedby={errors?.username ? "oauth-username-error" : undefined}
-              className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+              className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
             />
             {errors?.username && (
               <p id="oauth-username-error" className="text-sm text-red-500">
@@ -179,7 +179,7 @@ export function OAuth2Auth({
               placeholder="••••••••"
               aria-invalid={!!errors?.password}
               aria-describedby={errors?.password ? "oauth-password-error" : undefined}
-              className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+              className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
             />
             {errors?.password && (
               <p id="oauth-password-error" className="text-sm text-red-500">
@@ -203,7 +203,7 @@ export function OAuth2Auth({
           value={clientId}
           onChange={(e) => onClientIdChange(e.target.value)}
           placeholder="e.g. 8f3a2c1d-4b5e-4f6a-9c8d-1e2f3a4b5c6"
-          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
         />
         <p className="text-xs text-neutral-600 dark:text-neutral-500">
           Not required for servers that support Dynamic Client Registration (DCR)
@@ -223,7 +223,7 @@ export function OAuth2Auth({
           value={clientSecret}
           onChange={(e) => onClientSecretChange(e.target.value)}
           placeholder="e.g. a1b2c3d4e5f6"
-          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
         />
         <p className="text-xs text-neutral-600 dark:text-neutral-500">
           Not required for servers that support Dynamic Client Registration (DCR)
@@ -244,7 +244,7 @@ export function OAuth2Auth({
           value={tokenUrl}
           onChange={(e) => onTokenUrlChange(e.target.value)}
           placeholder="e.g. https://oauth.example.com/token"
-          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
         />
         <p className="text-xs text-neutral-600 dark:text-neutral-500">
           Exchanges authorization codes or credentials for access tokens
@@ -266,7 +266,7 @@ export function OAuth2Auth({
             value={authorizationUrl}
             onChange={(e) => onAuthorizationUrlChange(e.target.value)}
             placeholder="e.g. https://oauth.example.com/authorize"
-            className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+            className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
           />
           <p className="text-xs text-neutral-600 dark:text-neutral-500">
             Where users are redirected to log in and grant access
diff --git a/src/components/mcp-servers/QueryParameterAuth.tsx b/src/components/mcp-servers/QueryParameterAuth.tsx
index da96556..e89a91e 100644
--- a/src/components/mcp-servers/QueryParameterAuth.tsx
+++ b/src/components/mcp-servers/QueryParameterAuth.tsx
@@ -41,7 +41,7 @@ export function QueryParameterAuth({
           value={parameterName}
           onChange={(e) => onParameterNameChange(e.target.value)}
           placeholder="e.g. api_key..."
-          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
         />
       </div>
 
@@ -60,7 +60,7 @@ export function QueryParameterAuth({
           value={apiKey}
           onChange={(e) => onApiKeyChange(e.target.value)}
           placeholder="e.g. a1b2c3d4e5f6789..."
-          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
         />
       </div>
     </div>
diff --git a/src/components/plugins/PluginToolbar.tsx b/src/components/plugins/PluginToolbar.tsx
index 679c436..1274626 100644
--- a/src/components/plugins/PluginToolbar.tsx
+++ b/src/components/plugins/PluginToolbar.tsx
@@ -54,7 +54,7 @@ function PluginViewToggle({
         type="button"
         variant="ghost"
         aria-pressed={!enabledOnly}
-        className="h-8 flex-1 rounded-md font-medium aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:shadow-xs"
+        className="h-8 flex-1 rounded-md font-medium aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:elevation-control"
         onClick={() => onChange(false)}
       >
         {intl.formatMessage({ id: "plugins.catalog.all" })}
@@ -63,7 +63,7 @@ function PluginViewToggle({
         type="button"
         variant="ghost"
         aria-pressed={enabledOnly}
-        className="h-8 flex-1 rounded-md font-medium aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:shadow-xs"
+        className="h-8 flex-1 rounded-md font-medium aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:elevation-control"
         onClick={() => onChange(true)}
       >
         {intl.formatMessage({ id: "plugins.catalog.enabled" })}
diff --git a/src/components/prompts/PromptDetailsPanel.tsx b/src/components/prompts/PromptDetailsPanel.tsx
index 0f979b1..a314b25 100644
--- a/src/components/prompts/PromptDetailsPanel.tsx
+++ b/src/components/prompts/PromptDetailsPanel.tsx
@@ -21,7 +21,7 @@ import { PromptDefinitionTable } from "./PromptDefinitionTable";
 
 // Segmented-control styling for the Try it / Definition tab triggers.
 const SEGMENTED_TRIGGER_CLASS =
-  "flex-1 rounded-sm px-3 py-1.5 font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm";
+  "flex-1 rounded-sm px-3 py-1.5 font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:elevation-control";
 
 function DetailRow({ label, children }: { label: string; children: ReactNode }) {
   return (
diff --git a/src/components/prompts/PromptForm.tsx b/src/components/prompts/PromptForm.tsx
index 0e0afda..4a56b55 100644
--- a/src/components/prompts/PromptForm.tsx
+++ b/src/components/prompts/PromptForm.tsx
@@ -82,7 +82,7 @@ export function PromptForm({ isOpen, onToggle, onSuccess, prompt }: PromptFormPr
     <div className="mx-auto w-full max-w-3xl">
       <BackButton onClick={onToggle} />
 
-      <div className="rounded-xl border border-neutral-200 bg-inherit p-0 shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+      <div className="rounded-xl border border-neutral-200 bg-inherit p-0 elevation-panel dark:border-neutral-800">
         <div className="flex flex-col gap-6 p-6 sm:p-8">
           <div className="flex items-center gap-3">
             <div className="flex h-6 w-6 items-center justify-center rounded bg-prompt-icon-bg">
diff --git a/src/components/resources/ResourceForm.tsx b/src/components/resources/ResourceForm.tsx
index 394148a..bf3c7c2 100644
--- a/src/components/resources/ResourceForm.tsx
+++ b/src/components/resources/ResourceForm.tsx
@@ -98,11 +98,11 @@ export function ResourceForm({
     <div className="mx-auto w-full max-w-3xl">
       <BackButton onClick={onToggle} />
 
-      <div className="rounded-xl border border-neutral-200 bg-inherit p-0 shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+      <div className="rounded-xl border border-neutral-200 bg-inherit p-0 elevation-panel dark:border-neutral-800">
         <div className="flex flex-col gap-8 p-6 sm:p-8">
           <div className="flex flex-col gap-4">
             <div className="flex items-center gap-2">
-              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-[#ff5aff] shadow-sm">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-[#ff5aff] elevation-sm">
                 <Box className="h-4 w-4 text-black" />
               </div>
               <h2
diff --git a/src/components/server-catalog/CatalogToolbar.tsx b/src/components/server-catalog/CatalogToolbar.tsx
index b7acf77..6a76d59 100644
--- a/src/components/server-catalog/CatalogToolbar.tsx
+++ b/src/components/server-catalog/CatalogToolbar.tsx
@@ -73,7 +73,7 @@ function CatalogViewToggle({
         type="button"
         variant="ghost"
         aria-pressed={!installedOnly}
-        className="h-8 flex-1 rounded-md font-medium aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:shadow-xs"
+        className="h-8 flex-1 rounded-md font-medium aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:elevation-control"
         onClick={() => onChange(false)}
       >
         {intl.formatMessage({ id: "mcpServer.catalog.all" })}
@@ -82,7 +82,7 @@ function CatalogViewToggle({
         type="button"
         variant="ghost"
         aria-pressed={installedOnly}
-        className="h-8 flex-1 rounded-md font-medium aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:shadow-xs"
+        className="h-8 flex-1 rounded-md font-medium aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:elevation-control"
         onClick={() => onChange(true)}
       >
         {intl.formatMessage({ id: "mcpServer.catalog.connected" })}
diff --git a/src/components/servers/MCPServerDetailsPanel.tsx b/src/components/servers/MCPServerDetailsPanel.tsx
index 2efd6a1..4e0a52b 100644
--- a/src/components/servers/MCPServerDetailsPanel.tsx
+++ b/src/components/servers/MCPServerDetailsPanel.tsx
@@ -46,7 +46,7 @@ const TABS: Array<{ value: ComponentTab; label: string }> = [
 
 // Segmented-control styling for the Try it / Components tab triggers.
 const SEGMENTED_TRIGGER_CLASS =
-  "flex-1 rounded-sm px-3 py-1.5 font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm";
+  "flex-1 rounded-sm px-3 py-1.5 font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:elevation-control";
 
 interface Tool {
   id: string;
diff --git a/src/components/servers/TestConnectionPanel.tsx b/src/components/servers/TestConnectionPanel.tsx
index 41f1514..94cf139 100644
--- a/src/components/servers/TestConnectionPanel.tsx
+++ b/src/components/servers/TestConnectionPanel.tsx
@@ -277,7 +277,7 @@ export function TestConnectionPanel({ serverUrl }: TestConnectionPanelProps) {
                     "text-muted-foreground hover:text-foreground",
                     "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                     "disabled:pointer-events-none disabled:opacity-50",
-                    "data-[state=checked]:bg-background data-[state=checked]:text-foreground data-[state=checked]:shadow-sm",
+                    "data-[state=checked]:bg-background data-[state=checked]:text-foreground data-[state=checked]:elevation-control",
                   )}
                 >
                   {m}
diff --git a/src/components/teams/TeamForm.tsx b/src/components/teams/TeamForm.tsx
index b1655da..6d24343 100644
--- a/src/components/teams/TeamForm.tsx
+++ b/src/components/teams/TeamForm.tsx
@@ -75,12 +75,12 @@ export function TeamForm({ isOpen, onToggle, onSuccess, team }: TeamFormProps) {
         {intl.formatMessage({ id: "common.button.back" })}
       </Button>
 
-      <div className="rounded-xl border border-neutral-200 bg-inherit shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+      <div className="rounded-xl border border-neutral-200 bg-inherit elevation-panel dark:border-neutral-800">
         <div className="flex flex-col gap-8 p-6 sm:p-8">
           {/* Header */}
           <div className="flex flex-col gap-3">
             <div className="flex items-center gap-2.5">
-              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-yellow-400 shadow-sm">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-yellow-400 elevation-sm">
                 <Users className="h-4 w-4 text-neutral-900" />
               </div>
               <h2
@@ -141,7 +141,7 @@ export function TeamForm({ isOpen, onToggle, onSuccess, team }: TeamFormProps) {
               <div
                 role="radiogroup"
                 aria-label={intl.formatMessage({ id: "teams.create.visibility" })}
-                className="flex w-full gap-1 rounded-md bg-neutral-100 p-1 dark:bg-neutral-800"
+                className="flex w-full gap-1 rounded-md bg-muted p-1"
               >
                 {(["private", "public"] as const).map((v) => (
                   <div key={v} className="min-w-0 flex-1">
@@ -157,7 +157,7 @@ export function TeamForm({ isOpen, onToggle, onSuccess, team }: TeamFormProps) {
                     />
                     <Label
                       htmlFor={`visibility-${v}`}
-                      className="flex cursor-pointer items-center justify-center rounded-md px-3 py-2 text-center text-sm font-medium text-neutral-500 transition hover:bg-neutral-200 hover:text-neutral-700 peer-checked:bg-neutral-800 peer-checked:text-white peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-neutral-300 dark:peer-checked:bg-neutral-950 dark:peer-checked:text-white"
+                      className="flex cursor-pointer items-center justify-center rounded-md px-3 py-2 text-center text-sm font-medium text-muted-foreground transition hover:text-foreground peer-checked:bg-background peer-checked:text-foreground peer-checked:elevation-control peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"
                     >
                       {intl.formatMessage({ id: `teams.create.visibility.${v}` })}
                     </Label>
diff --git a/src/components/tokens/TokenForm.tsx b/src/components/tokens/TokenForm.tsx
index 55480ff..1200447 100644
--- a/src/components/tokens/TokenForm.tsx
+++ b/src/components/tokens/TokenForm.tsx
@@ -295,7 +295,7 @@ export function TokenForm({ onCancel, onCreated }: TokenFormProps) {
     <div className="mx-auto w-full max-w-3xl">
       <BackButton onClick={onCancel} />
 
-      <div className="rounded-xl border border-neutral-200 bg-inherit shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+      <div className="rounded-xl border border-neutral-200 bg-inherit elevation-panel dark:border-neutral-800">
         <div className="flex flex-col gap-8 p-6 sm:p-8">
           <div className="flex flex-col gap-3">
             <div className="flex items-center gap-2.5">
diff --git a/src/components/tokens/TokenIcon.tsx b/src/components/tokens/TokenIcon.tsx
index 91590aa..aae6aab 100644
--- a/src/components/tokens/TokenIcon.tsx
+++ b/src/components/tokens/TokenIcon.tsx
@@ -16,7 +16,7 @@ export function TokenIcon({ className }: TokenIconProps) {
   return (
     <span
       className={cn(
-        "flex h-6 w-6 shrink-0 items-center justify-center rounded bg-fuchsia-500 shadow-sm",
+        "flex h-6 w-6 shrink-0 items-center justify-center rounded bg-fuchsia-500 elevation-sm",
         className,
       )}
       aria-hidden="true"
diff --git a/src/components/tools/ToolAdvancedSettings.tsx b/src/components/tools/ToolAdvancedSettings.tsx
index cfcc67b..7c1347d 100644
--- a/src/components/tools/ToolAdvancedSettings.tsx
+++ b/src/components/tools/ToolAdvancedSettings.tsx
@@ -161,7 +161,7 @@ export function ToolAdvancedSettings({
         <div
           role="radiogroup"
           aria-labelledby="auth-type-label"
-          className="flex w-full flex-nowrap gap-1 rounded-md bg-neutral-100 p-1 dark:bg-neutral-800"
+          className="flex w-full flex-nowrap gap-1 rounded-md bg-muted p-1"
         >
           {(["none", "basic", "bearer", "custom"] as AuthType[]).map((type) => {
             const label =
@@ -186,7 +186,7 @@ export function ToolAdvancedSettings({
                 />
                 <label
                   htmlFor={`auth-${type}`}
-                  className="flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-center text-sm font-medium text-neutral-500 transition hover:bg-neutral-200 hover:text-neutral-700 peer-checked:bg-neutral-800 peer-checked:text-white peer-checked:px-4 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-neutral-300 dark:peer-checked:bg-neutral-950 dark:peer-checked:text-white"
+                  className="flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-center text-sm font-medium text-muted-foreground transition hover:text-foreground peer-checked:bg-background peer-checked:text-foreground peer-checked:elevation-control peer-checked:px-4 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"
                 >
                   {label}
                 </label>
diff --git a/src/components/tools/ToolForm.tsx b/src/components/tools/ToolForm.tsx
index a8a8f81..e9b6336 100644
--- a/src/components/tools/ToolForm.tsx
+++ b/src/components/tools/ToolForm.tsx
@@ -193,11 +193,11 @@ export function ToolForm({ isOpen, onToggle, onSuccess, tool }: ToolFormProps) {
     <div className="mx-auto w-full max-w-3xl">
       <BackButton onClick={onToggle} />
 
-      <div className="rounded-xl border border-neutral-200 bg-inherit p-0 shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+      <div className="rounded-xl border border-neutral-200 bg-inherit p-0 elevation-panel dark:border-neutral-800">
         <div className="flex flex-col gap-8 p-6 sm:p-8">
           <div className="flex flex-col gap-4">
             <div className="flex items-center gap-2">
-              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-purple-500 shadow-sm">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-purple-500 elevation-sm">
                 <Wrench className="h-4 w-4 text-black" />
               </div>
               <h2 className="text-lg font-semibold tracking-tight text-neutral-950 dark:text-neutral-50">
@@ -224,7 +224,7 @@ export function ToolForm({ isOpen, onToggle, onSuccess, tool }: ToolFormProps) {
                 <div
                   role="radiogroup"
                   aria-labelledby="request-type-label"
-                  className="flex gap-2 rounded-md bg-neutral-100 p-1 dark:bg-neutral-800"
+                  className="flex gap-2 rounded-md bg-muted p-1"
                 >
                   {(["GET", "POST", "PUT", "PATCH", "DELETE"] as RequestType[]).map((type) => {
                     return (
@@ -240,7 +240,7 @@ export function ToolForm({ isOpen, onToggle, onSuccess, tool }: ToolFormProps) {
                         />
                         <label
                           htmlFor={`request-${type}`}
-                          className="flex cursor-pointer items-center justify-center rounded-md px-4 py-1 text-sm font-medium text-neutral-500 transition hover:bg-neutral-200 hover:text-neutral-700 peer-checked:bg-neutral-800 peer-checked:text-white peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-neutral-300 dark:peer-checked:bg-neutral-950 dark:peer-checked:text-white"
+                          className="flex cursor-pointer items-center justify-center rounded-md px-4 py-1 text-sm font-medium text-muted-foreground transition hover:text-foreground peer-checked:bg-background peer-checked:text-foreground peer-checked:elevation-control peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"
                         >
                           {type}
                         </label>
diff --git a/src/components/ui/LanguageSwitcher.tsx b/src/components/ui/LanguageSwitcher.tsx
index cdd0498..e4ad5ba 100644
--- a/src/components/ui/LanguageSwitcher.tsx
+++ b/src/components/ui/LanguageSwitcher.tsx
@@ -20,7 +20,7 @@ export function LanguageSwitcher() {
     <select
       value={locale}
       onChange={(e) => setLocale(e.target.value as SupportedLocale)}
-      className="rounded-md border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 px-3 py-1.5 text-sm shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-400"
+      className="rounded-md border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 px-3 py-1.5 text-sm focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-400"
       aria-label="Select language"
     >
       {SUPPORTED_LOCALES.map((loc) => (
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 179aa50..ef82d4b 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -11,7 +11,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/80",
         outline:
-          "border-border bg-transparent shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input",
+          "border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 5fedbb9..51aa88a 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-6 overflow-hidden rounded-lg bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
+        "group/card flex flex-col gap-6 overflow-hidden rounded-lg bg-card py-6 text-sm text-card-foreground elevation-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
         className,
       )}
       {...props}
diff --git a/src/components/ui/input.test.tsx b/src/components/ui/input.test.tsx
index b232c90..9f0a483 100644
--- a/src/components/ui/input.test.tsx
+++ b/src/components/ui/input.test.tsx
@@ -47,7 +47,9 @@ describe("Input", () => {
       expect(el).toHaveClass("px-2.5");
       expect(el).toHaveClass("py-1");
       expect(el).toHaveClass("text-base");
-      expect(el).toHaveClass("shadow-xs");
+      // Controls carry no shadow in either theme; see the elevation utilities
+      // in index.css.
+      expect(el).not.toHaveClass("shadow-xs");
     });
 
     it("should have outline-none class", () => {
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 7fdc851..2a6f7c4 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
         type={type}
         data-slot="input"
         className={cn(
-          "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+          "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
           className,
         )}
         {...props}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 7134ca0..0f44b21 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -35,7 +35,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 271ece8..e86bbe3 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -232,7 +232,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="flex size-full flex-col bg-background group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+          className="flex size-full flex-col bg-background group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:elevation-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
         >
           {children}
         </div>
@@ -293,7 +293,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "relative flex w-full flex-1 flex-col bg-main md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "relative flex w-full flex-1 flex-col bg-main md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:elevation-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className,
       )}
       {...props}
@@ -450,7 +450,7 @@ const sidebarMenuButtonVariants = cva(
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-background ring-1 ring-sidebar-border hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:ring-sidebar-accent",
       },
       size: {
         default: "h-8 text-sm",
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index 6338184..d263bca 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className,
     )}
     {...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        "pointer-events-none block h-4 w-4 rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
diff --git a/src/components/users/UserForm.tsx b/src/components/users/UserForm.tsx
index caa565b..5dea3db 100644
--- a/src/components/users/UserForm.tsx
+++ b/src/components/users/UserForm.tsx
@@ -137,11 +137,11 @@ export function UserForm({
     <div className="mx-auto w-full max-w-3xl">
       <BackButton onClick={onToggle} />
 
-      <div className="rounded-xl border border-neutral-200 bg-inherit p-0 shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+      <div className="rounded-xl border border-neutral-200 bg-inherit p-0 elevation-panel dark:border-neutral-800">
         <div className="flex flex-col gap-8 p-6 sm:p-8">
           <div className="flex flex-col gap-3">
             <div className="flex items-center gap-2.5">
-              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-emerald-500 shadow-sm">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-emerald-500 elevation-sm">
                 <User className="h-4 w-4 text-white" />
               </div>
               <h2
diff --git a/src/index.css b/src/index.css
index a414659..e0e7a17 100644
--- a/src/index.css
+++ b/src/index.css
@@ -82,6 +82,49 @@
   --radius-4xl: calc(var(--radius) * 2.6);
 }
 
+/**
+ * Theme-conditional elevation.
+ *
+ * Tailwind inlines shadow values at build time (only the color is a
+ * variable, and --tw-shadow-color is registered with inherits: false),
+ * so shadow-sm cannot be switched off per theme from one place. These
+ * utilities read a variable instead. Light mode is flat; dark mode
+ * keeps the raw Tailwind values, so nothing shifts there.
+ *
+ * Surfaces only: cards, panels, toolbars. Floating layers (popovers,
+ * dropdowns, dialogs, sheets, slide-overs) keep literal shadow-md/lg in
+ * both themes; they overlay the page and need the separation. Buttons,
+ * switches, and other controls carry no shadow.
+ *
+ * elevation-control is the exception: the selected chip of a tab bar or
+ * segmented control sits raised above its track in both themes, which is
+ * what makes it read as selected.
+ */
+@utility elevation-xs {
+  --tw-shadow: var(--elevation-xs);
+  box-shadow:
+    var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow), var(--tw-shadow);
+}
+@utility elevation-sm {
+  --tw-shadow: var(--elevation-sm);
+  box-shadow:
+    var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow), var(--tw-shadow);
+}
+@utility elevation-panel {
+  --tw-shadow: var(--elevation-panel);
+  box-shadow:
+    var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow), var(--tw-shadow);
+}
+@utility elevation-control {
+  --tw-shadow: var(--elevation-control);
+  box-shadow:
+    var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow), var(--tw-shadow);
+}
+
 /* Light theme */
 :root {
   --background: oklch(1 0 0);
@@ -141,6 +184,17 @@
 
   /* Selection accent — warm orange for selected/hovered surfaces */
   --selection: var(--color-orange-500);
+
+  /* Surfaces are flat in light mode. Tailwind's transparent-shadow sentinel
+     rather than `none`, so the value stays valid inside the box-shadow list
+     these utilities share with ring-*. */
+  --elevation-xs: 0 0 #0000;
+  --elevation-sm: 0 0 #0000;
+  --elevation-panel: 0 0 #0000;
+
+  /* Raised in light too — the selected chip needs to lift off its track,
+     but only just; a heavier shadow reads as a floating layer. */
+  --elevation-control: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 /*
  ---break---
@@ -185,6 +239,13 @@
   --selection: var(--color-orange-500);
   /* Status-headline icon accent (brand cyan) — bright on the dark background. */
   --status-icon: #70f9ff;
+
+  /* Tailwind's own shadow-xs / shadow-sm values, and the form-panel shadow
+     these utilities replace. */
+  --elevation-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --elevation-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --elevation-panel: 0 12px 40px rgba(15, 23, 42, 0.12);
+  --elevation-control: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 }
 /*
  ---break---
diff --git a/src/pages/ForgotPassword.tsx b/src/pages/ForgotPassword.tsx
index 190171d..581897f 100644
--- a/src/pages/ForgotPassword.tsx
+++ b/src/pages/ForgotPassword.tsx
@@ -1,7 +1,7 @@
 export function ForgotPassword() {
   return (
     <div className="min-h-screen flex items-center justify-center bg-neutral-50 dark:bg-neutral-900">
-      <div className="w-full max-w-sm bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg p-8 shadow-sm">
+      <div className="w-full max-w-sm bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg p-8 elevation-sm">
         <h1 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">
           Forgot password
         </h1>
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 70102ef..7e2f18c 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -47,7 +47,7 @@ export function Login() {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-neutral-50 dark:bg-neutral-900">
-      <div className="w-full max-w-sm bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg p-8 shadow-sm">
+      <div className="w-full max-w-sm bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg p-8 elevation-sm">
         <h1 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-6">
           {intl.formatMessage({ id: "auth.login.title" })}
         </h1>
diff --git a/src/pages/Prompts.tsx b/src/pages/Prompts.tsx
index 9a8c243..ef6b650 100644
--- a/src/pages/Prompts.tsx
+++ b/src/pages/Prompts.tsx
@@ -217,7 +217,7 @@ function AddPromptsCard({
     >
       <CardHeader>
         <div className="flex items-center gap-3">
-          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-tool-add-icon-bg shadow-sm">
+          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-tool-add-icon-bg elevation-sm">
             <Plus className="h-3.5 w-3.5 text-tool-add-icon-fg" />
           </div>
           <span className="text-sm font-semibold text-neutral-900 dark:text-white">
diff --git a/src/pages/ResetPassword.tsx b/src/pages/ResetPassword.tsx
index 3ab402a..984b53b 100644
--- a/src/pages/ResetPassword.tsx
+++ b/src/pages/ResetPassword.tsx
@@ -1,7 +1,7 @@
 export function ResetPassword() {
   return (
     <div className="min-h-screen flex items-center justify-center bg-neutral-50 dark:bg-neutral-900">
-      <div className="w-full max-w-sm bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg p-8 shadow-sm">
+      <div className="w-full max-w-sm bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg p-8 elevation-sm">
         <h1 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">
           Reset password
         </h1>
diff --git a/src/pages/Resources.tsx b/src/pages/Resources.tsx
index 43a8dae..fc3b371 100644
--- a/src/pages/Resources.tsx
+++ b/src/pages/Resources.tsx
@@ -209,8 +209,8 @@ function AddResourcesCard({ onAddResource }: { onAddResource: () => void }) {
     >
       <CardHeader>
         <div className="flex items-center gap-3">
-          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-neutral-200 shadow-sm dark:bg-white">
-            <Plus className="h-3.5 w-3.5 text-neutral-700 dark:text-neutral-900" />
+          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-tool-add-icon-bg elevation-sm">
+            <Plus className="h-3.5 w-3.5 text-tool-add-icon-fg" />
           </div>
           <span className="text-sm font-semibold text-neutral-900 dark:text-white">
             {intl.formatMessage({ id: "resources.addResources.title" })}
@@ -535,7 +535,7 @@ export function Resources() {
   return (
     <div className="p-6">
       {showForm && editingResource && isLoadingResourceContent ? (
-        <div className="mx-auto mt-6 flex w-full max-w-3xl items-center justify-center rounded-xl border border-neutral-200 bg-inherit p-12 shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+        <div className="mx-auto mt-6 flex w-full max-w-3xl items-center justify-center rounded-xl border border-neutral-200 bg-inherit p-12 elevation-panel dark:border-neutral-800">
           <span className="sr-only">
             {intl.formatMessage({ id: "resources.form.loadingContent" })}
           </span>
@@ -557,7 +557,7 @@ export function Resources() {
           </div>
         </div>
       ) : showForm && editingResource && isEditingBinaryResource ? (
-        <div className="mx-auto mt-6 w-full max-w-3xl rounded-xl border border-neutral-200 bg-inherit p-6 shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+        <div className="mx-auto mt-6 w-full max-w-3xl rounded-xl border border-neutral-200 bg-inherit p-6 elevation-panel dark:border-neutral-800">
           <h3 className="mb-1 font-semibold text-neutral-900 dark:text-white">
             {intl.formatMessage({ id: "resources.form.binaryUnsupported" })}
           </h3>
diff --git a/src/pages/Tokens.tsx b/src/pages/Tokens.tsx
index 0d4d592..ad3857f 100644
--- a/src/pages/Tokens.tsx
+++ b/src/pages/Tokens.tsx
@@ -129,7 +129,7 @@ export function Tokens() {
           <p className="text-destructive">{error.message}</p>
         </div>
       ) : tokens.length === 0 ? (
-        <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
+        <div className="rounded-xl border border-border bg-card p-6 elevation-sm">
           <div className="flex items-center gap-3">
             <TokenIcon />
             <h2 className="text-lg font-semibold text-foreground">
diff --git a/src/pages/Tools.tsx b/src/pages/Tools.tsx
index 5e7573e..2ebf469 100644
--- a/src/pages/Tools.tsx
+++ b/src/pages/Tools.tsx
@@ -156,7 +156,7 @@ function AddToolsCard({ onAddTool }: { onAddTool: () => void }) {
     >
       <CardHeader>
         <div className="flex items-center gap-3">
-          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-tool-add-icon-bg shadow-sm">
+          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded bg-tool-add-icon-bg elevation-sm">
             <Plus className="h-3.5 w-3.5 text-tool-add-icon-fg" />
           </div>
           <span className="text-sm font-semibold text-neutral-900 dark:text-white">
diff --git a/src/pages/Users.tsx b/src/pages/Users.tsx
index efe41f9..0ed2be8 100644
--- a/src/pages/Users.tsx
+++ b/src/pages/Users.tsx
@@ -320,7 +320,7 @@ export function Users() {
                   </div>
                 </>
               ) : (
-                <div className="rounded-2xl border border-border bg-card p-8 shadow-sm">
+                <div className="rounded-2xl border border-border bg-card p-8 elevation-sm">
                   <h2 className="text-xl font-semibold text-card-foreground">
                     {intl.formatMessage({ id: "users.empty.title" })}
                   </h2>