frontend/src/components/MitreTechniqueTag.tsx

@@ -22,7 +22,7 @@ export function MitreTechniqueTag({
     <span
       data-testid="mitre-technique-tag"
       title={`${technique.id} — ${technique.name}`}
-      className="inline-flex items-center gap-xxs bg-primary-soft text-primary-deep rounded-none border border-primary-soft px-sm py-xxs text-[13px] font-mono"
+      className="tag-mitre gap-xxs"
     >
       {technique.id}
       {!disabled && (

frontend/tailwind.config.ts

@@ -98,13 +98,6 @@ const config: Config = {
         none: '0px',
         pill: '9999px',
       },
-      boxShadow: {
-        // Kept in config for backwards compat but no component should apply them
-        'soft-lift': '0 2px 8px rgba(26, 26, 26, 0.08)',
-        floating: '0 8px 24px rgba(26, 26, 26, 0.12)',
-        'soft-lift-dark': '0 2px 8px rgba(0, 0, 0, 0.32)',
-        'floating-dark': '0 8px 24px rgba(0, 0, 0, 0.48)',
-      },
       maxWidth: {
         page: '1366px',
       },

frontend/tests/StatusBadge.test.tsx

@@ -9,4 +9,19 @@ describe('StatusBadge', () => {
     expect(badge).toHaveAttribute('data-status', status);
     expect(badge.textContent?.toLowerCase()).toBe(status);
   });
+
+  it('applies warn-soft surface for planned', () => {
+    render(<StatusBadge status="planned" />);
+    expect(screen.getByTestId('status-badge').className).toContain('bg-warn-soft');
+  });
+
+  it('applies primary-soft surface for active', () => {
+    render(<StatusBadge status="active" />);
+    expect(screen.getByTestId('status-badge').className).toContain('bg-primary-soft');
+  });
+
+  it('applies cloud surface for closed', () => {
+    render(<StatusBadge status="closed" />);
+    expect(screen.getByTestId('status-badge').className).toContain('bg-cloud');
+  });
 });