style(download): update download nav active state to match figma

Replace the glacier-mist active pill with a white background and
canyon-clay text. Align inactive links to text-sm at 60% opacity, tune
download code block theme tokens, and hide the footer CTA on download pages.

Author: ronggur

src/pages/download/[slug].astro

@@ -350,6 +350,6 @@ const jsonLd = appSchema
         </Download>
       </div>
     </div>
-    <Footer class="z-10" />
+    <Footer class="z-10" showCTA={false} />
   </section>
 </Layout>

src/v1/styles/color-theme.css

@@ -44,10 +44,10 @@
 
 /* Target .expressive-code directly to match EC's own selector specificity */
 .expressive-code {
-  --ec-frm-inlBtnFg: var(--color-pine-forge);
-  --ec-code-background: var(--glacier-mist-700);
-  --ec-codeBg: var(--glacier-mist-700);
-  --ec-frm-edBg: var(--glacier-mist-700);
+  --ec-frm-inlBtnFg: var(--color-canyon-clay---links);
+  --ec-code-background: var(--glacier-mist-800);
+  --ec-codeBg: var(--glacier-mist-800);
+  --ec-frm-edBg: var(--glacier-mist-800);
   --ec-code-header-background: color-mix(in srgb, var(--color-glacier-mist-800) 40%, transparent);
 }
 

src/v1/styles/components-download.css

@@ -37,22 +37,18 @@
   }
 
   .download-nav-link {
-    @apply flex items-center gap-2;
-    @apply p-2;
-    @apply datum-text-base;
-    @apply text-midnight-fjord/80;
+    @apply flex items-center gap-2 rounded-md p-2;
+    @apply datum-text-sm text-midnight-fjord/60 font-medium;
     @apply transition-colors duration-200;
-    @apply hover:text-midnight-fjord;
+    @apply hover:text-midnight-fjord/80;
   }
 
   .download-nav-link--active {
-    /* Figma: Item → Link — glacier pill, midnight text, 8px pad, 6px radius */
-    @apply bg-glacier-mist-900 rounded-md p-2;
-    @apply text-midnight-fjord font-semibold;
-    @apply hover:bg-glacier-mist-900 hover:text-midnight-fjord;
+    @apply text-canyon-clay---links bg-white font-semibold;
+    @apply hover:text-canyon-clay---links hover:bg-white;
 
     .download-nav-icon {
-      @apply text-midnight-fjord;
+      @apply text-canyon-clay---links;
     }
   }
 
@@ -187,7 +183,7 @@
   }
 
   .download-nav-mobile-selected {
-    @apply truncate font-medium text-gray-900;
+    @apply text-canyon-clay---links truncate font-semibold;
   }
 
   .download-nav-mobile-chevron {
@@ -221,16 +217,14 @@
   }
 
   .download-nav-mobile-link {
-    @apply flex items-center gap-2;
-    @apply px-3 py-1;
-    @apply datum-text-base;
-    @apply text-midnight-fjord;
+    @apply flex items-center gap-2 rounded-md px-3 py-1;
+    @apply datum-text-sm text-midnight-fjord/60 font-medium;
     @apply transition-colors duration-300 ease-out;
-    @apply hover:text-canyon-clay---links;
+    @apply hover:text-midnight-fjord/80;
 
     &--active {
-      @apply text-canyon-clay---links font-semibold;
-      @apply hover:text-midnight-fjord;
+      @apply text-canyon-clay---links bg-white font-semibold;
+      @apply hover:text-canyon-clay---links hover:bg-white;
 
       .download-nav-mobile-icon {
         @apply text-canyon-clay---links;