design

frontend/src/styles.css

@@ -6,6 +6,7 @@
   --surface-subtle: #f3f3f3;
   --fg: #1e2127;
   --muted: #646a75;
+  --sidebar-fg: #5f6672;
   --border: #dde1e6;
   --shadow-faint: rgba(0, 0, 0, 0.06);
   --shadow-soft: rgba(0, 0, 0, 0.12);
@@ -756,7 +757,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   padding: 0.16rem 0.26rem;
   border-radius: 2px;
   cursor: pointer;
-  color: var(--fg);
+  color: inherit;
   transition: background 0.12s ease, color 0.12s ease;
   position: relative;
 }
@@ -858,6 +859,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   gap: 0.28rem;
   overflow-y: auto;
   padding: 1.25rem;
+  color: var(--sidebar-fg, #6f7683);
 }
 
 .sidebar-section:first-of-type,
@@ -892,7 +894,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   background: transparent;
   padding: 0.16rem 0.26rem;
   text-align: left;
-  color: var(--fg);
+  color: var(--sidebar-fg);
   border-radius: 2px;
   cursor: pointer;
   transition: background 0.12s ease, color 0.12s ease;
@@ -904,11 +906,12 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .sidebar-item:hover {
   background: var(--sidebar-hover-bg);
+  color: var(--fg);
 }
 
 .sidebar-item.active {
   background: var(--sidebar-active-bg);
-  color: var(--accent);
+  color: var(--fg);
   font-weight: 600;
 }
 
@@ -981,7 +984,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   border-radius: 4px;
   padding: 0.35rem 0.5rem;
   text-align: left;
-  color: var(--fg);
+  color: var(--sidebar-fg);
   cursor: pointer;
   font-size: 0.85rem;
   transition: background 0.15s ease, box-shadow 0.15s ease;
@@ -990,6 +993,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 .sidebar-correspondent-item:hover {
   background: var(--sidebar-hover-bg);
   box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+  color: var(--fg);
 }
 
 .sidebar-correspondent-item:focus-visible {
@@ -1000,6 +1004,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 .sidebar-correspondent-item.active {
   background: var(--accent-soft, rgba(59, 130, 246, 0.18));
   box-shadow: 0 0 0 1px var(--accent-soft, rgba(59, 130, 246, 0.24));
+  color: var(--fg);
 }