feat(theme): implement dynamic theme logo with reactive color updates

docs/.vitepress/theme/components/ProfessionalHome.vue

@@ -509,9 +509,9 @@ onUnmounted(() => {
 }
 
 .section-container {
-  max-width: 1152px;
+  max-width: 1200px;
   margin: 0 auto;
-  padding: 0;
+  padding: 0 2rem;
   width: 100%;
 }
 
@@ -529,13 +529,13 @@ onUnmounted(() => {
 }
 
 .hero-container {
-  max-width: 1152px;
+  max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   align-items: center;
-  padding: 0;
+  padding: 0 2rem;
   width: 100%;
 }
 
@@ -568,7 +568,7 @@ onUnmounted(() => {
 }
 
 .hero-title {
-  font-size: 3.5rem;
+  font-size: 2.75rem;
   line-height: 1.15;
   font-weight: 800;
   margin-bottom: 1.25rem;
@@ -863,8 +863,10 @@ onUnmounted(() => {
   grid-template-columns: 1fr 1.2fr;
   gap: 3rem;
   align-items: center;
-  padding: 5rem 0;
+  padding: 5rem 2rem;
   width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 .json-text h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--vp-c-text-1); line-height: 1.2; }
 .json-text p { font-size: 1.05rem; color: var(--vp-c-text-2); margin-bottom: 2rem; line-height: 1.7; }
@@ -910,6 +912,9 @@ onUnmounted(() => {
   grid-template-columns: 0.85fr 1.15fr;
   gap: 3rem;
   align-items: start;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
 }
 
 .quickstart-title {
@@ -1037,6 +1042,8 @@ onUnmounted(() => {
 .cta-card {
   text-align: center;
   padding: 3.5rem 2rem;
+  max-width: 800px;
+  margin: 0 auto;
   background: var(--vp-c-bg-soft);
   border: 1px solid var(--vp-c-divider);
   border-radius: 24px;

docs/.vitepress/theme/components/ThemeLogo.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const dotColor = ref('var(--vp-c-primary)')
+
+function updateDotColor() {
+  if (typeof document === 'undefined') return
+
+  const root = document.documentElement
+  const style = getComputedStyle(root)
+  const primaryColor = style.getPropertyValue('--vp-c-primary').trim()
+  dotColor.value = primaryColor || 'currentColor'
+}
+
+let observer: MutationObserver | null = null
+
+onMounted(() => {
+  updateDotColor()
+
+  // Watch for theme changes via MutationObserver
+  observer = new MutationObserver(() => {
+    updateDotColor()
+  })
+
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme', 'class'],
+  })
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+})
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    class="theme-logo"
+    aria-label="Claude Code Workflow"
+  >
+    <!-- Three horizontal lines - use currentColor to inherit from text -->
+    <line x1="3" y1="6" x2="18" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    <line x1="3" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    <line x1="3" y1="18" x2="12" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+    <!-- Status dot - follows theme primary color -->
+    <circle cx="19" cy="17" r="3" :style="{ fill: dotColor }"/>
+  </svg>
+</template>
+
+<style scoped>
+.theme-logo {
+  width: 24px;
+  height: 24px;
+  color: var(--vp-c-text-1);
+}
+
+.theme-logo circle {
+  fill: var(--vp-c-primary);
+  transition: fill 0.3s ease;
+}
+</style>