refactor(theming): replace gray-* with dark-* tokens on blocking screens

Map text/bg/border-gray-N → dark-N across the four blocking screens (Maintenance,
Blacklisted, ChannelSubscription, AccountDeleted) so muted text + decorative surfaces
follow the design tokens. BroadcastPreview's email mockup and MessageMediaGrid's
fullscreen overlay intentionally keep their literal gray/white (mock chrome).

src/components/blocking/AccountDeletedScreen.tsx

@@ -76,7 +76,7 @@ export default function AccountDeletedScreen() {
           {t('blocking.accountDeleted.title')}
         </h1>
 
-        <p className="mb-6 text-lg text-gray-400">{t('blocking.accountDeleted.description')}</p>
+        <p className="mb-6 text-lg text-dark-400">{t('blocking.accountDeleted.description')}</p>
 
         <div className="space-y-3">
           {deepLink && (
@@ -91,13 +91,13 @@ export default function AccountDeletedScreen() {
           <button
             type="button"
             onClick={handleRetry}
-            className="block w-full rounded-xl bg-dark-800 px-6 py-3 text-base font-medium text-gray-200 transition-colors hover:bg-dark-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-dark-950"
+            className="block w-full rounded-xl bg-dark-800 px-6 py-3 text-base font-medium text-dark-200 transition-colors hover:bg-dark-700 focus:outline-none focus:ring-2 focus:ring-dark-400 focus:ring-offset-2 focus:ring-offset-dark-950"
           >
             {t('blocking.accountDeleted.retry')}
           </button>
         </div>
 
-        <p className="mt-8 text-sm text-gray-500">{t('blocking.accountDeleted.hint')}</p>
+        <p className="mt-8 text-sm text-dark-500">{t('blocking.accountDeleted.hint')}</p>
       </div>
     </div>
   );

src/components/blocking/BlacklistedScreen.tsx

@@ -42,17 +42,17 @@ export default function BlacklistedScreen() {
         </h1>
 
         {/* Message */}
-        <p className="mb-6 text-lg text-gray-400">{t('blocking.blacklisted.defaultMessage')}</p>
+        <p className="mb-6 text-lg text-dark-400">{t('blocking.blacklisted.defaultMessage')}</p>
 
         {/* Reason */}
         {blacklistedInfo?.message && (
           <div className="mb-6 rounded-xl bg-dark-800/50 p-4">
-            <p className="mb-1 text-sm text-gray-500">{t('blocking.blacklisted.reason')}:</p>
+            <p className="mb-1 text-sm text-dark-500">{t('blocking.blacklisted.reason')}:</p>
-            <p className="text-gray-300">{blacklistedInfo.message}</p>
+            <p className="text-dark-300">{blacklistedInfo.message}</p>
           </div>
         )}
 
-        <p className="mt-8 text-sm text-gray-500">{t('blocking.blacklisted.contactSupport')}</p>
+        <p className="mt-8 text-sm text-dark-500">{t('blocking.blacklisted.contactSupport')}</p>
       </div>
     </div>
   );

src/components/blocking/ChannelSubscriptionScreen.tsx

@@ -108,7 +108,7 @@ export default function ChannelSubscriptionScreen() {
         </h1>
 
         {/* Message */}
-        <p className="mb-6 text-lg text-gray-400">
+        <p className="mb-6 text-lg text-dark-400">
           {channelInfo?.message || t('blocking.channel.defaultMessage')}
         </p>
 
@@ -184,7 +184,7 @@ export default function ChannelSubscriptionScreen() {
           ) : cooldown > 0 ? (
             <>
               <svg
-                className="h-5 w-5 text-gray-500"
+                className="h-5 w-5 text-dark-500"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -214,7 +214,7 @@ export default function ChannelSubscriptionScreen() {
         </button>
 
         {/* Hint */}
-        <p className="mt-4 text-sm text-gray-500">{t('blocking.channel.hint')}</p>
+        <p className="mt-4 text-sm text-dark-500">{t('blocking.channel.hint')}</p>
       </div>
     </div>
   );

src/components/blocking/MaintenanceScreen.tsx

@@ -42,15 +42,15 @@ export default function MaintenanceScreen() {
         </h1>
 
         {/* Message */}
-        <p className="mb-6 text-lg text-gray-400">
+        <p className="mb-6 text-lg text-dark-400">
           {maintenanceInfo?.message || t('blocking.maintenance.defaultMessage')}
         </p>
 
         {/* Reason */}
         {maintenanceInfo?.reason && (
           <div className="mb-6 rounded-xl bg-dark-800/50 p-4">
-            <p className="mb-1 text-sm text-gray-500">{t('blocking.maintenance.reason')}:</p>
+            <p className="mb-1 text-sm text-dark-500">{t('blocking.maintenance.reason')}:</p>
-            <p className="text-gray-300">{maintenanceInfo.reason}</p>
+            <p className="text-dark-300">{maintenanceInfo.reason}</p>
           </div>
         )}
 
@@ -70,7 +70,7 @@ export default function MaintenanceScreen() {
           />
         </div>
 
-        <p className="mt-4 text-sm text-gray-500">{t('blocking.maintenance.waitMessage')}</p>
+        <p className="mt-4 text-sm text-dark-500">{t('blocking.maintenance.waitMessage')}</p>
       </div>
     </div>
   );