Refactor hardcoded styles to use token constants

Replaces hardcoded breakpoint values in `VideoCard.js` and `tailwind.source.css` with token constants and valid CSS calculations. Updates the token linting script to enforce these rules by removing the previous allowlists for these files. This ensures that all UI elements are defined by the central styling system.

css/tailwind.source.css

@@ -5829,7 +5829,7 @@
     min-height: var(--space-md);
   }
 
-  @media (max-width: 767.98px) {
+  @media (max-width: calc(theme("screens.md") - 0.02px)) {
     .dm-app-shell[data-dm-view="list"] .dm-app-shell__main {
       display: none !important;
     }

js/designSystem.js

@@ -6,6 +6,8 @@ const FALLBACK_CONTEXT = Object.freeze({
   isNew: () => true,
 });
 
+export const BREAKPOINT_LG = 1024;
+
 export function getDesignSystemMode() {
   return NEW_MODE;
 }

js/ui/components/VideoCard.js

@@ -1,4 +1,7 @@
-import { normalizeDesignSystemContext } from "../../designSystem.js";
+import {
+  normalizeDesignSystemContext,
+  BREAKPOINT_LG,
+} from "../../designSystem.js";
 import { updateVideoCardSourceVisibility } from "../../utils/cardSourceVisibility.js";
 import { sanitizeProfileMediaUrl } from "../../utils/profileMedia.js";
 import { userLogger } from "../../utils/logger.js";
@@ -3046,7 +3049,7 @@ export class VideoCard {
           // Prevent active state on desktop to avoid conflicting with hover
           const isDesktop =
             typeof window !== "undefined" &&
-            window.matchMedia("(min-width: 1024px)").matches;
+            window.matchMedia(`(min-width: ${BREAKPOINT_LG}px)`).matches;
 
           for (const entry of entries) {
             if (isDesktop) {

scripts/check-design-tokens.mjs

@@ -35,15 +35,8 @@ const VALUE_ALLOWLIST = new Map([
       // Ignore matches inside var() declarations that happen to contain units in the name
       (value, snippet) =>
         snippet.includes(`var(--`) && snippet.includes(value),
-      // Mobile breakpoint used in media query
-      (value) => value === "767.98px",
-    ],
-  ],
-  [
-    "js/ui/components/VideoCard.js",
-    [
-      // Desktop breakpoint used in media query match
-      (value) => value === "1024px",
+      // Safe literal for media query calculation where vars are not supported
+      (value) => value === "0.02px",
     ],
   ],
 ]);
@@ -263,11 +256,7 @@ function collectViolations(filePath, content) {
   return violations;
 }
 
-const LEGACY_BRACKET_ALLOWLIST = new Set([
-  "min-h-[80px]",
-  "min-h-[96px]",
-  "w-[calc(100%-3rem)]",
-]);
+const LEGACY_BRACKET_ALLOWLIST = new Set([]);
 
 function isAllowedBracketUtility(bracketValue) {
   const inner = bracketValue.slice(1, -1).trim().toLowerCase();
@@ -283,10 +272,6 @@ function isAllowedBracketUtility(bracketValue) {
     return true;
   }
 
-  if (inner === "80px" || inner === "96px" || inner === "calc(100%-3rem)") {
-      return true;
-  }
-
   return false;
 }