fix(styling): align all spacing to match Malin's desig

assets/stylesheets/base/formhack.css

@@ -39,7 +39,7 @@
 
   /* Layout */
   --fh-layout-display: block;
-  --fh-layout-margin: var(--grid-gutter) 0; /* change to "10px auto" to center */
+  --fh-layout-margin: calc(var(--spacing) * 1) 0; /* change to "10px auto" to center */
   --fh-layout-text-align: left;
 }
 
@@ -83,7 +83,7 @@ label {
   font-size: 0.875em;
 
   & + input {
-    margin-top: calc(var(--grid-gutter) * 0.25)
+    margin-top: calc(var(--spacing) * 0.25)
   }
 }
 
@@ -136,6 +136,7 @@ input[type="url"],
 input[type="week"],
 input[list] {
   height: var(--fh-input-height);
+  line-height: var(--fh-input-height);
   -webkit-appearance: none;
 }
 

assets/stylesheets/base/forms.css

@@ -1,10 +1,10 @@
 @block form-item {
   & + .form-item {
-    margin-top: var(--grid-gutter);
+    margin-top: var(--spacing);
   }
 
   & input {
-    margin-bottom: calc(var(--grid-gutter) * 0.25);
+    margin: 0 0 calc(var(--spacing) * 0.25);
   }
 
   @element help-text {
@@ -30,8 +30,8 @@
 
 @block status-block {
   display: flex;
-  margin: var(--grid-gutter) 0;
-  padding: calc(var(--grid-gutter) * 1);
+  margin: var(--spacing) 0;
+  padding: calc(var(--spacing) * 0.5);
   border-radius: var(--border-radius);
 
   font-size: 0.875em;
@@ -48,7 +48,7 @@
     flex: 0 0 auto;
     width: 24px;
     height: 24px;
-    margin-right: calc(var(--grid-gutter) * 0.5);
+    margin-right: calc(var(--spacing) * 0.25);
   }
 
   @element content {

assets/stylesheets/base/typography.css

@@ -27,6 +27,9 @@ p, label, .form-item {
 }
 
 p {
+  &:first-child {
+    margin-top: 0;
+  }
   &:last-child {
     margin-bottom: 0;
   }