Update VPN client and gateway behavior

src/web/styles/features/instructions.css

@@ -116,14 +116,17 @@
 }
 
 .client-instruction-summary strong {
-  font-size: 14px;
+  font: var(--type-item-title);
+  letter-spacing: var(--type-item-title-tracking);
+  text-transform: var(--type-item-title-transform);
 }
 
 .client-instruction-summary small {
   max-width: 54ch;
   color: var(--client-muted);
-  font-size: 10px;
-  line-height: 1.55;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
 }
 
 .client-instruction-reveal {
@@ -147,8 +150,9 @@
   gap: 14px;
   padding: 0 22px 24px;
   color: var(--client-muted);
-  font-size: 11px;
-  line-height: 1.7;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .client-instruction-body p,
@@ -164,7 +168,7 @@
 
 .client-instruction-body li::marker {
   color: var(--client-accent);
-  font-variant-numeric: tabular-nums;
+  font-variant-numeric: var(--numeric-tabular);
 }
 
 .client-instruction-body code {
@@ -174,7 +178,9 @@
   border-radius: 12px;
   background: color-mix(in oklch, var(--client-control) 84%, transparent);
   color: var(--client-text);
-  font: 500 11px/1.5 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
   white-space: nowrap;
 }
 
@@ -192,7 +198,6 @@
   padding: 0;
   border-radius: 0;
   background: transparent;
-  line-height: 1.55;
   white-space: pre;
 }
 
@@ -214,7 +219,9 @@
   min-width: 0;
   overflow: hidden;
   color: var(--client-text);
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -229,7 +236,7 @@
 .client-instruction-body a {
   width: fit-content;
   color: var(--client-accent);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   text-decoration: none;
 }