refactor(nav): Add css vars

docs/css/pico.docs.css

@@ -102,6 +102,7 @@ main > aside nav {
   }
 }
 main > aside nav a#toggle-docs-navigation {
+  display: block;
   margin: 0;
   margin-bottom: var(--spacing);
   padding: 0;
@@ -140,8 +141,12 @@ main > aside summary {
   padding-bottom: 0;
   font-size: 16px;
 }
+main > aside ul {
+  padding-left: 0.25rem;
+}
 main > aside li a {
-  padding: 0.375rem 0.5rem;
+  --nav-link-spacing-vertical: 0.25rem;
+  --nav-link-spacing-horizontal: 0.75rem;
 }
 main > aside li a svg {
   vertical-align: middle;
@@ -167,7 +172,7 @@ main > aside details summary::after {
   display: none;
 }
 main > aside details[open] > summary {
-  margin-bottom: calc(var(--spacing) * 0.75);
+  margin-bottom: 0;
 }
 main > aside details[open] > summary:not(:focus) {
   color: var(--h1-color);
@@ -266,6 +271,10 @@ main > aside details[open] > summary:not(:focus) {
   vertical-align: bottom;
 }
 
+#buttons a[role=button] {
+  margin-right: calc(var(--spacing) * 0.5);
+}
+
 #forms div.grid {
   grid-row-gap: 0;
 }
@@ -285,11 +294,6 @@ section > hgroup {
   margin-bottom: calc(var(--typography-spacing-vertical) * 2);
 }
 
-a[role=button] {
-  margin-right: calc(var(--typography-spacing-vertical) / 4);
-  margin-bottom: var(--typography-spacing-vertical);
-}
-
 [role=document] section > h1,
 [role=document] section > h2,
 [role=document] section > h3 {
@@ -390,6 +394,9 @@ dialog.example:not([open]), dialog.example[open=false] {
  * Docs: Navs
  */
 body > nav {
+  --nav-element-spacing-horizontal: 0.75rem;
+  --nav-link-spacing-vertical: 1rem;
+  --nav-link-spacing-horizontal: 0.75rem;
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   z-index: 99;
   position: fixed;
@@ -409,20 +416,27 @@ body > nav a {
 body > nav svg {
   vertical-align: text-bottom;
 }
-body > nav ul:first-of-type li:first-of-type a {
-  width: 3.5rem;
-  height: 3.5rem;
+body > nav ul:first-of-type {
   margin-left: calc(var(--spacing) * -1);
+}
+body > nav ul:first-of-type li {
+  padding: 0;
+}
+body > nav ul:first-of-type li:first-of-type a {
+  display: block;
+  margin: 0;
   padding: 0;
   background: var(--h1-color);
   color: var(--nav-logo-color);
 }
 body > nav ul:first-of-type li:first-of-type a svg {
+  display: block;
+  width: 3.5rem;
   height: 3.5rem;
 }
 body > nav ul:first-of-type li:nth-of-type(2) {
   display: none;
-  margin-left: var(--spacing);
+  margin-left: calc(var(--spacing) * 1.5);
   color: var(--h1-color);
 }
 @media (min-width: 992px) {