Remove redundant CSS variables from NavBar component

Following the hybrid CSS pattern from PLAIN_CSS_MIGRATION_GUIDE.md, removed CSS variables that were:
- Set to hardcoded static values in JSX
- Had identical fallback values in CSS
- Not derived from theme.ts
- Never changed at runtime

Removed redundant variables:
- --navbar-logo-height-desktop / --navbar-logo-height-mobile
- --navbar-overlay-logo-top
- --navbar-height-desktop / --navbar-height-mobile
- --navbar-max-width

Kept theme-derived variables (correct usage):
- --navbar-z-index (from theme.zIndex.navbar)
- --navbar-bg (from theme.color.neutral.base)
- --navbar-padding-desktop/mobile (from theme.padding.page)
- --nav-text-color (from theme.color.primary.gray.base)
- --mobile-overlay-bg (computed with Color library)
- --mobile-overlay-z-index (computed from theme)

This makes the code cleaner and follows the migration guide's principle:
"CSS variables should be used when values need to be looked up from theme.ts at runtime or require JavaScript computation"

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

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

Author: OpenStaxClaude

src/app/components/NavBar/NavBar.css

@@ -39,14 +39,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: var(--navbar-height-desktop, 6rem);
-  max-width: var(--navbar-max-width, 128rem);
+  height: 6rem;
+  max-width: 128rem;
   margin: 0 auto;
 }
 
 @media screen and (max-width: 75em) {
   .navbar-topbar {
-    height: var(--navbar-height-mobile, 5.2rem);
+    height: 5.2rem;
   }
 }
 
@@ -60,12 +60,12 @@
 .navbar-header-image {
   display: block;
   width: auto;
-  height: var(--navbar-logo-height-desktop, 3.5rem);
+  height: 3.5rem;
 }
 
 @media screen and (max-width: 75em) {
   .navbar-header-image {
-    height: var(--navbar-logo-height-mobile, 2.8rem);
+    height: 2.8rem;
   }
 }
 
@@ -165,10 +165,10 @@
 /* Overlay Logo */
 .navbar-overlay-logo {
   width: auto;
-  height: var(--navbar-logo-height-mobile, 2.8rem);
+  height: 2.8rem;
   position: absolute;
   left: 1.6rem;
-  top: var(--navbar-overlay-logo-top, 1.2rem); /* (navMobileHeight - headerImageMobileHeight) / 2 = (5.2 - 2.8) / 2 = 1.2rem */
+  top: 1.2rem; /* (navMobileHeight - headerImageMobileHeight) / 2 = (5.2 - 2.8) / 2 = 1.2rem */
 }
 
 /* Overlay Heading */
@@ -224,8 +224,8 @@
   padding: 0;
   background: none;
   position: absolute;
-  height: var(--navbar-height-mobile, 5.2rem);
-  width: var(--navbar-height-mobile, 5.2rem);
+  height: 5.2rem;
+  width: 5.2rem;
   top: 0;
   right: 0;
   color: var(--nav-text-color, #5f6163);

src/app/components/NavBar/index.tsx

@@ -66,10 +66,6 @@ export const MobileDropdown: FunctionComponent<{
                 src={openstaxLogo}
                 alt={intl.formatMessage({ id: 'i18n:nav:logo:alt' })}
                 className="navbar-overlay-logo"
-                style={{
-                  '--navbar-logo-height-mobile': '2.8rem',
-                  '--navbar-overlay-logo-top': '1.2rem',
-                } as React.CSSProperties}
               />
             </a>
             <button
@@ -78,7 +74,6 @@ export const MobileDropdown: FunctionComponent<{
               onClick={() => onOpenChange(false)}
               className="navbar-times-icon"
               style={{
-                '--navbar-height-mobile': '5.2rem',
                 '--nav-text-color': theme.color.primary.gray.base,
               } as React.CSSProperties}
             >
@@ -283,11 +278,6 @@ const NavigationBar = ({user, loggedOut, currentPath, hasUnsavedHighlight, param
       <div
         className="navbar-topbar"
         data-testid='navbar'
-        style={{
-          '--navbar-height-desktop': '6rem',
-          '--navbar-height-mobile': '5.2rem',
-          '--navbar-max-width': '128rem',
-        } as React.CSSProperties}
       >
         <a
           href={logoUrl}
@@ -297,10 +287,6 @@ const NavigationBar = ({user, loggedOut, currentPath, hasUnsavedHighlight, param
             src={openstaxLogo}
             alt={intl.formatMessage({id: 'i18n:nav:logo:alt'})}
             className="navbar-header-image"
-            style={{
-              '--navbar-logo-height-desktop': '3.5rem',
-              '--navbar-logo-height-mobile': '2.8rem',
-            } as React.CSSProperties}
           />
         </a>
         {loggedOut && <LoggedOutState currentPath={currentPath} />}