refactor(styles): remove hardcoded colors from SCSS

- _blocks: document caret selector for inline white background (no behavior change)
- _desktop: remove dead commented block; note theme tokens if reintroduced
- _unread-badge: use theme tokens only (drop fallback hex)

Made-with: Cursor

Author: HMarzban

packages/webapp/src/styles/_blocks.scss

@@ -114,7 +114,7 @@
     caret-color: inherit;
   }
 
-  /* Elements with white/light backgrounds need explicit caret color */
+  /* Elements with white/light backgrounds (e.g. inline styles) need explicit caret color; selectors intentionally match hex/word */
   .heading[level='1'],
   [style*='background-color: #fff'],
   [style*='background-color: white'],

packages/webapp/src/styles/_desktop.scss

@@ -1,51 +1 @@
-// .m_desktop {
-//   .btn_openChatBox {
-//     position: absolute;
-//     left: 100%;
-//     display: flex;
-//     width: 2rem;
-//     height: 2rem;
-//     align-items: center;
-//     justify-content: center;
-//     overflow: hidden;
-//     border-radius: 0.75rem;
-//     background-color: var(--bg-docy);
-//     fill: white;
-//     padding: 0.5rem;
-//     color: var(--neutral-content);
-//     display: flex;
-//     align-items: center;
-//     justify-content: center;
-
-//     svg {
-//       fill: #fff;
-//       display: block;
-//       margin: auto;
-//     }
-
-//     .chatLeft {
-//       fill: #fff;
-//       position: relative;
-//       top: 1px;
-//       display: inline-flex;
-//       align-items: center;
-//       justify-content: center;
-//       margin: auto;
-//     }
-
-//     &[data-unread-count]:not([data-unread-count='']) {
-//       .chatLeft {
-//         display: none;
-//       }
-//     }
-
-//     &::before {
-//       content: attr(data-unread-count);
-//       color: #fff;
-//       font-weight: 600;
-//       display: flex;
-//       align-items: center;
-//       justify-content: center;
-//     }
-//   }
-// }
+// Legacy .m_desktop .btn_openChatBox removed; use theme tokens (e.g. var(--color-primary-content)) if reintroduced.

packages/webapp/src/styles/components/_heading-actions.scss

@@ -77,8 +77,14 @@
   // Dark: softer shadow so no light halo on dark canvas
   [data-theme='docsplus-dark'] &:hover .ha-wrap.has-selection > .ha-group,
   [data-theme='docsplus-dark-hc'] &:hover .ha-wrap.has-selection > .ha-group,
-  [data-theme='docsplus-dark'] & .ha-wrap.has-selection > .ha-group[data-unread-count]:not([data-unread-count='']),
-  [data-theme='docsplus-dark-hc'] & .ha-wrap.has-selection > .ha-group[data-unread-count]:not([data-unread-count='']) {
+  [data-theme='docsplus-dark']
+    &
+    .ha-wrap.has-selection
+    > .ha-group[data-unread-count]:not([data-unread-count='']),
+  [data-theme='docsplus-dark-hc']
+    &
+    .ha-wrap.has-selection
+    > .ha-group[data-unread-count]:not([data-unread-count='']) {
     box-shadow:
       0 1px 3px 0 color-mix(in oklch, var(--color-base-content) 6%, transparent),
       0 1px 2px 0 color-mix(in oklch, var(--color-base-content) 4%, transparent),

packages/webapp/src/styles/components/_unread-badge.scss

@@ -24,9 +24,9 @@
     height: $size;
     padding: 0 6px;
 
-    // Error color (red) - !important to override btn/daisyUI styles
-    background-color: var(--color-error, #ef4444) !important;
-    color: var(--color-error-content, #fff) !important;
+    // Theme-aware error color — !important to override btn/daisyUI styles
+    background-color: var(--color-error) !important;
+    color: var(--color-error-content) !important;
     border-radius: calc($size / 2);
 
     font-size: $font-size;