Add border radius variablels.

assets/sass/_variables.scss

@@ -142,6 +142,11 @@ $max-content-width: 960px;
 // The default left/right gutter/padding.
 $zen-gutters: 20px;
 
+// Border radius.
+$mini-radius: 3px;
+$small-radius: .3rem;
+$big-radius: 1rem;
+
 
 // Miscellaneous variables
 //

assets/sass/_zen.scss

@@ -129,7 +129,7 @@ article {
 
   pre {
     color: var(--color-code);
-    border-radius: 3px;
+    border-radius: $s-radius;
     padding: 5px;
     border: 1px solid var(--color-border);
     background-color: var(--color-text-bg);

assets/sass/components/button/_button.scss

@@ -28,7 +28,7 @@ button,
   color: var(--color-button-text);
   background-color: var(--color-button);
   border: 1px solid var(--color-button);
-  border-radius: .3rem;
+  border-radius: $m-radius;
 
   &:hover,
   &:focus,

assets/sass/components/inverted-box/_inverted-box.scss

@@ -5,7 +5,7 @@
   @include padding(.5);
   background: var(--color-brand);
   color: var(--color-text-bg);
-  border-radius: .3rem;
+  border-radius: $m-radius;
 
   :link,
   :visited {

assets/sass/mobile.scss

@@ -54,7 +54,7 @@
     font-weight: bold;
     line-height: 1;
     border: 1px solid var(--color-border);
-    border-radius: 3px;
+    border-radius: $s-radius;
     color: var(--color-text);
     pointer-events: auto;