feat: refine and finalize redesign

src/styles/global.css

@@ -1,39 +1,17 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme {
-  /* Colors - refined palette */
-  --color-sidebar: #0a0a0a;
-  --color-sidebar-hover: #1a1a1a;
-  --color-accent: #1f8dd6;
-  --color-accent-light: #4da6e8;
-  --color-accent-muted: rgba(31, 141, 214, 0.15);
-  --color-text-primary: #0a0a0a;
-  --color-text-secondary: #525252;
-  --color-text-muted: #737373;
-  --color-bg-primary: #fafafa;
-  --color-bg-secondary: #f5f5f5;
-  --color-bg-code: #f0f0f0;
-  --color-bg-code-inline: rgba(0, 0, 0, 0.06);
-  --color-border: #e5e5e5;
-  --color-border-strong: #d4d4d4;
+  /* Accent colors - using Tailwind sky palette */
+  --color-accent: theme(colors.sky.500);
+  --color-accent-light: theme(colors.sky.400);
 
-  /* Dark mode colors */
-  --color-dark-text-primary: #fafafa;
-  --color-dark-text-secondary: #a3a3a3;
-  --color-dark-text-muted: #737373;
-  --color-dark-bg-primary: #0a0a0a;
-  --color-dark-bg-secondary: #141414;
-  --color-dark-bg-code: #1a1a1a;
-  --color-dark-bg-code-inline: rgba(255, 255, 255, 0.1);
-  --color-dark-border: #262626;
-  --color-dark-border-strong: #404040;
-  --color-dark-accent-muted: rgba(31, 141, 214, 0.2);
-
-  /* Fonts - distinctive choices */
-  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
-  --font-sans: "DM Sans", system-ui, sans-serif;
-  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
+  /* Fonts - self-hosted via fontsource */
+  --font-display: "Bricolage Grotesque Variable", system-ui, sans-serif;
+  --font-sans: "DM Sans Variable", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", "SF Mono", Consolas, monospace;
 
   /* Sizing */
   --header-height: 4rem;
@@ -52,7 +30,7 @@
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
   --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
-  --shadow-glow: 0 0 40px rgba(31, 141, 214, 0.15);
+  --shadow-glow: 0 0 40px theme(colors.sky.500 / 15%);
 }
 
 /* Smooth scroll */
@@ -78,23 +56,28 @@ html {
     font-size: 16px;
     font-weight: 400;
     line-height: 1.7;
-    color: var(--color-text-primary);
-    background-color: var(--color-bg-primary);
     overflow-x: hidden;
+    background-color: theme(colors.slate.50);
+    color: theme(colors.slate.950);
   }
 
   .dark body {
-    color: var(--color-dark-text-primary);
-    background-color: var(--color-dark-bg-primary);
+    background-color: theme(colors.neutral.950);
+    color: theme(colors.neutral.50);
   }
 
   /* Typography */
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-family: var(--font-display);
     font-weight: 700;
-    color: var(--color-text-primary);
     line-height: 1.2;
     letter-spacing: -0.02em;
+    color: theme(colors.slate.950);
   }
 
   .dark h1,
@@ -103,7 +86,7 @@ html {
   .dark h4,
   .dark h5,
   .dark h6 {
-    color: var(--color-dark-text-primary);
+    color: theme(colors.neutral.50);
   }
 
   h1 {
@@ -144,26 +127,26 @@ html {
   code {
     font-family: var(--font-mono);
     font-size: 0.875em;
-    background-color: var(--color-bg-code-inline);
     border-radius: 4px;
     padding: 0.2em 0.4em;
+    background-color: theme(colors.slate.950 / 5%);
   }
 
   .dark code {
-    background-color: var(--color-dark-bg-code-inline);
+    background-color: theme(colors.neutral.400 / 15%);
   }
 
   pre {
     font-family: var(--font-mono);
-    background-color: var(--color-bg-code);
     border-radius: 8px;
     padding: 1.25rem;
     overflow-x: auto;
     line-height: 1.6;
+    background-color: theme(colors.slate.200);
   }
 
   .dark pre {
-    background-color: var(--color-dark-bg-code);
+    background-color: theme(colors.neutral.900);
   }
 
   pre > code {
@@ -173,7 +156,8 @@ html {
   }
 
   /* Lists */
-  ul, ol {
+  ul,
+  ol {
     margin-bottom: 1.25rem;
     padding-left: 1.5rem;
   }
@@ -190,11 +174,15 @@ html {
     margin-bottom: 0.5rem;
   }
 
-  ol ol, ul ol {
+  ol ol,
+  ul ol {
     list-style-type: decimal;
   }
 
-  ul ul ol, ul ol ol, ol ul ol, ol ol ol {
+  ul ul ol,
+  ul ol ol,
+  ol ul ol,
+  ol ol ol {
     list-style-type: decimal;
   }
 
@@ -203,12 +191,12 @@ html {
     border-left: 3px solid var(--color-accent);
     padding-left: 1.5rem;
     margin: 1.5rem 0;
-    color: var(--color-text-secondary);
     font-style: italic;
+    color: theme(colors.slate.600);
   }
 
   .dark blockquote {
-    color: var(--color-dark-text-secondary);
+    color: theme(colors.neutral.400);
   }
 
   /* Strong text */
@@ -216,17 +204,6 @@ html {
     font-weight: 600;
   }
 
-  /* Selection */
-  ::selection {
-    background-color: var(--color-accent-muted);
-    color: var(--color-text-primary);
-  }
-
-  .dark ::selection {
-    background-color: var(--color-dark-accent-muted);
-    color: var(--color-dark-text-primary);
-  }
-
   /* Focus styles */
   :focus-visible {
     outline: 2px solid var(--color-accent);
@@ -235,9 +212,34 @@ html {
 }
 
 /* Keyframe animations - defined outside layers for proper cascade */
+@keyframes clause-highlight-pulse {
+  0% {
+    background-color: theme(colors.sky.500 / 15%);
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+
+@keyframes clause-highlight-pulse-dark {
+  0% {
+    background-color: theme(colors.sky.700 / 20%);
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+
 @keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes fade-in-up {
@@ -245,6 +247,7 @@ html {
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -256,6 +259,7 @@ html {
     opacity: 0;
     transform: translateY(-10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -267,6 +271,7 @@ html {
     opacity: 0;
     transform: translateX(-20px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -274,8 +279,14 @@ html {
 }
 
 @keyframes bounce-subtle {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-8px); }
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-8px);
+  }
 }
 
 /* Animation utility classes */
@@ -304,71 +315,191 @@ html {
 }
 
 /* Animation delays */
-.delay-100 { animation-delay: 100ms; }
-.delay-200 { animation-delay: 200ms; }
-.delay-300 { animation-delay: 300ms; }
-.delay-400 { animation-delay: 400ms; }
-.delay-500 { animation-delay: 500ms; }
-.delay-600 { animation-delay: 600ms; }
-.delay-700 { animation-delay: 700ms; }
-.delay-800 { animation-delay: 800ms; }
+.delay-100 {
+  animation-delay: 100ms;
+}
+
+.delay-200 {
+  animation-delay: 200ms;
+}
+
+.delay-300 {
+  animation-delay: 300ms;
+}
+
+.delay-400 {
+  animation-delay: 400ms;
+}
+
+.delay-500 {
+  animation-delay: 500ms;
+}
+
+.delay-600 {
+  animation-delay: 600ms;
+}
+
+.delay-700 {
+  animation-delay: 700ms;
+}
+
+.delay-800 {
+  animation-delay: 800ms;
+}
 
 /* Component styles */
 @layer components {
-  /* Glass effect for header */
-  .glass {
-    background: rgba(250, 250, 250, 0.85);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-  }
-
-  .dark .glass {
-    background: rgba(10, 10, 10, 0.85);
-  }
-
-  /* Gradient text */
-  .gradient-text {
-    background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-
-  .dark .gradient-text {
-    background: linear-gradient(135deg, var(--color-dark-text-primary) 0%, var(--color-accent-light) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-
-  /* Section container */
+  /* Section container - uses CSS vars, keep here */
   .section-container {
     max-width: calc(var(--content-max-width) + var(--sidebar-width) + 4rem);
     margin: 0 auto;
     padding: 0 var(--section-padding-x);
   }
 
-  /* Content prose styling */
+  /* Prose styling for markdown content - can't add classes to rendered HTML */
   .prose-spec {
     max-width: var(--content-max-width);
   }
 
   .prose-spec h2 {
+    font-size: 1.75rem;
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
     padding-bottom: 0.75rem;
-    border-bottom: 1px solid var(--color-border);
-    margin-top: 4rem;
+    border-bottom: 1px solid theme(colors.slate.200);
   }
 
   .dark .prose-spec h2 {
-    border-bottom-color: var(--color-dark-border);
+    border-bottom-color: theme(colors.neutral.800);
+  }
+
+  .prose-spec h2:first-child {
+    margin-top: 0;
   }
 
   .prose-spec h3 {
-    color: var(--color-text-secondary);
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    color: theme(colors.slate.600);
   }
 
   .dark .prose-spec h3 {
-    color: var(--color-dark-text-secondary);
+    color: theme(colors.neutral.400);
+  }
+
+  .prose-spec p {
+    color: theme(colors.slate.600);
+  }
+
+  .dark .prose-spec p {
+    color: theme(colors.neutral.400);
+  }
+
+  .prose-spec strong {
+    color: theme(colors.slate.950);
+  }
+
+  .dark .prose-spec strong {
+    color: theme(colors.neutral.50);
+  }
+
+  .prose-spec li {
+    color: theme(colors.slate.600);
+  }
+
+  .dark .prose-spec li {
+    color: theme(colors.neutral.400);
+  }
+
+  /* Spec clauses - ordered list with CSS counters and hover anchor links */
+  .prose-spec ol {
+    padding-left: 2.25rem;
+    counter-reset: item;
+    list-style: none;
+  }
+
+  .prose-spec ol > li {
+    counter-increment: item;
+    position: relative;
+    margin-bottom: 0.5rem;
+  }
+
+  .prose-spec ol > li::before {
+    content: counters(item, ".") ".";
+    position: absolute;
+    left: -2.5rem;
+    width: 2rem;
+    text-align: right;
+    font-weight: 500;
+    color: theme(colors.slate.400);
+  }
+
+  .dark .prose-spec ol > li::before {
+    color: theme(colors.neutral.500);
+  }
+
+  /* Clause highlight effect using ::after pseudo-element */
+  .prose-spec ol > li::after {
+    content: "";
+    position: absolute;
+    inset: -0.25rem -0.5rem;
+    left: -2.75rem;
+    background-color: transparent;
+    border-radius: 4px;
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  .prose-spec ol > li.clause-highlight::after {
+    animation: clause-highlight-pulse 2s ease-out forwards;
+  }
+
+  .dark .prose-spec ol > li.clause-highlight::after {
+    animation: clause-highlight-pulse-dark 2s ease-out forwards;
+  }
+
+  /* Anchor link with clause number - hidden by default, shown on hover */
+  .prose-spec .clause-link {
+    position: absolute;
+    right: 100%;
+    padding-right: 0.5rem;
+    font-weight: 500;
+    color: theme(colors.slate.400);
+    text-decoration: none;
+    opacity: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    white-space: nowrap;
+  }
+
+  .dark .prose-spec .clause-link {
+    color: theme(colors.neutral.500);
+  }
+
+  /* Link icon in the anchor link */
+  .prose-spec .clause-link-icon {
+    flex-shrink: 0;
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* On hover: show anchor link, hide CSS counter */
+  .prose-spec ol > li:hover:not(:has(ol:hover)) > .clause-link,
+  .prose-spec ol > li:hover:not(:has(ol:hover)) > p > .clause-link,
+  .prose-spec .clause-link:hover {
+    opacity: 1;
+  }
+
+  .prose-spec ol > li:hover:not(:has(ol:hover))::before {
+    opacity: 0;
+  }
+
+  /* Orange color on direct hover of the link */
+  .prose-spec .clause-link:hover {
+    color: theme(colors.orange.500);
   }
 
   .prose-spec img {
@@ -378,169 +509,47 @@ html {
     margin: 2rem 0;
   }
 
-  /* Subtle border */
-  .border-subtle {
-    border-color: var(--color-border);
+  .prose-spec p:last-child {
+    margin-bottom: 0;
   }
 
-  .dark .border-subtle {
-    border-color: var(--color-dark-border);
+  /* Nav link active state (toggled by JavaScript) */
+  .nav-link.active {
+    color: theme(colors.sky.700) !important;
+    background-color: theme(colors.sky.600 / 15%) !important;
   }
 
-  /* Button base */
-  .btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    padding: 0.625rem 1.25rem;
-    font-family: var(--font-sans);
-    font-size: 0.875rem;
-    font-weight: 500;
-    border-radius: 8px;
-    transition: all var(--transition-fast);
-    cursor: pointer;
-  }
-
-  .btn-primary {
-    background-color: var(--color-accent);
-    color: white;
-  }
-
-  .btn-primary:hover {
-    background-color: var(--color-accent-light);
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-md);
-  }
-
-  .btn-ghost {
-    background-color: transparent;
-    color: var(--color-text-secondary);
-  }
-
-  .btn-ghost:hover {
-    background-color: var(--color-bg-secondary);
-    color: var(--color-text-primary);
-  }
-
-  .dark .btn-ghost {
-    color: var(--color-dark-text-secondary);
-  }
-
-  .dark .btn-ghost:hover {
-    background-color: var(--color-dark-bg-secondary);
-    color: var(--color-dark-text-primary);
-  }
-
-  /* Sidebar link styles */
-  .sidebar-link {
-    display: block;
-    padding: 0.5rem 1rem;
-    font-size: 0.875rem;
-    color: var(--color-text-muted);
-    border-radius: 6px;
-    transition: all var(--transition-fast);
-    border-left: 2px solid transparent;
-    margin-left: -2px;
-  }
-
-  .sidebar-link:hover {
-    color: var(--color-text-primary);
-    background-color: var(--color-bg-secondary);
-  }
-
-  .dark .sidebar-link {
-    color: var(--color-dark-text-muted);
-  }
-
-  .dark .sidebar-link:hover {
-    color: var(--color-dark-text-primary);
-    background-color: var(--color-dark-bg-secondary);
+  .dark .nav-link.active {
+    color: theme(colors.sky.400) !important;
+    background-color: theme(colors.sky.600 / 20%) !important;
   }
 
+  /* Sidebar link active state (toggled by JavaScript) */
   .sidebar-link.active {
-    color: var(--color-accent);
-    border-left-color: var(--color-accent);
-    background-color: var(--color-accent-muted);
+    color: theme(colors.sky.700) !important;
+    background-color: theme(colors.sky.600 / 15%) !important;
   }
 
   .dark .sidebar-link.active {
-    color: var(--color-accent-light);
-    background-color: var(--color-dark-accent-muted);
+    color: theme(colors.sky.400) !important;
+    background-color: theme(colors.sky.600 / 20%) !important;
   }
 
-  .sidebar-link-sub {
-    padding-left: 1.5rem;
-    font-size: 0.8125rem;
+  /* Sidebar scrollbar styling */
+  #spec-sidebar::-webkit-scrollbar {
+    width: 4px;
   }
 
-  /* Version badge */
-  .version-badge {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.75rem;
-    font-family: var(--font-mono);
-    font-size: 0.75rem;
-    font-weight: 500;
-    background-color: var(--color-bg-secondary);
-    border: 1px solid var(--color-border);
-    border-radius: 9999px;
-    color: var(--color-text-muted);
+  #spec-sidebar::-webkit-scrollbar-track {
+    background: transparent;
   }
 
-  .dark .version-badge {
-    background-color: var(--color-dark-bg-secondary);
-    border-color: var(--color-dark-border);
-    color: var(--color-dark-text-muted);
+  #spec-sidebar::-webkit-scrollbar-thumb {
+    background-color: theme(colors.slate.200);
+    border-radius: 2px;
   }
 
-  /* FAQ accordion styles */
-  .faq-item {
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .dark .faq-item {
-    border-bottom-color: var(--color-dark-border);
-  }
-
-  .faq-question {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    padding: 1.5rem 0;
-    text-align: left;
-    font-family: var(--font-display);
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: var(--color-text-primary);
-    cursor: pointer;
-    transition: color var(--transition-fast);
-  }
-
-  .dark .faq-question {
-    color: var(--color-dark-text-primary);
-  }
-
-  .faq-question:hover {
-    color: var(--color-accent);
-  }
-
-  .faq-answer {
-    padding-bottom: 1.5rem;
-    color: var(--color-text-secondary);
-  }
-
-  .dark .faq-answer {
-    color: var(--color-dark-text-secondary);
-  }
-}
-
-/* Transitions for interactive elements */
-@layer components {
-  #layout,
-  #menu,
-  .menu-link {
-    transition: all var(--transition-base);
+  .dark #spec-sidebar::-webkit-scrollbar-thumb {
+    background-color: theme(colors.neutral.800);
   }
 }