From 1dd389563c159d9ac82f4583ba44ccb9941ca90c Mon Sep 17 00:00:00 2001
From: neon <18559658+neonsolstice@users.noreply.github.com>
Date: Tue, 29 Sep 2026 03:42:01 +0000
Subject: [PATCH] style(client): unify modal backdrops with dedicated scrim
 tokens

Replace tinted modal veils with dedicated scrim tokens so dialogs, sheets, and image lightboxes dim consistently in both light and dark themes. Enforce scrim token usage in style validation to prevent backdrops that wash out in dark mode.
---
 client/scripts/validate-styles.mjs            | 26 ++++++++++++++++++-
 client/src/assets/theme/bridge.css            |  2 ++
 client/src/assets/theme/tokens.css            | 10 +++++++
 client/src/components/legal/LegalNotices.vue  |  2 +-
 client/src/components/ui/ConfirmDialog.vue    |  2 +-
 .../ui/__tests__/ConfirmDialog.spec.ts        |  2 +-
 .../src/components/ui/sheet/SheetOverlay.vue  |  2 +-
 client/src/features/admin/ResetLinkModal.vue  |  2 +-
 .../features/auth/ChangePasswordDialog.vue    |  2 +-
 .../author/components/AuthorConfirmDialog.vue |  2 +-
 .../author/components/AuthorHeader.vue        |  2 +-
 .../components/BookDockBulkEditDialog.vue     |  2 +-
 .../components/BookDockCoverPeek.vue          |  2 +-
 .../components/BookDockFileSheet.vue          |  2 +-
 .../components/BookDockFinalizeDialog.vue     |  2 +-
 .../BookDockSetDestinationDialog.vue          |  2 +-
 .../AuthorEnrichmentReportModal.vue           |  2 +-
 .../BookMetadataFetchReportModal.vue          |  2 +-
 .../components/GrabReleaseDialog.vue          |  2 +-
 .../book/components/BookCoverLightbox.vue     |  2 +-
 .../book/components/BookQuickView.vue         |  2 +-
 .../components/BulkEditMetadataDialog.vue     |  2 +-
 .../book/components/DeleteBookDialog.vue      |  2 +-
 .../components/KeyboardShortcutOverlay.vue    |  7 +----
 .../book/components/MetadataExportDialog.vue  |  2 +-
 .../components/ResetReadingStateDialog.vue    |  2 +-
 .../detail/tabs/AddBookFileModal.vue          |  2 +-
 .../detail/tabs/AddSessionDialog.vue          |  2 +-
 .../book/components/detail/tabs/FilesTab.vue  |  4 +--
 .../detail/tabs/MetadataDiffRow.vue           |  2 +-
 .../book/components/table/BookCoverDialog.vue |  2 +-
 .../components/CreateCollectionDialog.vue     |  2 +-
 .../components/EditCollectionDialog.vue       |  2 +-
 .../components/IconUploadDialog.vue           |  2 +-
 .../features/email/components/GroupsTab.vue   |  2 +-
 .../features/email/components/HistoryTab.vue  |  2 +-
 .../email/components/ProvidersTab.vue         |  2 +-
 .../email/components/RecipientsTab.vue        |  2 +-
 .../email/components/SendBookDialog.vue       |  2 +-
 .../email/components/TemplatesTab.vue         |  2 +-
 .../__tests__/SendBookDialog.spec.ts          |  2 +-
 .../components/HardcoverImportReviewModal.vue |  2 +-
 .../library/components/BookUploadModal.vue    |  2 +-
 .../library/components/FolderPickerModal.vue  |  6 +----
 .../components/LibraryCreatorModal.vue        |  2 +-
 .../migration/components/MigrationModal.vue   |  2 +-
 .../reader/audiobook/AudiobookReaderView.vue  |  4 +--
 .../components/KeyboardShortcutsModal.vue     |  2 +-
 .../pdf-v4/components/PdfReaderContent.vue    |  2 +-
 .../reader/shared/components/NoteDialog.vue   |  2 +-
 .../settings/KoreaderCredentialsDialog.vue    |  2 +-
 .../features/settings/KoreaderSettings.vue    | 12 ++++-----
 .../features/settings/MagicLinksSettings.vue  |  2 +-
 client/src/features/settings/OpdsSettings.vue |  2 +-
 .../CustomMetadataSettings.vue                |  2 +-
 .../components/CreateSmartScopeDialog.vue     |  2 +-
 .../components/SaveAsSmartScopeDialog.vue     |  2 +-
 .../components/SmartScopeEditorPanel.vue      |  2 +-
 .../components/BulkRenameConfirmDialog.vue    |  2 +-
 .../components/BulkRenameRunDialog.vue        |  2 +-
 .../components/BrowseMergeModal.vue           |  2 +-
 .../components/BulkDeleteModal.vue            |  2 +-
 .../entity-manager/components/DeleteModal.vue |  2 +-
 .../entity-manager/components/RenameModal.vue |  2 +-
 .../entity-manager/components/SplitModal.vue  |  2 +-
 .../features/tts/TtsOpenAiVoiceCuration.vue   |  2 +-
 .../src/features/whats-new/WhatsNewDialog.vue |  2 +-
 .../whats-new/components/ImageLightbox.vue    |  2 +-
 68 files changed, 109 insertions(+), 82 deletions(-)

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')"