Massive style changes

wwwroot/css/dashboard.css

@@ -1,9 +1,9 @@
 .dashboard .page-content {
-  padding: calc(var(--s4) * 2);
+  padding: var(--page-padding);
 }
 
 .dashboard section {
-  margin-bottom: calc(var(--s4) * 2);
+  margin-bottom: var(--page-spacing);
   width: 100%;
 }
 
@@ -11,13 +11,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--s4);
+  margin-bottom: var(--box-spacing);
 }
 
 .card-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: var(--s4);
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: var(--page-spacing);
 }
 
 .card {
@@ -26,6 +26,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  border-radius: var(--border-radius);
 }
 
 .card.clickable {
@@ -49,20 +50,18 @@
 }
 
 .card-body {
-  padding: var(--s3);
+  padding: var(--box-padding);
   display: flex;
   flex-direction: column;
-  gap: var(--s1);
 }
 
 .card-title-row {
   display: flex;
   align-items: center;
-  gap: var(--s2);
+  gap: var(--badge-spacing);
 }
 
 .card-title {
-  font-weight: bold;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -74,16 +73,16 @@
 }
 
 .badge {
-  padding: var(--s1) var(--s2);
+  padding: var(--badge-padding);
   background: var(--f1-bg);
-  border: var(--border-width) solid var(--f2-border);
+  border: var(--border-width) solid var(--f1-border);
   white-space: nowrap;
   flex-shrink: 0;
 }
 
 #newAgentCard,
 #newSessionCard {
-  margin-top: var(--s4);
+  margin-top: var(--box-spacing);
 }
 
 #newAgentCard .card,
@@ -92,11 +91,16 @@
   justify-content: center;
 }
 
+#newAgentCard .card-body,
+#newSessionCard .card-body {
+  padding: var(--button-padding);
+}
+
 .card-meta {
   display: flex;
   flex-direction: column;
-  gap: var(--s1);
-  margin-top: var(--s1);
+  gap: var(--badge-spacing);
+  margin-top: var(--badge-spacing);
 }
 
 .card-meta:empty {
@@ -109,11 +113,3 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-.card-workspace {
-  font-family: monospace;
-}
-
-.card-persona {
-  font-style: italic;
-}