fix: make dark overlay darker

src/components/composer/composer-dialog.tsx

···
 		}
 
 		return (
-			<div class="pointer-events-none fixed inset-0 z-1 flex items-center justify-center bg-contrast-overlay/40">
+			<div class="pointer-events-none fixed inset-0 z-1 flex items-center justify-center bg-contrast-overlay/75">
 				<div class="rounded-lg bg-background p-2">
 					<p class="rounded border-2 border-dashed border-outline px-9 py-11">Drop to add images</p>
 				</div>

src/components/dialog.tsx

···
 import CrossLargeOutlinedIcon from './icons-central/cross-large-outline';
 
 const DialogBackdrop = () => {
-	return <div class="fixed inset-0 z-0 bg-contrast-overlay/40"></div>;
+	return <div class="fixed inset-0 z-0 bg-contrast-overlay/75"></div>;
 };
 
 export { DialogBackdrop as Backdrop };

src/components/main/modal-renderer.tsx

···
 	return (
 		<>
 			{/* <Dialog.Backdrop> */}
-			<div class="fixed inset-0 z-0 bg-contrast-overlay/40"></div>
+			<div class="fixed inset-0 z-0 bg-contrast-overlay/75"></div>
 			<div class="grid grow place-items-center">
 				{/* <CircularProgress> */}
 				<svg viewBox="0 0 32 32" class="animate-spin" style="height:24px;width:24px">

src/components/menu.tsx

···
 							});
 						}
 					}}
-					class="flex grow snap-y snap-mandatory flex-col-reverse items-center self-stretch overflow-y-auto overscroll-none bg-contrast-overlay/40 scrollbar-hide"
+					class="flex grow snap-y snap-mandatory flex-col-reverse items-center self-stretch overflow-y-auto overscroll-none bg-contrast-overlay/75 scrollbar-hide"
 				>
 					<div class="relative max-h-[60svh] w-[540px] max-w-full shrink-0 grow">
 						<div class="pointer-events-none absolute inset-0 z-10 flex flex-col justify-between">

src/components/prompt.tsx

···
 		} else {
 			return (
 				<Fieldset standalone disabled={isDisabled()}>
-					<div class="flex grow flex-col items-center self-stretch overflow-y-auto bg-contrast-overlay/40">
+					<div class="flex grow flex-col items-center self-stretch overflow-y-auto bg-contrast-overlay/75">
 						<div class="h-[40dvh] shrink-0"></div>
 						<div
 							ref={containerRef}

src/styles/app.css

···
 		--p-contrast: 255 255 255;
 		--p-contrast-hinted: 244 244 244;
 		--p-contrast-muted: 123 123 123;
-		--p-contrast-overlay: 98 110 127;
+		--p-contrast-overlay: 33 34 41;
 		--p-outline: 54 54 54;
 		--p-outline-md: 57 57 57;
 		--p-outline-lg: 113 113 113;

src/views/bluemoji-emotes.tsx

···
 		}
 
 		return (
-			<div class="pointer-events-none fixed inset-0 z-[3] flex items-center justify-center bg-contrast-overlay/40">
+			<div class="pointer-events-none fixed inset-0 z-[3] flex items-center justify-center bg-contrast-overlay/75">
 				<div class="rounded-lg bg-background p-2">
 					<p class="rounded border-2 border-dashed border-outline px-9 py-11">Drop to add emote</p>
 				</div>