CSS refactor: border-width variable, darker border palette, hover/padding cleanup

wwwroot/css/main.css

@@ -21,7 +21,7 @@ body {
 
 #nav {
   padding: var(--s3) calc(var(--s4) * 1.5);
-  border-bottom: 1px solid var(--f2-border);
+  border-bottom: var(--border-width) solid var(--f2-border);
   display: flex;
   align-items: center;
   gap: calc(var(--s4) * 2);
@@ -34,9 +34,9 @@ body {
 }
 
 .nav-link {
-  color: var(--f3-border);
   text-decoration: none;
   padding: var(--s1) var(--s2);
+  color: var(--text);
 }
 
 .nav-link:hover { color: var(--text); }
@@ -68,7 +68,7 @@ body {
 
 .card {
   background: var(--f3-bg);
-  border: 1px solid var(--f3-border);
+  border: var(--border-width) solid var(--f3-border);
   padding: var(--s4);
   display: flex;
   flex-direction: column;
@@ -79,12 +79,9 @@ body {
 .card.clickable:hover { border-color: var(--primary); }
 
 .card-icon { font-size: 2em; }
-.card-title { font-weight: bold; }
-.card-sub { color: var(--f3-border); }
 
 .card.placeholder {
   border-style: dashed;
-  color: var(--f2-border);
 }
 
 /* ── Session Page ── */
@@ -96,7 +93,7 @@ body {
 
 .session-header {
   padding: var(--s3) calc(var(--s4) * 1.5);
-  border-bottom: 1px solid var(--f2-border);
+  border-bottom: var(--border-width) solid var(--f1-border);
   display: flex;
   align-items: center;
   gap: var(--s4);
@@ -127,7 +124,6 @@ body {
   align-items: center;
   justify-content: center;
   gap: var(--s4);
-  color: var(--f3-border);
 }
 
 .placeholder-icon {