feat(v3-uplift): add small alert size variant + dark-mode gradient

MuiAlert: normal icon-box radius 0.5rem -> 0.75rem; add a data-size="small"
variant (2rem icon box, 0.8rem icon, 0.75rem/135% text); lift the dark-mode
severity gradient tint 3% -> 5% over bgp-2.

Dev showcase: add a small-size alert specimen.

Author: abjt14

src/modules/dev/ComponentShowcase/components/FeedbackSection/index.tsx

@@ -21,6 +21,18 @@ export const FeedbackSection = () => (
       </Box>
     </Specimen>
 
+    <Specimen label="Alert — small (data-size)" fullWidth>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: '100%' }}>
+        {SEVERITIES.map((severity) => (
+          <Alert key={severity} severity={severity} data-size="small">
+            This is a {severity} alert. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
+          </Alert>
+        ))}
+      </Box>
+    </Specimen>
+
     <Specimen label="Skeleton">
       <Skeleton variant="rectangular" width={120} height={20} />
       <Skeleton variant="text" width={120} />

src/utils/theme.tsx

@@ -100,14 +100,18 @@ const tertiaryPillStyle = {
   },
 };
 
-// Alert severity surface: a gradient from the severity colour at 3% (left) fading to bg-2 (right)
-// over a bg-2 base, plus the full colour + a 20% tint behind/inside the icon box.
+// Alert severity surface: a gradient from the severity colour (left) fading to the base (right),
+// plus the full colour + a 20% tint behind/inside the icon box. Light: 3% over bg-2. Dark: the
+// tint is lifted to 5% over bgp-2 (#18181B) so it stays visible against the darker canvas.
 const alertSeverityStyle = (color: string): CSSObject => ({
   background: `linear-gradient(90deg, color-mix(in srgb, ${color} 3%, transparent) 0%, ${figVars['bg-2']} 100%), ${figVars['bg-2']}`,
   '.MuiAlert-icon': {
     color,
     backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`,
   },
+  ...darkScheme({
+    background: `linear-gradient(90deg, color-mix(in srgb, ${color} 5%, transparent) 0%, ${figVars['bgp-2']} 100%), ${figVars['bgp-2']}`,
+  }),
 });
 
 // Shared box geometry for the custom selection-control icons (checkbox + radio).
@@ -1063,7 +1067,7 @@ export function getThemedComponents(theme: AppTheme) {
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              borderRadius: '0.5rem',
+              borderRadius: '0.75rem',
               boxShadow: `inset 0 0 0 1px ${figVars['border-0']}`,
               opacity: 1,
               '.MuiSvgIcon-root': {
@@ -1102,6 +1106,23 @@ export function getThemedComponents(theme: AppTheme) {
                 background: 'transparent',
               },
             },
+            // Small size (`data-size="small"`): a tighter 2rem icon box with a 0.8rem icon, and
+            // 0.75rem / 135% message text. Everything else (radius, gradient, colours) is inherited.
+            '&[data-size="small"]': {
+              '.MuiAlert-icon': {
+                width: '2rem',
+                height: '2rem',
+                padding: '0.53125rem 0.5rem 0.46875rem 0.5rem',
+                borderRadius: '0.625rem',
+                '.MuiSvgIcon-root': {
+                  fontSize: '0.8rem',
+                },
+              },
+              '.MuiAlert-message': {
+                fontSize: '0.75rem',
+                lineHeight: '1.0125rem',
+              },
+            },
           },
         },
         defaultProps: {