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

wwwroot/css/base.css

@@ -7,25 +7,32 @@ body {
 }
 
 body, input, select, button, textarea {
-  padding: var(--s2);
   font-family: monospace;
   font-size: 1em;
   line-height: 1.5;
   color: var(--text);
 }
 
+input, textarea, select {
+  padding: var(--s2);
+}
+
 h1, h2, h3, h4, h5 {
   font-size: 1em;
 }
 
-button, select, textarea {
-  border: 1px solid var(--f2-border);
+textarea, p {
+  line-height: 1.5;
+}
+
+button, select, input, textarea {
+  border: var(--border-width) solid var(--f3-border);
   background: var(--f3-bg);
   outline: none;
 }
 
 button:hover, select:hover, input:hover, textarea:hover {
-  border-color: var(--f3-border);
+  border-color: var(--primary);
 }
 
 button {
@@ -52,7 +59,7 @@ textarea {
 
 .session-rename {
   background: var(--f2-bg);
-  border: 1px solid var(--f3-border);
+  border: var(--border-width) solid var(--f2-border);
   outline: none;
 }
 
@@ -60,7 +67,7 @@ textarea {
 
 header {
   padding: var(--s4) calc(var(--s4) * 2);
-  border-bottom: 1px solid var(--f2-border);
+  border-bottom: var(--border-width) solid var(--f1-border);
   display: flex;
   align-items: center;
   gap: var(--s4);
@@ -83,7 +90,7 @@ header {
 .meta-bar {
   padding: var(--s2);
   background: var(--f1-bg);
-  border-bottom: 1px solid var(--f1-border);
+  border-bottom: var(--border-width) solid var(--f1-border);
   flex-shrink: 0;
   min-height: 2.5em;
 }
@@ -109,18 +116,18 @@ header {
 .msg.user {
   align-self: flex-end;
   background: var(--f3-bg);
-  border: 1px solid var(--f3-border);
+  border: var(--border-width) solid var(--f3-border);
 }
 
 .msg.assistant {
   align-self: flex-start;
   background: var(--f1-bg);
-  border: 1px solid var(--f1-border);
+  border: var(--border-width) solid var(--f1-border);
 }
 
 .msg.system-info {
   align-self: center;
-  border: 1px solid var(--f2-border);
+  border: var(--border-width) solid var(--f2-border);
   text-align: center;
 }
 
@@ -147,13 +154,13 @@ header {
   align-self: center;
   padding: var(--s2);
   background: var(--f3-bg);
-  border: 1px solid var(--f3-border);
+  border: var(--border-width) solid var(--f3-border);
 }
 
 /* ── Input Area ── */
 
 .input-area {
-  border-top: 1px solid var(--f1-border);
+  border-top: var(--border-width) solid var(--f1-border);
   display: flex;
   flex-shrink: 0;
   gap: var(--s4);

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 {

wwwroot/css/prototype.css

@@ -14,7 +14,7 @@ main {
 #sidebar {
   width: 260px;
   background: var(--f1-bg);
-  border-right: 1px solid var(--f2-border);
+  border-right: var(--border-width) solid var(--f1-border);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -23,7 +23,7 @@ main {
 
 .sidebar-header {
   padding: var(--s4);
-  border-bottom: 1px solid var(--f2-border);
+  border-bottom: var(--border-width) solid var(--f1-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -53,9 +53,5 @@ main {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border: 1px solid transparent;
-}
-
-.session-date {
-  color: var(--f3-border);
+  border: var(--border-width) solid transparent;
 }

wwwroot/css/theme.css

@@ -1,15 +1,16 @@
 :root {
   --text: #eee;
-  --primary: #a51;
-  --secondary: #5a1;
+  --primary: #b41;
+  --secondary: #4a1;
   --f1-bg: #111;
-  --f1-border: #555;
+  --f1-border: #333;
   --f2-bg: #222;
-  --f2-border: #666;
+  --f2-border: #444;
   --f3-bg: #333;
-  --f3-border: #777;
+  --f3-border: #555;
   --s1: .25em;
   --s2: .5em;
   --s3: .75em;
   --s4: 1em;
+  --border-width: 1px;
 }