feat(pedigree): update PedigreeView stats bar + tip box to use theme vars

client/src/pages/PedigreeView.jsx

@@ -24,17 +24,13 @@ function PedigreeView() {
     setError('')
 
     try {
-      // Fetch pedigree tree data
       const pedigreeRes = await axios.get(`/api/pedigree/${id}`)
       const dogData = pedigreeRes.data
-      
       setDog(dogData)
 
-      // Transform data for react-d3-tree
       const treeData = transformPedigreeData(dogData, generations)
       setPedigreeData(treeData)
 
-      // Fetch COI calculation
       try {
         const coiRes = await axios.get(`/api/pedigree/${id}/coi`)
         setCoiData(coiRes.data)
@@ -84,6 +80,9 @@ function PedigreeView() {
     )
   }
 
+  // Completeness bar colour — uses theme tokens
+  const barColor = completeness === 100 ? 'var(--success)' : 'var(--primary)'
+
   return (
     <div className="container">
       {/* Header */}
@@ -99,7 +98,7 @@ function PedigreeView() {
 
         <div style={{ flex: 1 }}>
           <h1 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
-            <GitBranch size={32} />
+            <GitBranch size={32} style={{ color: 'var(--primary)' }} />
             {dog?.name}'s Pedigree
           </h1>
           {dog?.registration_number && (
@@ -113,8 +112,10 @@ function PedigreeView() {
       {/* Stats Bar */}
       <div className="card" style={{ marginBottom: '1rem', padding: '1rem' }}>
         <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.5rem' }}>
+
+          {/* COI */}
           <div>
-            <div style={{ fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}>
+            <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)', marginBottom: '0.25rem', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }}>
               Coefficient of Inbreeding
             </div>
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
@@ -133,37 +134,42 @@ function PedigreeView() {
                 {coiInfo.level}
               </span>
             </div>
-            <div style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '0.25rem' }}>
+            <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: '0.25rem' }}>
               {coiInfo.description}
             </div>
           </div>
 
+          {/* Completeness */}
           <div>
-            <div style={{ fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}>
+            <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)', marginBottom: '0.25rem', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }}>
               Pedigree Completeness
             </div>
-            <div style={{ fontSize: '1.5rem', fontWeight: '700' }}>
+            <div style={{ fontSize: '1.5rem', fontWeight: '700', color: 'var(--text-primary)' }}>
               {completeness}%
             </div>
             <div style={{ marginTop: '0.5rem' }}>
               <div style={{
-                height: '8px', 
+                height: '6px',
-                background: '#e5e7eb', 
+                background: 'var(--bg-tertiary)',
-                borderRadius: '4px',
+                borderRadius: '3px',
-                overflow: 'hidden'
+                overflow: 'hidden',
+                border: '1px solid var(--border)'
               }}>
                 <div style={{
                   height: '100%',
                   width: `${completeness}%`,
-                  background: completeness === 100 ? '#10b981' : '#3b82f6',
+                  background: barColor,
-                  transition: 'width 0.3s ease'
+                  borderRadius: '3px',
+                  transition: 'width 0.4s ease',
+                  boxShadow: `0 0 6px ${barColor}`
                 }} />
               </div>
             </div>
           </div>
 
+          {/* Generations */}
           <div>
-            <div style={{ fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}>
+            <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)', marginBottom: '0.25rem', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }}>
               Generations Displayed
             </div>
             <select
@@ -190,7 +196,7 @@ function PedigreeView() {
           />
         ) : (
           <div style={{ textAlign: 'center', padding: '4rem' }}>
-            <GitBranch size={64} style={{ color: 'var(--text-secondary)', margin: '0 auto 1rem' }} />
+            <GitBranch size={64} style={{ color: 'var(--text-muted)', margin: '0 auto 1rem' }} />
             <h3>No Pedigree Data Available</h3>
             <p style={{ color: 'var(--text-secondary)' }}>
               Add parent information to this dog to build the pedigree tree.
@@ -199,11 +205,19 @@ function PedigreeView() {
         )}
       </div>
 
-      {/* Help Text */}
+      {/* Tip */}
-      <div className="card" style={{ marginTop: '1rem', background: '#eff6ff', border: '1px solid #bfdbfe' }}>
+      <div className="card" style={{
-        <div style={{ fontSize: '0.875rem', color: '#1e40af' }}>
+        marginTop: '1rem',
-          <strong>💡 Tip:</strong> Click on any ancestor node to navigate to their profile. 
+        background: 'var(--bg-elevated)',
-          Use the zoom controls to explore the tree, or drag to pan around.
+        border: '1px solid var(--border-light)'
+      }}>
+        <div style={{ fontSize: '0.875rem', color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <span style={{ color: 'var(--primary)' }}>&#128161;</span>
+          <span>
+            <strong style={{ color: 'var(--text-primary)' }}>Tip:</strong>{' '}
+            Click any ancestor node to navigate to their profile.
+            Use the zoom controls or scroll to explore the tree, and drag to pan.
+          </span>
         </div>
       </div>
     </div>