styling secondary; underline hover primary menu

css/style.css

@@ -129,6 +129,7 @@
   --shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
   --shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
 
+
   /* Semantic tokens: contextual usage */
   --color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900));
   
@@ -149,6 +150,8 @@
   
   --color-text-primary: light-dark(var(--color-neutral-900), var(--color-neutral-100));
   --color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400));
+  --color-text-primary-inverted: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  --color-text-secondary-inverted: light-dark(var(--color-neutral-400), var(--color-neutral-700));
   
   --color-primary-button: var(--color-orange-red-500);
   --color-primary-button-hover: var(--color-orange-500);
@@ -156,6 +159,7 @@
   
   --color-menu-button: none;
   --color-menu-button-hover: light-dark(var(--color-neutral-400), var(--color-neutral-600));
+  --color-menu-button-active: light-dark(var(--color-neutral-500), var(--color-neutral-700));
   
   --color-text-button: var(--color-neutral-900);
   --color-text-button-hover: var(--color-neutral-100);
@@ -384,18 +388,18 @@ button, .link-button, .logo, .desktop-nav a[aria-current="page"],
 
 .menu-button-secondary {
   background: var(--color-secondary);
-  color: var(--color-text-button);
+  color: var(--color-text-primary-inverted);
   box-shadow: var(--shadow-button);
 }
 
-.logo {
+.logo, .menu-button-secondary {
   padding: 1rem;
   aspect-ratio: 1/1;
 }
 
 .logo svg {
-  height: 1.75em;
+  height: 2em;
-  width: 1.75em;
+  width: 2em;
   flex: none;
   display: block;
 }
@@ -407,17 +411,43 @@ button, .link-button, .logo, .desktop-nav a[aria-current="page"],
 button:hover, .link-button:hover, .logo:hover, .desktop-nav a[aria-current="page"]:hover, .mobile-menu a[aria-current="page"]:hover {
   background: var(--color-primary-button-hover);
   color: var(--color-text-button);
+  text-decoration: none;
 }
 
 .menu-button:hover {
   background: var(--color-menu-button-hover);
   color: var(--color-menu-text-button-hover);
+  text-decoration: underline;
+  text-underline-offset: 0.175rem;
+  text-decoration-thickness: 0.075rem;
+  transition: 0.2s;
+}
+
+.menu-button-secondary:hover {
+  background: var(--color-secondary-hover);
+  color: var(--color-text-primary-inverted);
 }
 
 button:active, .link-button:active, .logo:active, .desktop-nav a[aria-current="page"]:active, .mobile-menu a[aria-current="page"]:active {
   background: var(--color-primary-button-active);
   box-shadow: var(--shadow-button-active);
   color: var(--color-text-button-active);
+  text-decoration: none;
+}
+
+.menu-button:active {
+  background: var(--color-menu-button-active);
+  color: var(--color-menu-text-button-hover);
+  text-decoration: underline;
+  text-underline-offset: 0.175rem;
+  text-decoration-thickness: 0.075rem;
+  transition: 0.2s;
+}
+
+.menu-button-secondary:active {
+  background: var(--color-secondary-active);
+  color: var(--color-text-primary);
+  box-shadow: var(--shadow-button-active);
 }
 
 button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current="page"]:visited, .mobile-menu a[aria-current="page"]:visited {
@@ -425,6 +455,11 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current
   text-decoration: none;
 }
 
+.menu-button-secondary:visited {
+  color: var(--color-text-primary);
+  text-decoration: none;
+}
+
 .link-button span {
   margin-right: 0.3em;
 }
@@ -532,7 +567,7 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current
 .desktop-nav-secondary ul {
   display: flex;
   align-items: stretch;
-  gap: var(--spacing-4);
+  gap: var(--spacing-3);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -545,25 +580,13 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current
 }
 
 .desktop-nav-secondary svg {
-  color: var(--color-secondary);
+  color: currentcolor;
-  height: 1.5em;
+  height: 1em;
-  width: 1.5em;
+  width: 1em;
   flex: none;
   display: block;
 }
 
-.desktop-nav-secondary svg:hover {
-  color: var(--color-secondary-hover);
-}
-
-.desktop-nav-secondary svg:active {
-  color: var(--color-secondary-active);
-}
-
-.desktop-nav-secondary svg path {
-  fill: currentColor;
-}
-
 .menu-toggle,
 .menu-close {
   width: 44px;