refactor: Define primitive and semantic border LESS variables

static/css/components/home.less

@@ -3,7 +3,7 @@
 
 div.tutorial__item {
   background-color: @book-cover-carousel-cards;
-  border: 1px solid hsl(0, 0%, 87%);
+  border: @border-card;
   border-radius: 5px;
   padding: 10px;
   min-width: 220px;
@@ -12,7 +12,7 @@ div.tutorial__item {
     min-width: 310px;
   }
   &:focus {
-    border: 1px solid hsl(202, 97%, 28%);
+    box-shadow: @box-shadow-focus;
   }
   p {
     margin: 4% 5% 5%;

static/css/components/mybooks-menu.less

@@ -133,9 +133,8 @@
   }
 
   hr {
-    height: 0;
     margin: 4px 14px;
-    border-bottom: 1px solid @lighter-grey;
+    border-bottom: @border-divider;
   }
 
   .li-count {

static/css/less/borders.less

@@ -0,0 +1,39 @@
+/**
+ * Border Primitives
+ * ======================
+ * Rarely used, directly in components - use semantic tokens instead
+ */
+@border-width-none: 0;
+@border-width-thin: 1px;
+@border-width: 1px;
+@border-width-thick: 2px;
+@border-width-heavy: 3px;
+
+/**
+ * Border Semantic Tokens
+ * ====================
+ * Semantic tokens for borders.
+ * Reference these throughout the app for consistent border styling
+ *
+ * You should be able to use the complete border style variables in most cases,
+ * instead of the border width variables.
+ */
+
+/* === BORDER WIDTHS === */
+@border-width-control: @border-width; // inputs, buttons
+@border-width-media: @border-width; // images, media objects
+@border-width-table: @border-width;
+@border-width-divider: @border-width;
+@focus-width: @border-width-thick;
+
+/* === COMPLETE BORDER STYLES === */
+@border-card: @border-width solid @color-border-subtle;
+@border-divider: @border-width solid @color-border-subtle;
+@border-table: @border-width solid @color-border-subtle;
+
+@border-input: @border-width solid @color-border-subtle;
+@border-input-hovered: @border-width solid @color-border-focused;
+@border-input-focused: @border-width solid @color-border-focused;
+
+/* === FOCUS RING === */
+@box-shadow-focus: 0 0 0 @focus-width @color-focus-ring; // accessible focus indicator

static/css/less/colors.less

@@ -116,3 +116,17 @@
 @open-green: hsl(126, 100%, 30%);
 @closed-red: hsl(0, 100%, 50%);
 @merged-purple: hsl(266, 100%, 75%);
+
+/* === BORDER & OUTLINE ROLES === */
+/* Use for visual separation and hierarchy */
+
+/* Default borders - standard UI element borders (inputs, cards, dividers) */
+@color-border: @grey;
+@color-border-hovered: @grey;
+@color-border-focused: @primary-blue;
+@color-border-error: @red;
+
+/* Subtle borders - less prominent separation, nested elements */
+@color-border-subtle: @lighter-grey;
+
+@color-focus-ring: @primary-blue;

static/css/less/index.less

@@ -2,3 +2,4 @@
 @import (less) "colors.less";
 @import (less) "font-families.less";
 @import (less) "z-index.less";
+@import (less) "borders.less";