refactor(design): shadow-literal and raw-hex token migration (elevation E1+E2)

src/components/clinical-dashboard/account-setup-dialog.tsx

@@ -95,7 +95,7 @@ export function AccountSetupDialog({ open, onClose }: { open: boolean; onClose:
       closeLabel="Close account setup"
       initialFocusRef={emailInputRef}
       bodyClassName="p-0 sm:p-0"
-      contentClassName="account-setup-dialog max-h-[calc(100dvh-0.75rem)] rounded-t-[1.35rem] border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] shadow-[0_24px_70px_rgba(15,23,42,0.18)] sm:max-h-[calc(100dvh-2rem)] sm:max-w-[32rem] sm:rounded-xl"
+      contentClassName="account-setup-dialog max-h-[calc(100dvh-0.75rem)] rounded-t-[1.35rem] border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] shadow-[var(--shadow-elevated)] sm:max-h-[calc(100dvh-2rem)] sm:max-w-[32rem] sm:rounded-xl"
       portal
     >
       <form onSubmit={submit} className="relative">

src/components/clinical-dashboard/document-search-results.tsx

@@ -655,7 +655,7 @@ function SearchRecordResults({
               data-testid={`${copy.testIdPrefix}-result-${service.slug}`}
               className={cn(
                 sourceCard,
-                "grid gap-3 p-3 shadow-[0_8px_18px_rgb(15_27_45_/_4%)] transition hover:border-[color:var(--clinical-accent-border)] sm:p-4",
+                "grid gap-3 p-3 shadow-[var(--shadow-tight)] transition hover:border-[color:var(--clinical-accent-border)] sm:p-4",
                 index === 0 && "ring-1 ring-[color:var(--clinical-accent)]/15",
               )}
             >
@@ -1014,7 +1014,7 @@ function DocumentSearchResultsPanelImpl({
                     key={document.document_id}
                     className={cn(
                       sourceCard,
-                      "relative overflow-visible p-0 shadow-[0_8px_18px_rgb(15_27_45_/_4%)] transition hover:border-[color:var(--clinical-accent-border)] hover:shadow-[0_14px_32px_rgb(15_27_45_/_7%)]",
+                      "relative overflow-visible p-0 shadow-[var(--shadow-tight)] transition hover:border-[color:var(--clinical-accent-border)] hover:shadow-[var(--shadow-hover)]",
                       selected &&
                         "border-[color:var(--clinical-accent-border)] ring-1 ring-[color:var(--clinical-accent)]/20",
                     )}

src/components/clinical-dashboard/mode-action-popup.tsx

@@ -773,8 +773,8 @@ export function ModeActionPopup({
       >
         <div
           className={cn(
-            "mode-action-panel overflow-hidden border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] shadow-[0_18px_42px_rgb(15_37_48_/_16%)] ring-1 ring-white/45 dark:ring-white/10",
-            integrated ? "rounded-[1.35rem] shadow-[0_20px_48px_rgb(15_37_48_/_18%)]" : "rounded-[1rem]",
+            "mode-action-panel overflow-hidden border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] shadow-[var(--shadow-elevated)] ring-1 ring-white/45 dark:ring-white/10",
+            integrated ? "rounded-[1.35rem] shadow-[var(--shadow-elevated)]" : "rounded-[1rem]",
           )}
         >
           {renderPopoverHeader()}

src/components/clinical-dashboard/settings-dialog.tsx

@@ -197,7 +197,7 @@ export function SettingsDialog({
             </span>
           </div>
 
-          <section className="rounded-[1.35rem] border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] p-3.5 shadow-[0_12px_30px_rgba(0,0,0,0.06),var(--shadow-inset)] dark:shadow-[0_18px_40px_rgba(0,0,0,0.32),var(--shadow-inset)] lg:rounded-xl lg:bg-[color:var(--surface)] lg:p-4 lg:shadow-[var(--shadow-inset)]">
+          <section className="rounded-[1.35rem] border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] p-3.5 shadow-[var(--shadow-soft),var(--shadow-inset)] lg:rounded-xl lg:bg-[color:var(--surface)] lg:p-4 lg:shadow-[var(--shadow-inset)]">
             <h3 className="mb-3 px-0.5 text-base-minus font-semibold leading-5 text-[color:var(--text-heading)]">
               Clinical Guide account
             </h3>
@@ -353,7 +353,7 @@ export function SettingsDialog({
                   <h3 className="mb-1 px-1 text-xs leading-normal font-semibold tracking-normal text-[color:var(--text-muted)] lg:mb-1.5 lg:text-sm-minus lg:text-[color:var(--text-heading)]">
                     {section.title}
                   </h3>
-                  <div className="overflow-hidden rounded-[1.1rem] border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] shadow-[0_8px_22px_rgba(0,0,0,0.04),var(--shadow-inset)] dark:shadow-[0_12px_26px_rgba(0,0,0,0.24),var(--shadow-inset)] lg:rounded-none lg:border-0 lg:bg-transparent lg:shadow-none">
+                  <div className="overflow-hidden rounded-[1.1rem] border border-[color:var(--border-lux)] bg-[color:var(--surface-lux)] shadow-[var(--shadow-soft),var(--shadow-inset)] lg:rounded-none lg:border-0 lg:bg-transparent lg:shadow-none">
                     {section.rows.map((row) => (
                       <SettingsRow key={`${section.title}-${row.label}`} {...row} />
                     ))}
@@ -528,7 +528,7 @@ function SettingsRow({
         className={cn(
           "grid h-7 w-7 shrink-0 place-items-center rounded-full transition sm:h-8 sm:w-8 lg:rounded-lg lg:border lg:shadow-[var(--shadow-inset)]",
           active
-            ? "bg-[color:var(--clinical-accent)] text-[color:var(--clinical-accent-contrast)] shadow-[0_7px_16px_color-mix(in_srgb,var(--clinical-accent)_24%,transparent)] lg:border-[color:var(--clinical-accent)]"
+            ? "bg-[color:var(--clinical-accent)] text-[color:var(--clinical-accent-contrast)] shadow-[var(--glow-soft)] lg:border-[color:var(--clinical-accent)]"
             : "bg-transparent text-[color:var(--text-muted)] lg:border-[color:var(--border)] lg:bg-[color:var(--surface-lux)]",
         )}
       >

src/components/clinical-dashboard/universal-search-command-surface.tsx

@@ -161,7 +161,7 @@ function CommandDropdown({
       className={cn(
         // text-left: the hero composer slot sits inside the centred mode-home
         // template, so without it the section headings inherit text-center.
-        "universal-command-dropdown absolute left-0 right-0 z-30 overflow-hidden rounded-2xl border border-[color:var(--border-strong)] bg-[color:var(--surface)] text-left shadow-[0_8px_20px_rgb(16_24_40_/_9%),0_24px_56px_rgb(16_24_40_/_14%)]",
+        "universal-command-dropdown absolute left-0 right-0 z-30 overflow-hidden rounded-2xl border border-[color:var(--border-strong)] bg-[color:var(--surface)] text-left shadow-[var(--shadow-elevated)]",
         opensUpward ? "bottom-[calc(100%+0.5rem)] top-auto" : "top-[calc(100%+0.5rem)]",
         // Phones never get the typeahead popup — it crowds the small screen —
         // so both placements stay hidden below their smallest useful width.

src/components/favourites-page-mockups/favourites-library-redesign-page.tsx

@@ -414,7 +414,7 @@ function ResumeBand({ variant, selected }: { variant: FavouritesLibraryRedesignV
                 key={stat.label}
                 className="grid min-h-20 grid-cols-[auto_minmax(0,1fr)] items-center gap-3 border-t border-[#dbe5ec] px-4 first:border-t-0 sm:border-l sm:border-t-0 sm:first:border-l-0"
               >
-                <span className="grid h-9 w-9 place-items-center rounded-lg bg-white text-[#007c89] shadow-[inset_0_0_0_1px_#d8e6eb]">
+                <span className="grid h-9 w-9 place-items-center rounded-lg bg-white text-[#007c89] shadow-[inset_0_0_0_1px_var(--border)]">
                   <Icon className="h-4 w-4" aria-hidden />
                 </span>
                 <span className="min-w-0">
@@ -562,7 +562,7 @@ function SetNavigatorStrip({ variant }: { variant: FavouritesLibraryRedesignVari
             key={set.title}
             className={cn(
               "rounded-xl border bg-white p-4 shadow-[0_16px_40px_rgba(15,31,44,0.06)]",
-              active ? "border-[#7fc9b1] ring-2 ring-[#bfe6d8]" : "border-[#d6e0e7]",
+              active ? "border-[#7fc9b1] ring-2 ring-[color:var(--clinical-accent-border)]" : "border-[#d6e0e7]",
             )}
           >
             <div className="flex items-start justify-between gap-3">
@@ -637,7 +637,7 @@ function LibraryTable({ variant, selected }: { variant: FavouritesLibraryRedesig
                 className={cn(
                   "grid min-h-[5.5rem] grid-cols-[4.25rem_minmax(8.5rem,1.2fr)_5rem_5.5rem_5.75rem_5rem] items-center gap-2 border-b border-[#e4ebf1] px-3 py-3 last:border-b-0 transition",
                   focusRing,
-                  isSelected ? "bg-[#edf7fb] shadow-[inset_3px_0_0_#0b7285]" : "hover:bg-[#f8fafc]",
+                  isSelected ? "bg-[#edf7fb] shadow-[inset_3px_0_0_var(--clinical-accent)]" : "hover:bg-[#f8fafc]",
                 )}
               >
                 <span className="flex items-center gap-2">

src/components/forms/forms-search-results-page.tsx

@@ -456,7 +456,7 @@ function MobileCards({ matches, query }: { matches: FormSearchMatch[]; query: st
             <article
               key={form.slug}
               data-testid={`form-search-mobile-result-${form.slug}`}
-              className="grid grid-cols-[44px_minmax(0,1fr)] gap-2.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-2.5 shadow-[0_1px_2px_rgb(12_24_34_/_5%)]"
+              className="grid grid-cols-[44px_minmax(0,1fr)] gap-2.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-2.5 shadow-[var(--shadow-tight)]"
             >
               <div className="grid h-11 w-11 place-items-center rounded-lg border border-[color:var(--clinical-accent-border)] bg-[color:var(--clinical-accent-soft)] text-xl font-extrabold leading-none text-[color:var(--clinical-accent)]">
                 {resultCode(match, index)}

src/components/ui-primitives.tsx

@@ -66,7 +66,7 @@ export const proseMeasure = "max-w-[68ch]";
 // chunk numbers, guideline versions, document IDs. Pairs with tabular figures.
 export const codeText = "font-mono tabular-nums tracking-tight";
 export const commandInput =
-  "min-h-12 w-full rounded-lg border border-[color:var(--border)]/70 bg-[color:var(--surface)] pl-12 pr-12 text-sm font-semibold text-[color:var(--text)] shadow-[0_10px_22px_rgba(0,0,0,0.06),var(--shadow-inset)] outline-none transition placeholder:text-[color:var(--text-soft)] focus:border-[color:var(--focus)] focus:ring-4 focus:ring-[color:var(--focus)]/25 motion-safe:transition sm:text-base";
+  "min-h-12 w-full rounded-lg border border-[color:var(--border)]/70 bg-[color:var(--surface)] pl-12 pr-12 text-sm font-semibold text-[color:var(--text)] shadow-[var(--shadow-soft),var(--shadow-inset)] outline-none transition placeholder:text-[color:var(--text-soft)] focus:border-[color:var(--focus)] focus:ring-4 focus:ring-[color:var(--focus)]/25 motion-safe:transition sm:text-base";
 
 export const chatAnswerText =
   "max-w-[68ch] text-base-minus font-medium leading-[1.56] text-[color:var(--text-heading)] sm:text-base sm:leading-[1.62]";
@@ -109,7 +109,7 @@ export const clinicalNotesRow =
  */
 export const chatComposerShellBase = "flex items-center rounded-full border";
 export const chatComposerShellDelta =
-  "min-h-14 gap-2 border-[color:var(--border-strong)] bg-[color:var(--surface)] px-2 shadow-[0_1px_2px_rgb(16_24_40_/_5%),0_8px_22px_rgb(16_24_40_/_8%)] focus-within:border-[color:var(--clinical-accent)]";
+  "min-h-14 gap-2 border-[color:var(--border-strong)] bg-[color:var(--surface)] px-2 shadow-[var(--shadow-soft)] focus-within:border-[color:var(--clinical-accent)]";
 export const chatComposerShell = `${chatComposerShellBase} ${chatComposerShellDelta}`;
 export const chatComposerInput =
   "min-h-tap min-w-0 flex-1 bg-transparent px-2 text-base font-medium text-[color:var(--text)] outline-none placeholder:text-[color:var(--text-soft)]";
@@ -118,7 +118,7 @@ export const chatComposerIconButton =
 export const chatSendButton =
   "grid h-tap w-tap shrink-0 place-items-center rounded-full bg-[color:var(--clinical-accent)] text-[color:var(--clinical-accent-contrast)] shadow-[var(--shadow-tight)] transition hover:bg-[color:var(--clinical-accent-hover)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] disabled:cursor-not-allowed disabled:opacity-50";
 export const tableCard =
-  "overflow-hidden rounded-lg border border-[color:var(--border)]/80 bg-[color:var(--surface)] shadow-[0_6px_16px_rgb(15_27_45_/_4%)]";
+  "overflow-hidden rounded-lg border border-[color:var(--border)]/80 bg-[color:var(--surface)] shadow-[var(--shadow-tight)]";
 export const tableCardHeader =
   "border-b border-[color:var(--border)] bg-[color:var(--clinical-chat-table-header)] px-3 py-2.5 text-sm font-semibold text-[color:var(--text-heading)]";
 export const tableMicroActionRow =