diff --git a/client/scripts/validate-styles.mjs b/client/scripts/validate-styles.mjs
index 83451ea32..91adfe465 100644
--- a/client/scripts/validate-styles.mjs
+++ b/client/scripts/validate-styles.mjs
@@ -32,6 +32,19 @@ const TUNED_TEXT_TOKENS = [
 // (`hover:`, `placeholder:`, `group-data-[active=true]/item:` and so on).
 const FADED_TEXT_PATTERN = new RegExp(String.raw`(?:[\w[\]=.\-/]+:)*text-(?:${TUNED_TEXT_TOKENS.join('|')})\/\d+`, 'g')
 const LEGACY_SETTINGS_BUTTON_PATTERN = /\bsettings-btn-(?:primary|outline|secondary|danger)\b/g
+
+/**
+ * Modal backdrops take their veil from `bg-scrim`, or `bg-scrim-media` behind image viewers, so
+ * every dialog and sheet dims the page the same way in both themes. A backdrop tinted with a theme
+ * colour inverts in dark mode: `--foreground` is near-white there, so the veil washes the page grey
+ * instead of dimming it. A full-screen layer counts as a backdrop when it is fixed or dismisses on
+ * click; tinted overlays that only decorate a cover or card are left alone.
+ */
+const ELEMENT_OPENING_TAG_PATTERN = /<[A-Za-z][\w-]*\b[^<>]*>/g
+const DIALOG_OVERLAY_TAG_PATTERN = /^<(?:Dialog|AlertDialog)Overlay\b/
+const SCRIM_CLASS_PATTERN = /\bbg-scrim(?:-media)?\b/
+const TINTED_BACKDROP_PATTERN = /\bbg-(?:black|white|foreground|background)\/\d+/
+const BACKDROP_ROLE_PATTERN = /\bfixed\b|@click/
 const BUTTON_OPENING_TAG_PATTERN = /<Button\b[\s\S]*?>/g
 const DESTRUCTIVE_BUTTON_VARIANT_PATTERN = /\bvariant=["']destructive(?:-outline|-ghost)?["']/
 const DESTRUCTIVE_BUTTON_COLOR_OVERRIDE_PATTERN =
@@ -74,6 +87,17 @@ for (const file of await sourceFiles(sourceDirectory)) {
     errors.push(`${relativePath}:${line}: destructive Button color override - keep destructive styling centralized in the shared Button variants.`)
   }
 
+  for (const match of source.matchAll(ELEMENT_OPENING_TAG_PATTERN)) {
+    const tag = match[0]
+    const isDialogOverlay = DIALOG_OVERLAY_TAG_PATTERN.test(tag)
+    const isTintedBackdrop = /\binset-0\b/.test(tag) && BACKDROP_ROLE_PATTERN.test(tag) && TINTED_BACKDROP_PATTERN.test(tag)
+    if ((!isDialogOverlay || SCRIM_CLASS_PATTERN.test(tag)) && !isTintedBackdrop) continue
+    const line = source.slice(0, match.index).split('\n').length
+    errors.push(
+      `${relativePath}:${line}: modal backdrop - use bg-scrim, or bg-scrim-media behind an image viewer, so it dims the page in both themes.`,
+    )
+  }
+
   for (const [index, line] of lines.entries()) {
     for (const match of line.matchAll(LEGACY_SETTINGS_BUTTON_PATTERN)) {
       errors.push(`${relativePath}:${index + 1}: ${match[0]} - use the shared Button component and its variants.`)
@@ -99,4 +123,4 @@ if (errors.length > 0) {
   throw new Error(`Style validation failed:\n${errors.join('\n')}`)
 }
 
-console.log('Validated style tokens and shared settings buttons')
+console.log('Validated style tokens, modal backdrops and shared settings buttons')
diff --git a/client/src/assets/theme/bridge.css b/client/src/assets/theme/bridge.css
index fd2f3355a..daf165b8c 100644
--- a/client/src/assets/theme/bridge.css
+++ b/client/src/assets/theme/bridge.css
@@ -65,6 +65,8 @@
 
   --color-diff-del: var(--diff-del);
   --color-diff-ins: var(--diff-ins);
+  --color-scrim: var(--scrim);
+  --color-scrim-media: var(--scrim-media);
   --color-path-dim: var(--path-dim);
   --color-path-fold: var(--path-fold);
 
diff --git a/client/src/assets/theme/tokens.css b/client/src/assets/theme/tokens.css
index 449215383..09674cd08 100644
--- a/client/src/assets/theme/tokens.css
+++ b/client/src/assets/theme/tokens.css
@@ -102,6 +102,13 @@
   --surface-3: oklch(0.93 var(--tint-c-surface) var(--tint-h));
   --surface-4: oklch(0.91 var(--tint-c-surface) var(--tint-h));
 
+  /* Modal scrims: the veil behind every dialog and sheet. Dark in both themes. Tinting it with the
+     foreground colour washed dark mode out to grey instead of dimming it, because there the
+     foreground is near-white. --scrim-media sits behind image viewers, where the picture is the
+     point, so it is near-opaque in both themes. */
+  --scrim: oklch(0.2 0.02 var(--tint-h) / 0.35);
+  --scrim-media: oklch(0 0 0 / 0.82);
+
   /* Shadows */
   --elevation-xs: 0 1px 2px oklch(0 0 0 / 0.05);
   --elevation-sm: 0 1px 3px oklch(0 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.06);
@@ -362,6 +369,9 @@
   --surface-3: oklch(calc(0.245 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
   --surface-4: oklch(calc(0.295 + var(--bg-lift)) var(--tint-c-surface) var(--tint-h));
 
+  /* A dark surface needs a deeper veil than a light one to read as dimmed at all. */
+  --scrim: oklch(0.06 0.01 var(--tint-h) / 0.62);
+
   /* Shadows */
   --elevation-xs: 0 1px 2px oklch(0 0 0 / 0.4);
   --elevation-sm: 0 1px 3px oklch(0 0 0 / 0.5), 0 1px 2px oklch(0 0 0 / 0.4);
diff --git a/client/src/components/legal/LegalNotices.vue b/client/src/components/legal/LegalNotices.vue
index 61569f3bb..a29ec75f3 100644
--- a/client/src/components/legal/LegalNotices.vue
+++ b/client/src/components/legal/LegalNotices.vue
@@ -15,7 +15,7 @@ const ADDITIONAL_TERMS_URL = `${PROJECT_URL}/blob/main/ADDITIONAL_TERMS.md`
 <template>
   <DialogRoot :open="open" @update:open="handleOpenChange">
     <DialogPortal>
-      <DialogOverlay class="fixed inset-0 z-50 bg-foreground/50" />
+      <DialogOverlay class="fixed inset-0 z-50 bg-scrim" />
       <DialogContent
         aria-modal="true"
         class="fixed left-1/2 top-1/2 z-50 max-h-[calc(100svh-2rem)] w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border border-border bg-card p-6 shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
diff --git a/client/src/components/ui/ConfirmDialog.vue b/client/src/components/ui/ConfirmDialog.vue
index 8e029f16c..d02f3a8f8 100644
--- a/client/src/components/ui/ConfirmDialog.vue
+++ b/client/src/components/ui/ConfirmDialog.vue
@@ -50,7 +50,7 @@ function handleCancel() {
 <template>
   <DialogRoot :open="open" @update:open="handleOpenChange">
     <DialogPortal>
-      <DialogOverlay class="fixed inset-0 z-[70] bg-foreground/50" />
+      <DialogOverlay class="fixed inset-0 z-[70] bg-scrim" />
       <DialogContent
         aria-modal="true"
         class="fixed left-1/2 top-1/2 z-[70] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-card p-6 shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
diff --git a/client/src/components/ui/__tests__/ConfirmDialog.spec.ts b/client/src/components/ui/__tests__/ConfirmDialog.spec.ts
index f79ac5c6c..782d8f721 100644
--- a/client/src/components/ui/__tests__/ConfirmDialog.spec.ts
+++ b/client/src/components/ui/__tests__/ConfirmDialog.spec.ts
@@ -96,7 +96,7 @@ describe('ConfirmDialog', () => {
     // Simulate an underlying drawer/sheet overlay rendered at z-50
     const sheetOverlay = document.createElement('div')
     sheetOverlay.setAttribute('data-slot', 'sheet-overlay')
-    sheetOverlay.className = 'fixed inset-0 z-50 bg-black/15'
+    sheetOverlay.className = 'fixed inset-0 z-50 bg-scrim'
     document.body.appendChild(sheetOverlay)
 
     const wrapper = mountDialog()
diff --git a/client/src/components/ui/sheet/SheetOverlay.vue b/client/src/components/ui/sheet/SheetOverlay.vue
index 20f06885d..e9ee999f2 100644
--- a/client/src/components/ui/sheet/SheetOverlay.vue
+++ b/client/src/components/ui/sheet/SheetOverlay.vue
@@ -15,7 +15,7 @@ const delegatedProps = reactiveOmit(props, 'class')
     data-slot="sheet-overlay"
     :class="
       cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/15',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-scrim',
         props.class,
       )
     "
diff --git a/client/src/features/admin/ResetLinkModal.vue b/client/src/features/admin/ResetLinkModal.vue
index 1f832bbb3..e39101739 100644
--- a/client/src/features/admin/ResetLinkModal.vue
+++ b/client/src/features/admin/ResetLinkModal.vue
@@ -53,7 +53,7 @@ function handleCopy() {
 </script>
 
 <template>
-  <div class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 px-4" @click.self="handleClose">
+  <div class="fixed inset-0 z-[60] flex items-center justify-center bg-scrim px-4" @click.self="handleClose">
     <div class="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl">
       <div class="flex items-start justify-between mb-4">
         <h2 class="text-base font-semibold text-foreground">{{ t('adminFeature.resetLink.title') }}</h2>
diff --git a/client/src/features/auth/ChangePasswordDialog.vue b/client/src/features/auth/ChangePasswordDialog.vue
index 97cf42ab4..7f0bcdf28 100644
--- a/client/src/features/auth/ChangePasswordDialog.vue
+++ b/client/src/features/auth/ChangePasswordDialog.vue
@@ -52,7 +52,7 @@ async function handleSubmit() {
 
 <template>
   <Teleport to="body">
-    <div class="fixed inset-0 z-[70] flex items-center justify-center bg-black/50 px-4">
+    <div class="fixed inset-0 z-[70] flex items-center justify-center bg-scrim px-4">
       <div class="w-full max-w-sm rounded-lg border border-border bg-card shadow-xl p-6">
         <div class="flex items-center justify-between mb-5">
           <h2 class="text-base font-semibold text-foreground">{{ t('auth.changePassword.title') }}</h2>
diff --git a/client/src/features/author/components/AuthorConfirmDialog.vue b/client/src/features/author/components/AuthorConfirmDialog.vue
index be71b3e86..fdbb6d7b7 100644
--- a/client/src/features/author/components/AuthorConfirmDialog.vue
+++ b/client/src/features/author/components/AuthorConfirmDialog.vue
@@ -32,7 +32,7 @@ const resolvedCancelLabel = computed(() => props.cancelLabel ?? t('common.cancel
 <template>
   <Teleport to="body">
     <div v-if="open" class="fixed inset-0 z-[70] flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="emit('cancel')" />
+      <div class="absolute inset-0 bg-scrim" @click="emit('cancel')" />
       <div class="relative z-10 mx-4 w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-2xl">
         <div class="mb-5 flex items-start gap-4">
           <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full" :class="destructive ? 'bg-destructive/10' : 'bg-primary/10'">
diff --git a/client/src/features/author/components/AuthorHeader.vue b/client/src/features/author/components/AuthorHeader.vue
index 788b76eb8..ce913a40e 100644
--- a/client/src/features/author/components/AuthorHeader.vue
+++ b/client/src/features/author/components/AuthorHeader.vue
@@ -225,7 +225,7 @@ watch(resolvedBio, () => {
   <Teleport to="body">
     <div
       v-if="imageLightboxOpen && displayImageUrl"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-scrim-media"
       @click="imageLightboxOpen = false"
     >
       <button
diff --git a/client/src/features/book-dock/components/BookDockBulkEditDialog.vue b/client/src/features/book-dock/components/BookDockBulkEditDialog.vue
index 4cbf623a7..cb5098b49 100644
--- a/client/src/features/book-dock/components/BookDockBulkEditDialog.vue
+++ b/client/src/features/book-dock/components/BookDockBulkEditDialog.vue
@@ -114,7 +114,7 @@ function handleClose() {
 <template>
   <Teleport to="body">
     <div class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="handleClose" />
+      <div class="absolute inset-0 bg-scrim" @click="handleClose" />
       <div class="relative z-10 w-full max-w-md mx-4 bg-card border border-border rounded-lg shadow-2xl overflow-hidden">
         <div class="flex items-center justify-between px-5 py-4 border-b border-border">
           <h2 class="text-base font-semibold text-foreground">
diff --git a/client/src/features/book-dock/components/BookDockCoverPeek.vue b/client/src/features/book-dock/components/BookDockCoverPeek.vue
index be50c599d..5199e7142 100644
--- a/client/src/features/book-dock/components/BookDockCoverPeek.vue
+++ b/client/src/features/book-dock/components/BookDockCoverPeek.vue
@@ -136,7 +136,7 @@ function onCoverLoad(event: Event) {
 
   <DialogRoot :open="!!lightbox" @update:open="onLightboxOpenChange">
     <DialogPortal>
-      <DialogOverlay class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=open]:fade-in-0" />
+      <DialogOverlay class="fixed inset-0 z-50 bg-scrim-media data-[state=open]:animate-in data-[state=open]:fade-in-0" />
       <DialogContent
         class="fixed left-1/2 top-1/2 z-50 max-h-[90vh] max-w-[90vw] -translate-x-1/2 -translate-y-1/2 outline-none data-[state=open]:animate-in data-[state=open]:zoom-in-95"
       >
diff --git a/client/src/features/book-dock/components/BookDockFileSheet.vue b/client/src/features/book-dock/components/BookDockFileSheet.vue
index b95dca996..cd76fbd6c 100644
--- a/client/src/features/book-dock/components/BookDockFileSheet.vue
+++ b/client/src/features/book-dock/components/BookDockFileSheet.vue
@@ -443,7 +443,7 @@ onMounted(() => {
 
 <template>
   <div class="fixed inset-0 z-50 flex">
-    <div class="hidden sm:block flex-1 bg-black/50 backdrop-blur-sm" @click="$emit('close')" />
+    <div class="hidden sm:block flex-1 bg-scrim" @click="$emit('close')" />
 
     <div
       class="relative flex flex-col w-full h-full bg-background sm:border-l border-border shadow-2xl overflow-hidden transition-[width,max-width] duration-300"
diff --git a/client/src/features/book-dock/components/BookDockFinalizeDialog.vue b/client/src/features/book-dock/components/BookDockFinalizeDialog.vue
index 613eca23b..4b25e3800 100644
--- a/client/src/features/book-dock/components/BookDockFinalizeDialog.vue
+++ b/client/src/features/book-dock/components/BookDockFinalizeDialog.vue
@@ -338,7 +338,7 @@ async function handleDiscardResultDuplicates() {
 <template>
   <Teleport to="body">
     <div class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="handleClose" />
+      <div class="absolute inset-0 bg-scrim" @click="handleClose" />
       <div class="relative z-10 w-full max-w-2xl mx-4 bg-card border border-border rounded-lg shadow-2xl overflow-hidden">
         <div class="flex items-center justify-between px-5 py-4 border-b border-border">
           <h2 class="text-base font-semibold text-foreground">
diff --git a/client/src/features/book-dock/components/BookDockSetDestinationDialog.vue b/client/src/features/book-dock/components/BookDockSetDestinationDialog.vue
index bd9426ecc..33f5a3674 100644
--- a/client/src/features/book-dock/components/BookDockSetDestinationDialog.vue
+++ b/client/src/features/book-dock/components/BookDockSetDestinationDialog.vue
@@ -99,7 +99,7 @@ function handleClose() {
 <template>
   <Teleport to="body">
     <div class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="handleClose" />
+      <div class="absolute inset-0 bg-scrim" @click="handleClose" />
       <div class="relative z-10 w-full max-w-xl mx-4 bg-card border border-border rounded-lg shadow-2xl overflow-hidden">
         <div class="flex items-center justify-between px-5 py-4 border-b border-border">
           <h2 class="text-base font-semibold text-foreground">
diff --git a/client/src/features/book-metadata-fetch/components/AuthorEnrichmentReportModal.vue b/client/src/features/book-metadata-fetch/components/AuthorEnrichmentReportModal.vue
index 44c881e20..874edf86a 100644
--- a/client/src/features/book-metadata-fetch/components/AuthorEnrichmentReportModal.vue
+++ b/client/src/features/book-metadata-fetch/components/AuthorEnrichmentReportModal.vue
@@ -49,7 +49,7 @@ onMounted(() => loadPage(1))
 </script>
 
 <template>
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click.self="emit('close')">
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-scrim" @click.self="emit('close')">
     <div class="bg-background border border-border rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
       <div class="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
         <h2 class="text-sm font-semibold">{{ t('bookMetadataFetch.report.authorTitle') }}</h2>
diff --git a/client/src/features/book-metadata-fetch/components/BookMetadataFetchReportModal.vue b/client/src/features/book-metadata-fetch/components/BookMetadataFetchReportModal.vue
index 07b2b5af1..9dc4bd2af 100644
--- a/client/src/features/book-metadata-fetch/components/BookMetadataFetchReportModal.vue
+++ b/client/src/features/book-metadata-fetch/components/BookMetadataFetchReportModal.vue
@@ -49,7 +49,7 @@ onMounted(() => loadPage(1))
 </script>
 
 <template>
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click.self="emit('close')">
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-scrim" @click.self="emit('close')">
     <div class="bg-background border border-border rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
       <div class="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
         <h2 class="text-sm font-semibold">{{ t('bookMetadataFetch.report.bookTitle') }}</h2>
diff --git a/client/src/features/book-requests/components/GrabReleaseDialog.vue b/client/src/features/book-requests/components/GrabReleaseDialog.vue
index 130675090..57ac47a76 100644
--- a/client/src/features/book-requests/components/GrabReleaseDialog.vue
+++ b/client/src/features/book-requests/components/GrabReleaseDialog.vue
@@ -117,7 +117,7 @@ function handleSubmit() {
 <template>
   <DialogRoot :open="isOpen" @update:open="handleOpenChange">
     <DialogPortal>
-      <DialogOverlay class="fixed inset-0 z-50 bg-foreground/50" />
+      <DialogOverlay class="fixed inset-0 z-50 bg-scrim" />
       <DialogContent
         aria-modal="true"
         class="fixed left-1/2 top-1/2 z-50 max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border border-border bg-card p-6 shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
diff --git a/client/src/features/book/components/BookCoverLightbox.vue b/client/src/features/book/components/BookCoverLightbox.vue
index fd66fb888..83aa943ea 100644
--- a/client/src/features/book/components/BookCoverLightbox.vue
+++ b/client/src/features/book/components/BookCoverLightbox.vue
@@ -64,7 +64,7 @@ function handleOpenChange(open: boolean) {
   <DialogRoot :open="props.open" @update:open="handleOpenChange">
     <DialogPortal>
       <DialogOverlay
-        class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:animate-none"
+        class="fixed inset-0 z-50 bg-scrim-media data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:animate-none"
       />
       <DialogContent
         class="fixed left-1/2 top-1/2 z-50 flex max-h-[90vh] max-w-[90vw] -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-3 outline-none 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 motion-reduce:animate-none"
diff --git a/client/src/features/book/components/BookQuickView.vue b/client/src/features/book/components/BookQuickView.vue
index 724e25117..4e8d04c11 100644
--- a/client/src/features/book/components/BookQuickView.vue
+++ b/client/src/features/book/components/BookQuickView.vue
@@ -456,7 +456,7 @@ function handleDelete() {
     <DialogRoot :open="coverLightboxOpen" @update:open="coverLightboxOpen = $event">
       <DialogPortal>
         <DialogOverlay
-          class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+          class="fixed inset-0 z-50 bg-scrim-media data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
         />
         <DialogContent
           class="fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 max-w-[90vw] max-h-[90vh] outline-none 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"
diff --git a/client/src/features/book/components/BulkEditMetadataDialog.vue b/client/src/features/book/components/BulkEditMetadataDialog.vue
index 34e526dc7..000dd4f1c 100644
--- a/client/src/features/book/components/BulkEditMetadataDialog.vue
+++ b/client/src/features/book/components/BulkEditMetadataDialog.vue
@@ -204,7 +204,7 @@ watch(
 <template>
   <Teleport to="body">
     <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="handleClose" />
+      <div class="absolute inset-0 bg-scrim" @click="handleClose" />
       <div class="relative z-10 w-full max-w-lg mx-4 max-h-[90vh] bg-card border border-border rounded-lg shadow-2xl flex flex-col">
         <!-- Header -->
         <div class="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
diff --git a/client/src/features/book/components/DeleteBookDialog.vue b/client/src/features/book/components/DeleteBookDialog.vue
index 364e28c77..e89307719 100644
--- a/client/src/features/book/components/DeleteBookDialog.vue
+++ b/client/src/features/book/components/DeleteBookDialog.vue
@@ -11,7 +11,7 @@ const { t } = useI18n()
 <template>
   <Teleport to="body">
     <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="emit('cancel')" />
+      <div class="absolute inset-0 bg-scrim" @click="emit('cancel')" />
       <div class="relative z-10 w-full max-w-sm mx-4 bg-card border border-border rounded-lg shadow-2xl p-6">
         <div class="flex items-start gap-4 mb-5">
           <div class="shrink-0 h-10 w-10 rounded-full bg-destructive/10 flex items-center justify-center">
diff --git a/client/src/features/book/components/KeyboardShortcutOverlay.vue b/client/src/features/book/components/KeyboardShortcutOverlay.vue
index 8ef9e1de1..056d8a642 100644
--- a/client/src/features/book/components/KeyboardShortcutOverlay.vue
+++ b/client/src/features/book/components/KeyboardShortcutOverlay.vue
@@ -47,12 +47,7 @@ const sections = computed(() => [
 <template>
   <Teleport to="body">
     <Transition name="shortcut-overlay">
-      <div
-        v-if="open"
-        class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
-        @click.self="handleClose"
-        @keydown.escape="handleClose"
-      >
+      <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center bg-scrim" @click.self="handleClose" @keydown.escape="handleClose">
         <div class="relative w-full max-w-md rounded-xl border border-border bg-card shadow-xl" role="dialog" :aria-label="t('book.shortcuts.title')">
           <div class="flex items-center justify-between border-b border-border px-5 py-3">
             <h2 class="text-sm font-semibold text-foreground">{{ t('book.shortcuts.title') }}</h2>
diff --git a/client/src/features/book/components/MetadataExportDialog.vue b/client/src/features/book/components/MetadataExportDialog.vue
index f2fd4f8f0..05aac1694 100644
--- a/client/src/features/book/components/MetadataExportDialog.vue
+++ b/client/src/features/book/components/MetadataExportDialog.vue
@@ -213,7 +213,7 @@ watch(
 <template>
   <Teleport to="body">
     <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="closeDialog" />
+      <div class="absolute inset-0 bg-scrim" @click="closeDialog" />
       <div class="relative z-10 mx-4 w-full max-w-2xl rounded-lg border border-border bg-card shadow-2xl">
         <div class="flex items-center justify-between border-b border-border px-5 py-4">
           <div class="flex items-center gap-2">
diff --git a/client/src/features/book/components/ResetReadingStateDialog.vue b/client/src/features/book/components/ResetReadingStateDialog.vue
index 7f26f825a..ee9bed590 100644
--- a/client/src/features/book/components/ResetReadingStateDialog.vue
+++ b/client/src/features/book/components/ResetReadingStateDialog.vue
@@ -29,7 +29,7 @@ function handleConfirm() {
 <template>
   <DialogRoot :open="props.open" @update:open="handleOpenChange">
     <DialogPortal>
-      <DialogOverlay class="fixed inset-0 z-50 bg-foreground/20" />
+      <DialogOverlay class="fixed inset-0 z-50 bg-scrim" />
       <DialogContent
         class="fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-card p-5 shadow-xl"
       >
diff --git a/client/src/features/book/components/detail/tabs/AddBookFileModal.vue b/client/src/features/book/components/detail/tabs/AddBookFileModal.vue
index 444c8ef71..0c35c4b55 100644
--- a/client/src/features/book/components/detail/tabs/AddBookFileModal.vue
+++ b/client/src/features/book/components/detail/tabs/AddBookFileModal.vue
@@ -125,7 +125,7 @@ function formatPillClass(filename: string): string {
 <template>
   <Teleport to="body">
     <div class="fixed inset-0 z-[70] flex items-center justify-center p-2 sm:p-4">
-      <div class="absolute inset-0 bg-black/50 backdrop-blur-[2px]" @click="handleClose" />
+      <div class="absolute inset-0 bg-scrim" @click="handleClose" />
 
       <div
         class="relative flex flex-col w-full max-w-2xl bg-background rounded-lg shadow-2xl border border-border overflow-hidden"
diff --git a/client/src/features/book/components/detail/tabs/AddSessionDialog.vue b/client/src/features/book/components/detail/tabs/AddSessionDialog.vue
index 950c9bcca..0e036c655 100644
--- a/client/src/features/book/components/detail/tabs/AddSessionDialog.vue
+++ b/client/src/features/book/components/detail/tabs/AddSessionDialog.vue
@@ -80,7 +80,7 @@ function handleSubmit() {
 <template>
   <Teleport to="body">
     <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="handleClose" />
+      <div class="absolute inset-0 bg-scrim" @click="handleClose" />
       <div class="relative z-10 w-full max-w-md mx-4 bg-card border border-border rounded-lg shadow-2xl p-6">
         <div class="flex items-center justify-between mb-5">
           <h2 class="text-base font-semibold text-foreground">{{ t('book.detail.addSession.title') }}</h2>
diff --git a/client/src/features/book/components/detail/tabs/FilesTab.vue b/client/src/features/book/components/detail/tabs/FilesTab.vue
index 72b549b0c..648a60de7 100644
--- a/client/src/features/book/components/detail/tabs/FilesTab.vue
+++ b/client/src/features/book/components/detail/tabs/FilesTab.vue
@@ -329,7 +329,7 @@ async function confirmDelete() {
 
     <!-- Rename -->
     <div v-if="renameTarget" class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4" @click.self="closeRenameModal">
-      <button class="absolute inset-0 bg-black/45" :aria-label="t('common.cancel')" @click="closeRenameModal" />
+      <button class="absolute inset-0 bg-scrim" :aria-label="t('common.cancel')" @click="closeRenameModal" />
       <div
         class="relative w-full rounded-t-lg border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5"
         role="dialog"
@@ -365,7 +365,7 @@ async function confirmDelete() {
 
     <!-- Delete -->
     <div v-if="deleteTarget" class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4" @click.self="closeDeleteModal">
-      <button class="absolute inset-0 bg-black/45" :aria-label="t('common.cancel')" @click="closeDeleteModal" />
+      <button class="absolute inset-0 bg-scrim" :aria-label="t('common.cancel')" @click="closeDeleteModal" />
       <div
         class="relative w-full rounded-t-lg border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5"
         role="dialog"
diff --git a/client/src/features/book/components/detail/tabs/MetadataDiffRow.vue b/client/src/features/book/components/detail/tabs/MetadataDiffRow.vue
index cf0137f25..303260e86 100644
--- a/client/src/features/book/components/detail/tabs/MetadataDiffRow.vue
+++ b/client/src/features/book/components/detail/tabs/MetadataDiffRow.vue
@@ -464,7 +464,7 @@ watch(
   <DialogRoot :open="lightboxSrc !== null" @update:open="handleCoverPreviewOpenChange">
     <DialogPortal>
       <DialogOverlay
-        class="fixed inset-0 z-[60] bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:animate-none"
+        class="fixed inset-0 z-[60] bg-scrim-media data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:animate-none"
       />
       <DialogContent
         :aria-describedby="undefined"
diff --git a/client/src/features/book/components/table/BookCoverDialog.vue b/client/src/features/book/components/table/BookCoverDialog.vue
index 05a770570..55e46d2f4 100644
--- a/client/src/features/book/components/table/BookCoverDialog.vue
+++ b/client/src/features/book/components/table/BookCoverDialog.vue
@@ -84,7 +84,7 @@ async function handleToggleCoverLock(field: 'cover' | 'audioCover') {
 <template>
   <DialogRoot :open="book !== null" @update:open="handleOpenChange">
     <DialogPortal>
-      <DialogOverlay class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm" />
+      <DialogOverlay class="fixed inset-0 z-50 bg-scrim" />
       <DialogContent
         class="fixed left-1/2 top-1/2 z-50 w-full max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-card shadow-xl outline-none"
         @escape-key-down="handleOpenChange(false)"
diff --git a/client/src/features/collection/components/CreateCollectionDialog.vue b/client/src/features/collection/components/CreateCollectionDialog.vue
index af2a5f841..aabb15d58 100644
--- a/client/src/features/collection/components/CreateCollectionDialog.vue
+++ b/client/src/features/collection/components/CreateCollectionDialog.vue
@@ -56,7 +56,7 @@ async function submit() {
 <template>
   <Teleport to="body">
     <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="emit('close')" />
+      <div class="absolute inset-0 bg-scrim" @click="emit('close')" />
       <div class="relative z-10 w-full max-w-md mx-4 bg-card border border-border rounded-lg shadow-2xl p-6">
         <div class="flex items-center justify-between mb-5">
           <h2 class="text-base font-semibold text-foreground">{{ dialogTitle }}</h2>
diff --git a/client/src/features/collection/components/EditCollectionDialog.vue b/client/src/features/collection/components/EditCollectionDialog.vue
index 3fd2caaa7..6a5b0e944 100644
--- a/client/src/features/collection/components/EditCollectionDialog.vue
+++ b/client/src/features/collection/components/EditCollectionDialog.vue
@@ -104,7 +104,7 @@ async function confirmDelete() {
 <template>
   <Teleport to="body">
     <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="emit('close')" />
+      <div class="absolute inset-0 bg-scrim" @click="emit('close')" />
       <div class="relative z-10 w-full max-w-md mx-4 bg-card border border-border rounded-lg shadow-2xl p-6">
         <div class="flex items-center justify-between mb-5">
           <h2 class="text-base font-semibold text-foreground">{{ t('collection.editDialog.title') }}</h2>
diff --git a/client/src/features/custom-icons/components/IconUploadDialog.vue b/client/src/features/custom-icons/components/IconUploadDialog.vue
index 38deb0537..864f8896b 100644
--- a/client/src/features/custom-icons/components/IconUploadDialog.vue
+++ b/client/src/features/custom-icons/components/IconUploadDialog.vue
@@ -182,7 +182,7 @@ function applyServerErrors(items: { filename: string; status: string; error?: st
 <template>
   <DialogRoot :open="open" @update:open="handleOpenChange">
     <DialogPortal>
-      <DialogOverlay class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm" />
+      <DialogOverlay class="fixed inset-0 z-50 bg-scrim" />
       <DialogContent
         class="fixed left-1/2 top-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-xl outline-none"
         @escape-key-down="closeDialog"
diff --git a/client/src/features/email/components/GroupsTab.vue b/client/src/features/email/components/GroupsTab.vue
index ccea852e1..79e777fab 100644
--- a/client/src/features/email/components/GroupsTab.vue
+++ b/client/src/features/email/components/GroupsTab.vue
@@ -235,7 +235,7 @@ function cancelDelete() {
     </div>
 
     <div v-if="deleteConfirm" class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4" @click.self="deleteConfirm = null">
-      <button class="absolute inset-0 bg-black/45" @click="cancelDelete" />
+      <button class="absolute inset-0 bg-scrim" @click="cancelDelete" />
       <div class="relative w-full rounded-t-xl border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5">
         <p class="text-base font-semibold text-foreground">{{ t('email.groups.deleteTitle') }}</p>
         <p class="mt-1 text-sm text-muted-foreground">{{ t('email.deleteConfirm', { name: deleteConfirm.name }) }}</p>
diff --git a/client/src/features/email/components/HistoryTab.vue b/client/src/features/email/components/HistoryTab.vue
index 246c06543..065c6c814 100644
--- a/client/src/features/email/components/HistoryTab.vue
+++ b/client/src/features/email/components/HistoryTab.vue
@@ -136,7 +136,7 @@ function cancelDelete() {
     </Button>
 
     <div v-if="deleteConfirm" class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4" @click.self="deleteConfirm = null">
-      <button class="absolute inset-0 bg-black/45" @click="cancelDelete" />
+      <button class="absolute inset-0 bg-scrim" @click="cancelDelete" />
       <div class="relative w-full rounded-t-xl border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5">
         <p class="text-base font-semibold text-foreground">{{ t('email.history.deleteTitle') }}</p>
         <p class="mt-1 text-sm text-muted-foreground line-clamp-2">{{ deleteConfirm.subject ?? t('email.history.noSubject') }}</p>
diff --git a/client/src/features/email/components/ProvidersTab.vue b/client/src/features/email/components/ProvidersTab.vue
index bc4645717..92d05d91a 100644
--- a/client/src/features/email/components/ProvidersTab.vue
+++ b/client/src/features/email/components/ProvidersTab.vue
@@ -456,7 +456,7 @@ function cancelDelete() {
     </div>
 
     <div v-if="deleteConfirm" class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4" @click.self="deleteConfirm = null">
-      <button class="absolute inset-0 bg-black/45" @click="cancelDelete" />
+      <button class="absolute inset-0 bg-scrim" @click="cancelDelete" />
       <div class="relative w-full rounded-t-xl border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5">
         <p class="text-base font-semibold text-foreground">{{ t('email.providers.deleteTitle') }}</p>
         <p class="mt-1 text-sm text-muted-foreground">{{ t('email.deleteConfirm', { name: deleteConfirm.name }) }}</p>
diff --git a/client/src/features/email/components/RecipientsTab.vue b/client/src/features/email/components/RecipientsTab.vue
index eb92d6e7b..fc33f1403 100644
--- a/client/src/features/email/components/RecipientsTab.vue
+++ b/client/src/features/email/components/RecipientsTab.vue
@@ -282,7 +282,7 @@ function cancelDelete() {
     </div>
 
     <div v-if="deleteConfirm" class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4" @click.self="deleteConfirm = null">
-      <button class="absolute inset-0 bg-black/45" @click="cancelDelete" />
+      <button class="absolute inset-0 bg-scrim" @click="cancelDelete" />
       <div class="relative w-full rounded-t-lg border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5">
         <p class="text-base font-semibold text-foreground">{{ t('email.recipients.deleteTitle') }}</p>
         <p class="mt-1 text-sm text-muted-foreground">{{ t('email.deleteConfirm', { name: deleteConfirm.name }) }}</p>
diff --git a/client/src/features/email/components/SendBookDialog.vue b/client/src/features/email/components/SendBookDialog.vue
index 934bf15b6..48087a42d 100644
--- a/client/src/features/email/components/SendBookDialog.vue
+++ b/client/src/features/email/components/SendBookDialog.vue
@@ -121,7 +121,7 @@ function close() {
   <Teleport to="body">
     <Transition name="dialog-fade">
       <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center p-4">
-        <div class="absolute inset-0 bg-black/50 backdrop-blur-[1px]" @click="close" />
+        <div class="absolute inset-0 bg-scrim" @click="close" />
 
         <div class="relative w-full max-w-md bg-background border border-border rounded-lg shadow-2xl overflow-hidden">
           <!-- Header -->
diff --git a/client/src/features/email/components/TemplatesTab.vue b/client/src/features/email/components/TemplatesTab.vue
index d9cee965a..2271350c7 100644
--- a/client/src/features/email/components/TemplatesTab.vue
+++ b/client/src/features/email/components/TemplatesTab.vue
@@ -315,7 +315,7 @@ function cancelDelete() {
     </div>
 
     <div v-if="deleteConfirm" class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4" @click.self="deleteConfirm = null">
-      <button class="absolute inset-0 bg-black/45" @click="cancelDelete" />
+      <button class="absolute inset-0 bg-scrim" @click="cancelDelete" />
       <div class="relative w-full rounded-t-xl border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5">
         <p class="text-base font-semibold text-foreground">{{ t('email.templates.deleteTitle') }}</p>
         <p class="mt-1 text-sm text-muted-foreground">{{ t('email.deleteConfirm', { name: deleteConfirm.name }) }}</p>
diff --git a/client/src/features/email/components/__tests__/SendBookDialog.spec.ts b/client/src/features/email/components/__tests__/SendBookDialog.spec.ts
index cb8cd4ae2..defc01d37 100644
--- a/client/src/features/email/components/__tests__/SendBookDialog.spec.ts
+++ b/client/src/features/email/components/__tests__/SendBookDialog.spec.ts
@@ -231,7 +231,7 @@ describe('SendBookDialog', () => {
 
   it('emits close when the backdrop is clicked', async () => {
     const wrapper = mountDialog()
-    await wrapper.find('.absolute.inset-0.bg-black\\/50').trigger('click')
+    await wrapper.find('.absolute.inset-0.bg-scrim').trigger('click')
     expect(wrapper.emitted('update:open')).toEqual([[false]])
   })
 
diff --git a/client/src/features/hardcover/components/HardcoverImportReviewModal.vue b/client/src/features/hardcover/components/HardcoverImportReviewModal.vue
index 0544fda27..d6e219d1a 100644
--- a/client/src/features/hardcover/components/HardcoverImportReviewModal.vue
+++ b/client/src/features/hardcover/components/HardcoverImportReviewModal.vue
@@ -267,7 +267,7 @@ function normalizeSearch(value: string): string {
 
 <template>
   <Teleport to="body">
-    <div class="fixed inset-0 z-[70] flex items-end justify-center bg-foreground/35 px-2 py-3 md:items-center md:px-6" @click.self="handleClose">
+    <div class="fixed inset-0 z-[70] flex items-end justify-center bg-scrim px-2 py-3 md:items-center md:px-6" @click.self="handleClose">
       <section
         ref="dialogRef"
         class="flex max-h-[92vh] w-full max-w-6xl flex-col rounded-lg border border-border bg-background shadow-xl outline-none"
diff --git a/client/src/features/library/components/BookUploadModal.vue b/client/src/features/library/components/BookUploadModal.vue
index 5add0939e..ad23f2281 100644
--- a/client/src/features/library/components/BookUploadModal.vue
+++ b/client/src/features/library/components/BookUploadModal.vue
@@ -185,7 +185,7 @@ function formatPillClass(filename: string): string {
 <template>
   <Teleport to="body">
     <div class="fixed inset-0 z-[70] flex items-center justify-center p-2 sm:p-4">
-      <div class="absolute inset-0 bg-black/50 backdrop-blur-[2px]" @click="handleClose" />
+      <div class="absolute inset-0 bg-scrim" @click="handleClose" />
 
       <div
         class="relative flex flex-col w-full max-w-2xl bg-background rounded-lg shadow-2xl border border-border overflow-hidden"
diff --git a/client/src/features/library/components/FolderPickerModal.vue b/client/src/features/library/components/FolderPickerModal.vue
index 403e4c272..038bd4f1c 100644
--- a/client/src/features/library/components/FolderPickerModal.vue
+++ b/client/src/features/library/components/FolderPickerModal.vue
@@ -80,11 +80,7 @@ useModal({
 
 <template>
   <Teleport to="body">
-    <div
-      class="fixed inset-0 z-[80] flex items-end justify-center bg-foreground/30 sm:items-center sm:p-4"
-      role="presentation"
-      @click.self="requestClose"
-    >
+    <div class="fixed inset-0 z-[80] flex items-end justify-center bg-scrim sm:items-center sm:p-4" role="presentation" @click.self="requestClose">
       <div
         ref="panel"
         class="flex h-dvh w-full flex-col overflow-hidden bg-background shadow-2xl outline-none sm:h-[min(82dvh,700px)] sm:max-w-xl sm:rounded-lg sm:border sm:border-border"
diff --git a/client/src/features/library/components/LibraryCreatorModal.vue b/client/src/features/library/components/LibraryCreatorModal.vue
index 3b38e811a..670226ed8 100644
--- a/client/src/features/library/components/LibraryCreatorModal.vue
+++ b/client/src/features/library/components/LibraryCreatorModal.vue
@@ -566,7 +566,7 @@ onMounted(async () => {
 
 <template>
   <Teleport to="body">
-    <div class="fixed inset-0 z-70 bg-foreground/25 motion-safe:animate-in motion-safe:fade-in-0" role="presentation" @click.self="requestClose">
+    <div class="fixed inset-0 z-70 bg-scrim motion-safe:animate-in motion-safe:fade-in-0" role="presentation" @click.self="requestClose">
       <div
         ref="panel"
         class="fixed inset-y-0 end-0 flex w-full flex-col bg-background shadow-2xl outline-none sm:max-w-[56rem] sm:border-s sm:border-border motion-safe:animate-in motion-safe:duration-300 ltr:motion-safe:slide-in-from-right rtl:motion-safe:slide-in-from-left"
diff --git a/client/src/features/migration/components/MigrationModal.vue b/client/src/features/migration/components/MigrationModal.vue
index e4fe61e7e..38e2275ce 100644
--- a/client/src/features/migration/components/MigrationModal.vue
+++ b/client/src/features/migration/components/MigrationModal.vue
@@ -1307,7 +1307,7 @@ const sourceTypeCompatibility = computed<SourceTypeCompatibility | null>(() => {
 <template>
   <Teleport to="body">
     <div class="fixed inset-0 z-[70] flex items-center justify-center p-4">
-      <div class="absolute inset-0 bg-black/50 backdrop-blur-[2px]" @click="handleClose" />
+      <div class="absolute inset-0 bg-scrim" @click="handleClose" />
 
       <div
         class="relative flex flex-col w-full max-w-5xl bg-background rounded-lg shadow-2xl overflow-hidden border border-border"
diff --git a/client/src/features/reader/audiobook/AudiobookReaderView.vue b/client/src/features/reader/audiobook/AudiobookReaderView.vue
index e7de0407c..8e87c1780 100644
--- a/client/src/features/reader/audiobook/AudiobookReaderView.vue
+++ b/client/src/features/reader/audiobook/AudiobookReaderView.vue
@@ -1190,7 +1190,7 @@ onMounted(async () => {
 
       <!-- Chapter sheet backdrop -->
       <Transition name="fade">
-        <div v-if="showChapters" class="absolute inset-0 z-20 bg-black/40" @click="showChapters = false" />
+        <div v-if="showChapters" class="absolute inset-0 z-20 bg-scrim" @click="showChapters = false" />
       </Transition>
 
       <!-- Chapter / Bookmarks sheet (slide up) -->
@@ -1272,7 +1272,7 @@ onMounted(async () => {
 
       <!-- Settings sheet backdrop -->
       <Transition name="fade">
-        <div v-if="showSettings" class="absolute inset-0 z-20 bg-black/40" @click="showSettings = false" />
+        <div v-if="showSettings" class="absolute inset-0 z-20 bg-scrim" @click="showSettings = false" />
       </Transition>
 
       <!-- Settings sheet (slide up) -->
diff --git a/client/src/features/reader/epub/components/KeyboardShortcutsModal.vue b/client/src/features/reader/epub/components/KeyboardShortcutsModal.vue
index a8a9f0c3a..be9beb6a0 100644
--- a/client/src/features/reader/epub/components/KeyboardShortcutsModal.vue
+++ b/client/src/features/reader/epub/components/KeyboardShortcutsModal.vue
@@ -63,7 +63,7 @@ onUnmounted(() => document.removeEventListener('keydown', onKeyDown, true))
 </script>
 
 <template>
-  <div data-backdrop class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 px-4 backdrop-blur-sm" @click="handleBackdropClick">
+  <div data-backdrop class="fixed inset-0 z-[60] flex items-center justify-center bg-scrim px-4" @click="handleBackdropClick">
     <div class="w-full max-w-md rounded-xl border border-border/80 bg-card shadow-2xl">
       <div class="flex items-center justify-between border-b border-border/80 bg-gradient-to-br from-muted/75 via-card to-muted/40 px-4 py-3">
         <div class="inline-flex items-center gap-2">
diff --git a/client/src/features/reader/pdf-v4/components/PdfReaderContent.vue b/client/src/features/reader/pdf-v4/components/PdfReaderContent.vue
index 8ad1d702f..f2ffd0b55 100644
--- a/client/src/features/reader/pdf-v4/components/PdfReaderContent.vue
+++ b/client/src/features/reader/pdf-v4/components/PdfReaderContent.vue
@@ -548,7 +548,7 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <div v-if="pendingExternalUrl" class="fixed inset-0 z-[70] flex items-center justify-center bg-background/70 p-4 backdrop-blur-sm">
+    <div v-if="pendingExternalUrl" class="fixed inset-0 z-[70] flex items-center justify-center bg-scrim p-4">
       <div class="w-full max-w-md rounded-xl border border-border bg-card p-5 text-card-foreground shadow-2xl">
         <div class="mb-4 flex items-start gap-3">
           <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary"><ExternalLink :size="18" /></div>
diff --git a/client/src/features/reader/shared/components/NoteDialog.vue b/client/src/features/reader/shared/components/NoteDialog.vue
index d08b49885..2a3c56350 100644
--- a/client/src/features/reader/shared/components/NoteDialog.vue
+++ b/client/src/features/reader/shared/components/NoteDialog.vue
@@ -33,7 +33,7 @@ function handleSave() {
 
 <template>
   <Teleport to="body">
-    <div class="fixed inset-0 z-[70] flex items-center justify-center bg-foreground/35 p-4" @click.self="handleBackdropClick">
+    <div class="fixed inset-0 z-[70] flex items-center justify-center bg-scrim p-4" @click.self="handleBackdropClick">
       <div class="bg-card text-card-foreground rounded-lg shadow-2xl p-4 w-full max-w-sm flex flex-col gap-3">
         <p class="text-sm font-medium">{{ t('reader.note.title') }}</p>
         <p class="text-xs text-muted-foreground line-clamp-2 italic">"{{ selectedText }}"</p>
diff --git a/client/src/features/settings/KoreaderCredentialsDialog.vue b/client/src/features/settings/KoreaderCredentialsDialog.vue
index 30ebbe001..a7453ba38 100644
--- a/client/src/features/settings/KoreaderCredentialsDialog.vue
+++ b/client/src/features/settings/KoreaderCredentialsDialog.vue
@@ -66,7 +66,7 @@ function handleSubmit(): void {
 <template>
   <DialogRoot :open="props.open" @update:open="handleOpenChange">
     <DialogPortal>
-      <DialogOverlay class="fixed inset-0 z-50 bg-foreground/50" />
+      <DialogOverlay class="fixed inset-0 z-50 bg-scrim" />
       <DialogContent
         aria-modal="true"
         class="fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-card p-6 shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
diff --git a/client/src/features/settings/KoreaderSettings.vue b/client/src/features/settings/KoreaderSettings.vue
index 69ee56cb5..42093cf01 100644
--- a/client/src/features/settings/KoreaderSettings.vue
+++ b/client/src/features/settings/KoreaderSettings.vue
@@ -1438,7 +1438,7 @@ async function handleDownloadPlugin() {
         class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4"
         @click.self="handleCloseDeleteConfirm"
       >
-        <button class="absolute inset-0 bg-black/45" @click="handleCloseDeleteConfirm" />
+        <button class="absolute inset-0 bg-scrim" @click="handleCloseDeleteConfirm" />
         <div class="relative w-full rounded-t-lg border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5">
           <p class="text-base font-semibold text-foreground">
             {{ t('settings.reader.koreader.deleteConfirmTitle') }}
@@ -1462,7 +1462,7 @@ async function handleDownloadPlugin() {
         class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4"
         @click.self="handleCloseUnlink"
       >
-        <button class="absolute inset-0 bg-black/45" @click="handleCloseUnlink" />
+        <button class="absolute inset-0 bg-scrim" @click="handleCloseUnlink" />
         <div class="relative w-full rounded-t-lg border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5">
           <p class="text-base font-semibold text-foreground">
             {{ t('settings.reader.koreader.hashLinks.unlinkConfirmTitle') }}
@@ -1502,7 +1502,7 @@ async function handleDownloadPlugin() {
         class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4"
         @click.self="handleCloseRemoveDevice"
       >
-        <button class="absolute inset-0 bg-black/45" @click="handleCloseRemoveDevice" />
+        <button class="absolute inset-0 bg-scrim" @click="handleCloseRemoveDevice" />
         <div class="relative w-full rounded-t-lg border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5">
           <p class="text-base font-semibold text-foreground">
             {{
@@ -1534,7 +1534,7 @@ async function handleDownloadPlugin() {
         class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4"
         @click.self="handleCloseDismiss"
       >
-        <button class="absolute inset-0 bg-black/45" @click="handleCloseDismiss" />
+        <button class="absolute inset-0 bg-scrim" @click="handleCloseDismiss" />
         <div class="relative w-full rounded-t-lg border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5">
           <p class="text-base font-semibold text-foreground">
             {{
@@ -1571,7 +1571,7 @@ async function handleDownloadPlugin() {
         class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4"
         @click.self="handleCloseDismissAll"
       >
-        <button class="absolute inset-0 bg-black/45" @click="handleCloseDismissAll" />
+        <button class="absolute inset-0 bg-scrim" @click="handleCloseDismissAll" />
         <div class="relative w-full rounded-t-lg border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5">
           <p class="text-base font-semibold text-foreground">
             {{
@@ -1603,7 +1603,7 @@ async function handleDownloadPlugin() {
         @click.self="handleCloseLink"
         @keydown.esc="handleCloseLink"
       >
-        <button class="absolute inset-0 bg-black/45" @click="handleCloseLink" />
+        <button class="absolute inset-0 bg-scrim" @click="handleCloseLink" />
         <div class="relative w-full rounded-t-lg border border-border bg-card p-4 shadow-xl md:max-w-2xl md:rounded-lg md:p-5">
           <div class="flex items-start justify-between gap-3">
             <div class="min-w-0">
diff --git a/client/src/features/settings/MagicLinksSettings.vue b/client/src/features/settings/MagicLinksSettings.vue
index f39f2a678..0cc59483d 100644
--- a/client/src/features/settings/MagicLinksSettings.vue
+++ b/client/src/features/settings/MagicLinksSettings.vue
@@ -196,7 +196,7 @@ function isExpired(expiresAt: string | null | undefined): boolean {
 
   <DialogRoot :open="showCreateForm" @update:open="handleCreateOpenChange">
     <DialogPortal>
-      <DialogOverlay class="fixed inset-0 z-50 bg-foreground/50" />
+      <DialogOverlay class="fixed inset-0 z-50 bg-scrim" />
       <DialogContent
         aria-modal="true"
         class="fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-card p-6 shadow-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
diff --git a/client/src/features/settings/OpdsSettings.vue b/client/src/features/settings/OpdsSettings.vue
index 6eb906dcf..9be7b5b34 100644
--- a/client/src/features/settings/OpdsSettings.vue
+++ b/client/src/features/settings/OpdsSettings.vue
@@ -401,7 +401,7 @@ function cancelDelete() {
       class="fixed inset-0 z-[70] flex items-end justify-center md:items-center md:px-4"
       @click.self="deleteConfirmUser = null"
     >
-      <button class="absolute inset-0 bg-black/45" @click="cancelDelete" />
+      <button class="absolute inset-0 bg-scrim" @click="cancelDelete" />
       <div class="relative w-full rounded-t-lg border border-border bg-card p-4 shadow-xl md:max-w-md md:rounded-lg md:p-5">
         <p class="text-base font-semibold text-foreground">
           {{ t('settings.reader.opds.deleteConfirmTitle') }}
diff --git a/client/src/features/settings/metadata-preferences/CustomMetadataSettings.vue b/client/src/features/settings/metadata-preferences/CustomMetadataSettings.vue
index f46258457..7009f03bf 100644
--- a/client/src/features/settings/metadata-preferences/CustomMetadataSettings.vue
+++ b/client/src/features/settings/metadata-preferences/CustomMetadataSettings.vue
@@ -434,7 +434,7 @@ onMounted(() => {
   </div>
 
   <Teleport to="body">
-    <div v-if="deleteConfirmField" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" @click.self="cancelDeleteConfirm">
+    <div v-if="deleteConfirmField" class="fixed inset-0 z-50 flex items-center justify-center bg-scrim p-4" @click.self="cancelDeleteConfirm">
       <div class="w-full max-w-md rounded-xl border border-border bg-card shadow-xl">
         <div class="p-5 border-b border-border flex items-start gap-3">
           <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-destructive/10 text-destructive">
diff --git a/client/src/features/smart-scope/components/CreateSmartScopeDialog.vue b/client/src/features/smart-scope/components/CreateSmartScopeDialog.vue
index df74cd839..e757330a8 100644
--- a/client/src/features/smart-scope/components/CreateSmartScopeDialog.vue
+++ b/client/src/features/smart-scope/components/CreateSmartScopeDialog.vue
@@ -75,7 +75,7 @@ async function submit() {
 <template>
   <Teleport to="body">
     <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="emit('close')" />
+      <div class="absolute inset-0 bg-scrim" @click="emit('close')" />
       <div class="relative z-10 w-full max-w-md mx-4 bg-card border border-border rounded-lg shadow-2xl p-6">
         <div class="flex items-center justify-between mb-5">
           <h2 class="text-base font-semibold text-foreground">{{ dialogTitle }}</h2>
diff --git a/client/src/features/smart-scope/components/SaveAsSmartScopeDialog.vue b/client/src/features/smart-scope/components/SaveAsSmartScopeDialog.vue
index df7fff52b..ed3d3f14b 100644
--- a/client/src/features/smart-scope/components/SaveAsSmartScopeDialog.vue
+++ b/client/src/features/smart-scope/components/SaveAsSmartScopeDialog.vue
@@ -59,7 +59,7 @@ async function submit() {
 <template>
   <Teleport to="body">
     <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="emit('close')" />
+      <div class="absolute inset-0 bg-scrim" @click="emit('close')" />
       <div class="relative z-10 w-full max-w-md mx-4 bg-card border border-border rounded-lg shadow-2xl p-6">
         <div class="flex items-center justify-between mb-5">
           <h2 class="text-base font-semibold text-foreground">{{ t('smartScope.saveAsDialog.title') }}</h2>
diff --git a/client/src/features/smart-scope/components/SmartScopeEditorPanel.vue b/client/src/features/smart-scope/components/SmartScopeEditorPanel.vue
index 6164ee5dd..2c6c9f549 100644
--- a/client/src/features/smart-scope/components/SmartScopeEditorPanel.vue
+++ b/client/src/features/smart-scope/components/SmartScopeEditorPanel.vue
@@ -161,7 +161,7 @@ async function save() {
 <template>
   <Teleport to="body">
     <Transition name="smartScope-fade">
-      <div v-if="open" class="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm" @click="emit('close')" />
+      <div v-if="open" class="fixed inset-0 z-40 bg-scrim" @click="emit('close')" />
     </Transition>
 
     <Transition name="smartScope-slide">
diff --git a/client/src/features/tools/bulk-rename/components/BulkRenameConfirmDialog.vue b/client/src/features/tools/bulk-rename/components/BulkRenameConfirmDialog.vue
index d01c08f19..7bed05648 100644
--- a/client/src/features/tools/bulk-rename/components/BulkRenameConfirmDialog.vue
+++ b/client/src/features/tools/bulk-rename/components/BulkRenameConfirmDialog.vue
@@ -39,7 +39,7 @@ function handleCancel(): void {
 <template>
   <DialogRoot :open="props.open" @update:open="handleOpenChange">
     <DialogPortal>
-      <DialogOverlay class="fixed inset-0 z-50 bg-foreground/50 backdrop-blur-[2px]" />
+      <DialogOverlay class="fixed inset-0 z-50 bg-scrim" />
       <DialogContent
         class="fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-popover p-5 shadow-2xl focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
       >
diff --git a/client/src/features/tools/bulk-rename/components/BulkRenameRunDialog.vue b/client/src/features/tools/bulk-rename/components/BulkRenameRunDialog.vue
index 1a806574a..731b63982 100644
--- a/client/src/features/tools/bulk-rename/components/BulkRenameRunDialog.vue
+++ b/client/src/features/tools/bulk-rename/components/BulkRenameRunDialog.vue
@@ -41,7 +41,7 @@ function preventDismiss(event: Event): void {
 <template>
   <DialogRoot :open="props.open">
     <DialogPortal>
-      <DialogOverlay class="fixed inset-0 z-50 bg-foreground/50 backdrop-blur-[2px]" />
+      <DialogOverlay class="fixed inset-0 z-50 bg-scrim" />
       <DialogContent
         class="fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-popover p-5 shadow-2xl focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
         @escape-key-down="preventDismiss"
diff --git a/client/src/features/tools/entity-manager/components/BrowseMergeModal.vue b/client/src/features/tools/entity-manager/components/BrowseMergeModal.vue
index bb2be99d1..664313ff9 100644
--- a/client/src/features/tools/entity-manager/components/BrowseMergeModal.vue
+++ b/client/src/features/tools/entity-manager/components/BrowseMergeModal.vue
@@ -36,7 +36,7 @@ function handleCancel(): void {
 </script>
 
 <template>
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click.self="handleCancel">
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-scrim" @click.self="handleCancel">
     <div class="bg-card border border-border rounded-lg shadow-lg w-full max-w-lg mx-4 overflow-hidden flex flex-col h-150 max-h-[85vh]">
       <div class="flex items-center justify-between px-5 py-4 border-b border-border shrink-0">
         <h3 class="text-base font-semibold flex items-center gap-2">
diff --git a/client/src/features/tools/entity-manager/components/BulkDeleteModal.vue b/client/src/features/tools/entity-manager/components/BulkDeleteModal.vue
index d0311f7aa..99fa14655 100644
--- a/client/src/features/tools/entity-manager/components/BulkDeleteModal.vue
+++ b/client/src/features/tools/entity-manager/components/BulkDeleteModal.vue
@@ -32,7 +32,7 @@ function handleCancel(): void {
 </script>
 
 <template>
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click.self="handleCancel">
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-scrim" @click.self="handleCancel">
     <div class="bg-card border border-border rounded-lg shadow-lg w-full max-w-md mx-4 overflow-hidden">
       <div class="flex items-center justify-between px-5 py-4 border-b border-border">
         <h3 class="text-base font-semibold text-destructive flex items-center gap-2">
diff --git a/client/src/features/tools/entity-manager/components/DeleteModal.vue b/client/src/features/tools/entity-manager/components/DeleteModal.vue
index ae01526b2..483042f98 100644
--- a/client/src/features/tools/entity-manager/components/DeleteModal.vue
+++ b/client/src/features/tools/entity-manager/components/DeleteModal.vue
@@ -31,7 +31,7 @@ function handleCancel(): void {
 </script>
 
 <template>
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click.self="handleCancel">
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-scrim" @click.self="handleCancel">
     <div class="bg-card border border-border rounded-lg shadow-lg w-full max-w-md mx-4 overflow-hidden">
       <div class="flex items-center justify-between px-5 py-4 border-b border-border">
         <h3 class="text-base font-semibold text-destructive flex items-center gap-2">
diff --git a/client/src/features/tools/entity-manager/components/RenameModal.vue b/client/src/features/tools/entity-manager/components/RenameModal.vue
index 32b7b9c27..b156675de 100644
--- a/client/src/features/tools/entity-manager/components/RenameModal.vue
+++ b/client/src/features/tools/entity-manager/components/RenameModal.vue
@@ -31,7 +31,7 @@ function handleCancel(): void {
 </script>
 
 <template>
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click.self="handleCancel">
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-scrim" @click.self="handleCancel">
     <div class="bg-card border border-border rounded-lg shadow-lg w-full max-w-md mx-4 overflow-hidden">
       <div class="flex items-center justify-between px-5 py-4 border-b border-border">
         <h3 class="text-base font-semibold">{{ t('tools.entityManager.renameModal.title') }}</h3>
diff --git a/client/src/features/tools/entity-manager/components/SplitModal.vue b/client/src/features/tools/entity-manager/components/SplitModal.vue
index e63b9ac86..4b48b0a73 100644
--- a/client/src/features/tools/entity-manager/components/SplitModal.vue
+++ b/client/src/features/tools/entity-manager/components/SplitModal.vue
@@ -49,7 +49,7 @@ function isValid(): boolean {
 </script>
 
 <template>
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click.self="handleCancel">
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-scrim" @click.self="handleCancel">
     <div class="bg-card border border-border rounded-lg shadow-lg w-full max-w-md mx-4 overflow-hidden">
       <div class="flex items-center justify-between px-5 py-4 border-b border-border">
         <h3 class="text-base font-semibold">{{ t('tools.entityManager.splitModal.title') }}</h3>
diff --git a/client/src/features/tts/TtsOpenAiVoiceCuration.vue b/client/src/features/tts/TtsOpenAiVoiceCuration.vue
index a7afd0721..3312c9830 100644
--- a/client/src/features/tts/TtsOpenAiVoiceCuration.vue
+++ b/client/src/features/tts/TtsOpenAiVoiceCuration.vue
@@ -200,7 +200,7 @@ function handleClose() {
 </script>
 
 <template>
-  <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
+  <div class="fixed inset-0 bg-scrim z-50 flex items-center justify-center p-4">
     <div class="bg-card border border-border rounded-xl w-full max-w-2xl max-h-[90vh] flex flex-col shadow-xl">
       <!-- Header -->
       <div class="flex items-center justify-between p-5 border-b border-border flex-shrink-0">
diff --git a/client/src/features/whats-new/WhatsNewDialog.vue b/client/src/features/whats-new/WhatsNewDialog.vue
index def244149..ca6ca7d1b 100644
--- a/client/src/features/whats-new/WhatsNewDialog.vue
+++ b/client/src/features/whats-new/WhatsNewDialog.vue
@@ -45,7 +45,7 @@ useModal({
 <template>
   <Teleport to="body">
     <div
-      class="fixed inset-0 z-[75] flex items-end justify-center bg-black/50 motion-safe:animate-in motion-safe:fade-in sm:items-center sm:px-4"
+      class="fixed inset-0 z-[75] flex items-end justify-center bg-scrim motion-safe:animate-in motion-safe:fade-in sm:items-center sm:px-4"
       role="dialog"
       aria-modal="true"
       aria-labelledby="whats-new-title"
diff --git a/client/src/features/whats-new/components/ImageLightbox.vue b/client/src/features/whats-new/components/ImageLightbox.vue
index 997e291d9..a5d4ea725 100644
--- a/client/src/features/whats-new/components/ImageLightbox.vue
+++ b/client/src/features/whats-new/components/ImageLightbox.vue
@@ -50,7 +50,7 @@ onUnmounted(() => {
   <Teleport to="body">
     <div
       ref="panel"
-      class="fixed inset-0 z-[90] flex items-center justify-center bg-black/80 p-4 motion-safe:animate-in motion-safe:fade-in"
+      class="fixed inset-0 z-[90] flex items-center justify-center bg-scrim-media p-4 motion-safe:animate-in motion-safe:fade-in"
       role="dialog"
       aria-modal="true"
       :aria-label="t('whatsNew.imageViewer')"