Remove redundant CSS variables from Footer component

Following the same pattern as NavBar, removed CSS variables that were:
- Set to hardcoded static color values in JSX
- Had identical fallback values in CSS
- Not derived from theme.ts
- Never changed at runtime (hardcoded in original styled-components)

Removed redundant variables:
- --footer-top-bg (was '#424242', now plain CSS)
- --footer-bottom-bg (was '#3b3b3b', now plain CSS)

These colors were hardcoded in the original styled-components (not from theme),
so they should be plain CSS values, not CSS variables.

Kept theme-derived variables (correct usage):
- --footer-text-color (from theme.color.text.label)
- --footer-social-icon-bg (from theme.color.primary.gray.light)
- --footer-social-icon-color (computed hex value)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: OpenStaxClaude

src/app/components/Footer/Footer.css

@@ -42,7 +42,7 @@
 
 /* Top section */
 .footer-top {
-  background-color: var(--footer-top-bg, #424242);
+  background-color: #424242;
 }
 
 /* Top section responsive padding */
@@ -348,7 +348,7 @@
   font-weight: normal;
   letter-spacing: normal;
   line-height: normal;
-  background-color: var(--footer-bottom-bg, #3b3b3b);
+  background-color: #3b3b3b;
 }
 
 @media (min-width: 37.6em) {

src/app/components/Footer/index.tsx

@@ -368,12 +368,7 @@ const NormalFooter = ({
     data-analytics-region='footer'
   >
     <div className="footer-inner">
-      <div
-        className="footer-top"
-        style={{
-          '--footer-top-bg': '#424242',
-        } as React.CSSProperties}
-      >
+      <div className="footer-top">
         <div className="footer-top-boxed">
           <h2 className="footer-heading">
             <BareMessage id='i18n:footer:heading' />
@@ -384,12 +379,7 @@ const NormalFooter = ({
           <Column3 />
         </div>
       </div>
-      <div
-        className="footer-bottom"
-        style={{
-          '--footer-bottom-bg': '#3b3b3b',
-        } as React.CSSProperties}
-      >
+      <div className="footer-bottom">
         <div className="footer-bottom-boxed">
           <Copyrights values={getValues()} />
           <SocialDirectory />
@@ -533,12 +523,7 @@ const PortalFooter = ({
       data-testid='portal-footer'
     >
       <div className="footer-inner">
-        <div
-          className="footer-bottom"
-          style={{
-            '--footer-bottom-bg': '#3b3b3b',
-          } as React.CSSProperties}
-        >
+        <div className="footer-bottom">
           <div className="footer-portal-bottom-boxed">
             <PortalColumn1 />
             <PortalColumn2 portalName={portalName} />