Update VPN client and gateway behavior

src/web/styles/features/servers.css

@@ -6,11 +6,10 @@
   display: block;
   margin-bottom: 12px;
   color: var(--client-muted);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   text-align: center;
-  text-transform: uppercase;
   animation: client-state-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
@@ -93,14 +92,17 @@
   overflow: hidden;
   text-overflow: ellipsis;
   overflow-wrap: anywhere;
-  font-size: 11px;
-  line-height: 1.4;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
   text-align: center;
 }
 
 .client-server small {
   color: var(--client-muted);
-  font-size: 11px;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
   text-align: center;
 }
 
@@ -108,9 +110,10 @@
   display: grid;
   place-items: center;
   color: var(--client-muted);
-  font-size: 9px;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.2;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
+  font-variant-numeric: var(--numeric-tabular);
   white-space: nowrap;
 }
 
@@ -174,9 +177,9 @@
   grid-column: 2;
   grid-row: 1;
   color: var(--client-muted);
-  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   white-space: nowrap;
 }
 
@@ -197,7 +200,9 @@
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   cursor: pointer;
   transition: color 220ms ease, text-shadow 320ms ease;
 }
@@ -357,7 +362,9 @@
   outline: 0;
   background: transparent;
   color: var(--client-text);
-  font: 500 11px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .client-server-tools input:focus {
@@ -379,7 +386,9 @@
   border: 0;
   background: transparent;
   color: var(--client-muted);
-  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
   cursor: pointer;
 }
 
@@ -422,12 +431,16 @@
 }
 
 .client-server-auto strong {
-  font-size: 11px;
+  font: var(--type-body);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
 }
 
 .client-server-auto small {
   color: var(--client-muted);
-  font-size: 9px;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-server-scroll {
@@ -471,11 +484,12 @@
   display: flex;
   justify-content: space-between;
   text-align: left;
-  text-transform: uppercase;
 }
 
 .client-server-group-toggle small {
-  font-size: 9px;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-servers.is-scalable .client-server-grid {
@@ -508,7 +522,9 @@
   border: 0;
   background: transparent;
   color: var(--client-border);
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   cursor: pointer;
   opacity: 0.45;
   transform: translateY(-50%);
@@ -522,7 +538,9 @@
 .client-server-empty {
   padding: 24px 4px;
   color: var(--client-muted);
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
   text-align: center;
 }
 
@@ -536,7 +554,9 @@
   justify-content: center;
   gap: 12px;
   color: var(--client-muted);
-  font-size: 9px;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-server-more:disabled {
@@ -592,9 +612,9 @@
 
 .client-profile-body .client-server-check-label {
   display: inline;
-  font: 600 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
 }
 
 .client-profile-body .client-server-mode-toggle {
@@ -705,12 +725,16 @@
 }
 
 .client-profile-body .client-server strong {
-  font-size: 10px;
+  font: var(--type-control);
+  letter-spacing: var(--type-control-tracking);
+  text-transform: var(--type-control-transform);
 }
 
 .client-profile-body .client-server small {
   grid-column: 3;
-  font-size: 8px;
+  font: var(--type-micro);
+  letter-spacing: var(--type-micro-tracking);
+  text-transform: var(--type-micro-transform);
 }
 
 .client-profile-body .client-server-meta {