stuff

frontend/src/styles.css

@@ -757,7 +757,7 @@ button.danger:hover:not([disabled]) {
 .preview-workspace__metadata {
   background: var(--surface-subtle);
   padding: 1rem;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+  box-shadow: inset 0 0 0 1px var(--outline-subtle);
   font-size: 0.85rem;
   overflow: auto;
   max-height: 40vh;
@@ -778,7 +778,7 @@ button.danger:hover:not([disabled]) {
   flex: 1;
   min-width: 0;
   background: var(--surface-subtle);
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+  box-shadow: inset 0 0 0 1px var(--outline-subtle);
   display: flex;
   position: relative;
   overflow: hidden;
@@ -975,8 +975,8 @@ button.danger:hover:not([disabled]) {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: #fff;
-  background: rgba(0, 0, 0, 0.65);
+  color: var(--on-accent);
+  background: var(--overlay-dark);
   padding: 0.5rem 1rem;
   border-radius: 999px;
   font-size: 0.9rem;
@@ -1192,7 +1192,7 @@ button.danger:hover:not([disabled]) {
   background: var(--surface);
   border: 1px solid var(--border-muted, var(--border));
   border-radius: 0.5rem;
-  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
+  box-shadow: 0 12px 28px var(--shadow-strong);
   min-width: 220px;
   z-index: 20;
   overflow: hidden;
@@ -1313,7 +1313,7 @@ button.danger:hover:not([disabled]) {
 
 .menu__logout:hover,
 .menu__logout:focus-visible {
-  background: rgba(209, 67, 67, 0.12);
+  background: var(--surface-danger-subtle);
 }
 
 .sidebar__search {
@@ -1465,12 +1465,12 @@ button.danger:hover:not([disabled]) {
   color: var(--fg);
   transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease,
     opacity 0.12s ease;
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+  box-shadow: 0 1px 2px var(--shadow-faint);
 }
 
 .sidebar-tag-pill:hover {
   transform: none;
-  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
+  box-shadow: 0 2px 6px var(--shadow-pop);
   border-color: var(--accent-soft);
 }
 
@@ -1511,7 +1511,7 @@ button.danger:hover:not([disabled]) {
 
 .sidebar-correspondent-item:hover {
   background: var(--sidebar-hover-bg);
-  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+  box-shadow: 0 1px 3px var(--shadow-soft);
   color: var(--fg);
 }
 
@@ -1521,8 +1521,8 @@ button.danger:hover:not([disabled]) {
 }
 
 .sidebar-correspondent-item.active {
-  background: var(--sidebar-active-bg, rgba(59, 130, 246, 0.18));
-  box-shadow: 0 0 0 1px var(--sidebar-active-bg, rgba(59, 130, 246, 0.24));
+  background: var(--sidebar-active-bg);
+  box-shadow: 0 0 0 1px var(--sidebar-active-pill-border);
   color: var(--fg);
 }
 
@@ -2015,7 +2015,7 @@ button.danger:hover:not([disabled]) {
 
 .tag-chip--more {
   background: transparent;
-  border-color: var(--border-strong, rgba(15, 23, 42, 0.24));
+  border-color: var(--border-strong);
   color: var(--muted);
 }
 
@@ -2126,7 +2126,7 @@ button.danger:hover:not([disabled]) {
   padding: 0.75rem;
   background: var(--surface-soft);
   border-radius: 6px;
-  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
+  box-shadow: inset 0 1px 2px var(--shadow-faint);
 }
 
 .detail-ocr__content pre {
@@ -2144,7 +2144,7 @@ button.danger:hover:not([disabled]) {
   height: 60vh;
   background: var(--surface-subtle);
   border-radius: 4px;
-  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
+  box-shadow: inset 0 1px 2px var(--shadow-faint);
 }
 
 .modal__body {
@@ -2357,15 +2357,15 @@ button.danger:hover:not([disabled]) {
   height: 2.2em;
   padding: 0.45em;
   border-radius: 999px;
-  background: rgba(0, 0, 0, 0.55);
-  color: #fff;
+  background: var(--preview-nav-bg);
+  color: var(--preview-nav-fg);
   cursor: pointer;
   transition: background 0.15s ease, opacity 0.15s ease;
   pointer-events: auto;
 }
 
 .preview-pane__nav-button:hover:not([disabled]) {
-  background: rgba(0, 0, 0, 0.75);
+  background: var(--preview-nav-bg-hover);
 }
 
 .preview-pane__nav-button:disabled {
@@ -2603,7 +2603,7 @@ form.inline {
 }
 
 .settings-modal__sidebar button.active {
-  background: var(--surface-soft, rgba(148, 163, 184, 0.18));
+  background: var(--surface-soft);
   font-weight: 600;
 }
 
@@ -2651,7 +2651,7 @@ form.inline {
   padding: 0.45rem 0.6rem;
   border: 1px solid var(--border);
   border-radius: 0.35rem;
-  background: var(--surface-soft, rgba(148, 163, 184, 0.12));
+  background: var(--surface-soft);
   color: inherit;
 }
 
@@ -2704,14 +2704,14 @@ form.inline {
 
 .settings-notice {
   border: 1px solid var(--accent);
-  background: rgba(37, 99, 235, 0.08);
+  background: var(--accent-soft);
   padding: 0.9rem 1rem;
   border-radius: 0.5rem;
   margin-bottom: 1rem;
 }
 
 .token-display {
-  background: rgba(15, 23, 42, 0.08);
+  background: var(--surface-ink-soft);
   padding: 0.5rem 0.65rem;
   border-radius: 0.35rem;
   font-family: var(--font-mono);
@@ -2869,8 +2869,8 @@ form.inline {
 }
 
 .login-card__tenant-button:hover:not([disabled]) {
-  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
-  border-color: var(--border-strong, var(--border));
+  background: var(--surface-hover);
+  border-color: var(--border-strong);
 }
 
 .login-card__tenant-button:disabled {