Border consistency

static/style.css

 :root {
   --background: #d1ddd0;
   --foreground: #000000;
-  --dark-accent: #383e38;
   --white: #ffffff;
   --off-white: #f0f0f0;
   --danger-red: #942626;
 .btn {
   cursor: pointer;
   background: var(--white);
-  border: 1px solid var(--dark-accent);
+  border: 2px solid var(--foreground);
   border-radius: 0;
   font-family: inherit;
   font-size: inherit;
   background-color: var(--off-white);
 }
 
+.btn--green {
+  background-color: var(--success-green);
+  border: 2px solid var(--foreground);
+  color: white;
+}
+
+.btn--green:hover {
+  background-color: var(--success-green);
+  opacity: 0.8;
+}
+
 .btn--close {
   background-color: var(--danger-red);
   color: white;
 
 .form__textarea,
 .form__text-field {
-  border: 2px solid var(--dark-accent);
+  border: 2px solid var(--foreground);
   font-family: monospace;
   font-size: 16px;
   line-height: 1.4em;
 
 .post__heading {
   background: var(--white);
-  border: 1px solid var(--dark-accent);
+  border: 2px solid var(--foreground);
   font-size: 16px;
   padding: 0.5em;
 }
 #preview pre,
 .post__body pre {
   background: var(--off-white);
-  border: 1px solid var(--dark-accent);
+  border: 2px solid var(--foreground);
   margin: 1em 0;
   overflow: scroll;
   padding: 0.5em;
 }
 
 .message {
-  border: 1px solid var(--dark-accent);
+  border: 2px solid var(--foreground);
   color: var(--white);
   margin: 0.5em 0;
   padding: 0.25em 1.5em;

templates/components.html

     </div>
     <div class="form__field">
       <a class="btn" href="#" data-preview>Preview</a>
-      <input class="btn" type="submit" value="Post" />
+      <input class="btn btn--green" type="submit" value="Post" />
     </div>
   </form>
 {% endmacro %}