Add cyan accent color to enhance website aesthetics

This update introduces a vibrant cyan accent color alongside the existing
blue, creating a more visually engaging design while maintaining the clean,
minimalist aesthetic.

Changes:
- Define custom cyan and blue accent colors in global.css using @theme
- Add gradient effect (blue to cyan) on h1 and h2 headings
- Add cyan accent border on code blocks for visual distinction
- Update Button component with cyan border on hover/active states
- Add gradient indicator for active navigation items
- Add colorful hover states to theme toggle icons
- Include smooth color transitions for improved UX

Both light and dark modes are fully supported with appropriate color variants.

src/components/Button.astro

@@ -9,7 +9,7 @@ interface Props {
 const { href, variant = "text", title, id } = Astro.props;
 
 const baseClasses =
-  "border-transparent border-b-2 p-2 cursor-pointer hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700 active:bg-neutral-200 active:dark:bg-neutral-700 active:border-neutral-300 active:dark:border-neutral-600";
+  "border-transparent border-b-2 p-2 cursor-pointer hover:border-[var(--color-accent-cyan)] hover:bg-neutral-200 hover:dark:border-[var(--color-accent-cyan-light)] hover:dark:bg-neutral-700 active:bg-neutral-200 active:dark:bg-neutral-700 active:border-[var(--color-accent-cyan)] active:dark:border-[var(--color-accent-cyan-light)] transition-colors duration-200";
 const classes = `${baseClasses} ${variant === "icon" && href ? "inline-grid place-content-center" : "inline-block"}`;
 ---
 

src/components/Nav.astro

@@ -4,6 +4,7 @@ import Icon from "./Icon.astro";
 import Button from "./Button.astro";
 
 const routes = ["blog", "tracks", "services"];
+const currentPath = Astro.url.pathname;
 ---
 
 <nav class="sticky top-0 z-20 max-w-none bg-white dark:bg-neutral-800">
@@ -15,18 +16,32 @@ const routes = ["blog", "tracks", "services"];
     </a>
     <div class="flex overflow-x-auto">
       {
-        routes.map((route) => (
-          <Button href={`/${route}`}>
-            {route
-              .split(" ")
-              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-              .join(" ")}
-          </Button>
-        ))
+        routes.map((route) => {
+          const isActive = currentPath.startsWith(`/${route}`);
+          return (
+            <span class="relative">
+              <Button href={`/${route}`}>
+                {route
+                  .split(" ")
+                  .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                  .join(" ")}
+              </Button>
+              {isActive && (
+                <span class="absolute right-0 bottom-0 left-0 h-0.5 bg-gradient-to-r from-[var(--color-accent-blue)] to-[var(--color-accent-cyan)] dark:from-[var(--color-accent-blue-light)] dark:to-[var(--color-accent-cyan-light)]" />
+              )}
+            </span>
+          );
+        })
       }
       <Button id="theme-toggle" variant="icon" title="Toggle dark mode">
-        <Icon name="moon" class="dark:hidden" />
-        <Icon name="sun" class="hidden dark:block" />
+        <Icon
+          name="moon"
+          class="transition-colors duration-200 hover:text-[var(--color-accent-cyan)] dark:hidden"
+        />
+        <Icon
+          name="sun"
+          class="hidden transition-colors duration-200 hover:text-[var(--color-accent-cyan-light)] dark:block"
+        />
       </Button>
       <Button variant="icon" href="/rss.xml" title="RSS feed">
         <Icon name="rss" />

src/styles/global.css

@@ -2,6 +2,13 @@
 @plugin "@tailwindcss/typography";
 @custom-variant dark (&:where(.dark, .dark *));
 
+@theme {
+  --color-accent-cyan: #0891b2;
+  --color-accent-cyan-light: #67e8f9;
+  --color-accent-blue: #1e40af;
+  --color-accent-blue-light: #93c5fd;
+}
+
 @layer base {
   body {
     font-family: "Tiempos Text", serif;
@@ -16,6 +23,32 @@
     font-family: "Styrene A", sans-serif;
   }
 
+  /* Gradient effect on h1 and h2 */
+  h1,
+  h2 {
+    background: linear-gradient(
+      135deg,
+      var(--color-accent-blue) 0%,
+      var(--color-accent-cyan) 100%
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 100%;
+  }
+
+  .dark h1,
+  .dark h2 {
+    background: linear-gradient(
+      135deg,
+      var(--color-accent-blue-light) 0%,
+      var(--color-accent-cyan-light) 100%
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
   code,
   kbd,
   samp,
@@ -24,6 +57,15 @@
     font-family: "Styrene B", monospace;
   }
 
+  /* Accent border on code blocks */
+  pre {
+    border-left: 4px solid var(--color-accent-cyan);
+  }
+
+  .dark pre {
+    border-left-color: var(--color-accent-cyan-light);
+  }
+
   mark {
     @apply bg-neutral-200 text-current dark:bg-neutral-600;
   }