From 76d38c4c8462dfd0b92f2540bf27d7debf5cab00 Mon Sep 17 00:00:00 2001
From: mAi <mai@flexsiebels.de>
Date: Wed, 27 May 2026 10:41:29 +0200
Subject: [PATCH] fix(fristenrechner): dark-mode token migration for overhaul
 CSS (m/paliad#146)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Fristenrechner overhaul CSS shipped in S2/S3/S4 (commits 9ab8dd8,
2a2c5b8, 70985d8) used hardcoded hex literals across the result view,
Mode A search, and Mode B wizard surfaces. The `:root[data-theme="dark"]`
flip had nothing to override, so toggling the theme left the whole
Fristenrechner pane stuck in light-mode colors.

Migrate every hex literal in those sections to the design-token system
that the rest of paliad already uses (PWAHead.tsx flips
`data-theme` from localStorage):

- Surfaces: `#fff`/`#fafaf6`/`#f4f4f0` → `--color-surface` /
  `--color-surface-2` / `--color-bg-subtle`.
- Borders: `#d8d8cf`/`#e0e0d4`/`#ececde` → `--color-border`;
  `#c8c8be`/`#d4d4c9`/`#d4d4cc` → `--color-border-strong`.
- Text: `#1f1f1f`/`#2a2a2a` → `--color-text`; `#444`/`#555`/`#666` →
  `--color-text-muted`; `#777`/`#888`/`#999` → `--color-text-subtle`.
- Status palette: error → `--status-red-*`; spawn/cond badges +
  court-set hint → `--status-amber-*`; ok-msg → `--status-green-*`;
  claimant party + filter-row badge → `--status-blue-*`; recommended
  group stripe → new `--status-blue-border`; conditional stripe →
  `--status-amber-border`.
- Defendant/court party stances → `--status-red-*` /
  new `--status-purple-*` bucket.
- Brand-lime cues (mandatory group stripe, mode-tab active underline,
  wizard row-number circle) → `--color-accent` / `--color-accent-dark`.
- Lime soft tints (nudge, footer, hover bgs, success message, "from
  Akte" wizard row, edit-button hover) → new
  `--color-accent-soft-{bg,fg,border}` tokens.
- Saturated lime pills (active chip, jurisdiction badge, wizard
  active-row outline) → new `--color-accent-strong-{bg,fg,border}`
  tokens.
- Lime accent links (rule-source, edit-date, result-cta, wizard-edit)
  → existing `--color-accent-fg` (midnight in light, lime in dark).
- Wizard active-row glow `rgba(198, 244, 28, 0.15)` → token-driven
  `rgb(var(--hlc-lime-rgb) / 0.15)`.
- Trigger card box-shadow → `var(--shadow)` (auto-deepens in dark).

Ten new tokens introduced in `:root` + mirrored in
`:root[data-theme="dark"]`: 6 accent-soft/-strong, 1 status-blue
border, 3 status-purple bucket.

Verified by mounting `frontend/dist/assets/global.css` against a static
representative DOM (all four group stripes, every party stance, mode-A
filter + result list, mode-B wizard with filter/qualifier badges,
trigger card, write-back footer, kontextfrei nudge, ok/error
messages). Toggled `data-theme="dark"` via JS — every surface, border,
chip, badge, and status pill flipped to its dark counterpart.
`bun run build` + `go vet ./...` clean. Layout / spacing / sizing
untouched (colours, borders, shadows only).

NO CHANGES IN FUNCTIONALITY. PoC pane only flips visuals when the
theme is toggled now.

t-paliad-326.
---
 frontend/src/styles/global.css | 284 +++++++++++++++++++--------------
 1 file changed, 161 insertions(+), 123 deletions(-)

diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index df52383..65e2905 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -67,6 +67,21 @@
     --color-segment-active-fg:     var(--color-accent-dark);
     --color-segment-active-border: var(--color-accent);
 
+    /* Accent soft/strong tints — pale lime backdrops for nudges, hover
+       states, success messages and saturated "selected" chip pills.
+       Soft is the pale tint (footer, nudge, ok-msg, hover); strong is
+       the saturated lime pill (active chip, jurisdiction badge,
+       wizard active-row outline). Dark mode flips to alpha-on-midnight
+       so the lime cue stays visible without shouting. Consumed by
+       .fristen-overhaul-* / .fristen-mode-* / .fristen-wizard-*
+       (m/paliad#146 follow-up, t-paliad-326). */
+    --color-accent-soft-bg:       #f7fbe6;
+    --color-accent-soft-fg:       #3d501c;
+    --color-accent-soft-border:   #d2e08b;
+    --color-accent-strong-bg:     #d3edb7;
+    --color-accent-strong-fg:     #38531a;
+    --color-accent-strong-border: #98b545;
+
     /* Status palette — five buckets (red/amber/green/blue/neutral) shared
        across dashboard cards, frist-due-chips, agenda urgency, termin
        badges, login forms. Light values match the existing pastel-on-dark
@@ -87,8 +102,14 @@
     --status-blue-bg:     #dbeafe;
     --status-blue-fg:     #1e40af;
     --status-blue-fg-2:   #2563eb;
+    --status-blue-border: #93c5fd;
     --status-blue-soft-bg: #eef2ff;
     --status-blue-soft-fg: #4338ca;
+    /* Purple bucket — added for "court" party stance and other neutral
+       institutional roles. Tailwind-style purple-100/purple-800/300. */
+    --status-purple-bg:    #f0e2f7;
+    --status-purple-fg:    #4f2c66;
+    --status-purple-border: #d8b4fe;
     --status-neutral-bg:  #f3f4f6;
     --status-neutral-fg:  #6b7280;
     --status-neutral-fg-2: #475569;
@@ -188,6 +209,16 @@
     --color-segment-active-fg:     var(--color-accent-dark);
     --color-segment-active-border: var(--color-accent);
 
+    /* Accent soft/strong tints — alpha-tinted lime on midnight so the
+       cue reads without flattening the surface. Mirrors the light-mode
+       block above (t-paliad-326). */
+    --color-accent-soft-bg:       rgb(var(--hlc-lime-rgb) / 0.08);
+    --color-accent-soft-fg:       #bef264;
+    --color-accent-soft-border:   rgb(var(--hlc-lime-rgb) / 0.30);
+    --color-accent-strong-bg:     rgb(var(--hlc-lime-rgb) / 0.22);
+    --color-accent-strong-fg:     var(--hlc-lime);
+    --color-accent-strong-border: rgb(var(--hlc-lime-rgb) / 0.45);
+
     --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
     --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
@@ -211,8 +242,13 @@
     --status-blue-bg:     rgb(59 130 246 / 0.18);
     --status-blue-fg:     #93c5fd;
     --status-blue-fg-2:   #60a5fa;
+    --status-blue-border: rgb(59 130 246 / 0.35);
     --status-blue-soft-bg: rgb(99 102 241 / 0.18);
     --status-blue-soft-fg: #a5b4fc;
+    /* Purple bucket — alpha-tinted on midnight, bright fg for AA. */
+    --status-purple-bg:    rgb(168 85 247 / 0.18);
+    --status-purple-fg:    #d8b4fe;
+    --status-purple-border: rgb(168 85 247 / 0.35);
     --status-neutral-bg:  rgb(var(--hlc-cream-rgb) / 0.08);
     --status-neutral-fg:  rgb(var(--hlc-cream-rgb) / 0.66);
     --status-neutral-fg-2: rgb(var(--hlc-cream-rgb) / 0.55);
@@ -18907,31 +18943,31 @@ dialog.quick-add-sheet::backdrop {
   padding: 0.9rem 1.1rem;
   border-radius: 0.6rem;
   margin: 0.5rem 0;
-  background: #f4f4f0;
-  border: 1px solid #e3e3da;
-  color: #444;
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
   font-size: 0.95rem;
 }
 
 .fristen-overhaul-error {
-  background: #fde9e7;
-  border-color: #f0b8b1;
-  color: #732f25;
+  background: var(--status-red-bg);
+  border-color: var(--status-red-border);
+  color: var(--status-red-fg);
 }
 
 .fristen-overhaul-nudge {
-  background: #f8fbe8;
-  border-color: #d2e08b;
-  color: #4d5a2a;
+  background: var(--color-accent-soft-bg);
+  border-color: var(--color-accent-soft-border);
+  color: var(--color-accent-soft-fg);
 }
 
 .fristen-overhaul-trigger {
-  background: #fff;
-  border: 1px solid #d8d8cf;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.8rem;
   padding: 1rem 1.2rem;
   margin-bottom: 1.2rem;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
+  box-shadow: var(--shadow);
 }
 
 .fristen-overhaul-trigger-header {
@@ -18948,7 +18984,7 @@ dialog.quick-add-sheet::backdrop {
 .fristen-overhaul-trigger-title {
   margin: 0;
   font-size: 1.25rem;
-  color: #1f1f1f;
+  color: var(--color-text);
 }
 
 .fristen-overhaul-trigger-meta {
@@ -18957,7 +18993,7 @@ dialog.quick-add-sheet::backdrop {
   gap: 0.5rem;
   margin-top: 0.5rem;
   font-size: 0.9rem;
-  color: #555;
+  color: var(--color-text-muted);
 }
 
 .fristen-overhaul-trigger-code,
@@ -18965,15 +19001,15 @@ dialog.quick-add-sheet::backdrop {
 .fristen-overhaul-trigger-juris {
   padding: 0.15rem 0.55rem;
   border-radius: 0.4rem;
-  background: #f1f1eb;
-  color: #555;
+  background: var(--color-surface-muted);
+  color: var(--color-text-muted);
   font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
   font-size: 0.8rem;
 }
 
 .fristen-overhaul-trigger-juris {
-  background: #d3edb7;
-  color: #38531a;
+  background: var(--color-accent-strong-bg);
+  color: var(--color-accent-strong-fg);
   font-family: inherit;
   font-weight: 600;
 }
@@ -18987,15 +19023,16 @@ dialog.quick-add-sheet::backdrop {
 
 .fristen-overhaul-trigger-date-label {
   font-size: 0.9rem;
-  color: #555;
+  color: var(--color-text-muted);
 }
 
 .fristen-overhaul-trigger-date-input {
   padding: 0.35rem 0.55rem;
   font-size: 0.95rem;
-  border: 1px solid #c8c8be;
+  border: 1px solid var(--color-border-strong);
   border-radius: 0.4rem;
-  background: #fff;
+  background: var(--color-input-bg);
+  color: var(--color-text);
 }
 
 .fristen-overhaul-groups {
@@ -19005,21 +19042,21 @@ dialog.quick-add-sheet::backdrop {
 }
 
 .fristen-overhaul-group {
-  background: #fff;
-  border: 1px solid #e2e2d6;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.7rem;
   padding: 0.9rem 1.1rem;
 }
 
-.fristen-overhaul-group--mandatory   { border-left: 4px solid #c6f41c; }
-.fristen-overhaul-group--recommended { border-left: 4px solid #99c4e3; }
-.fristen-overhaul-group--optional    { border-left: 4px solid #d4d4cc; }
-.fristen-overhaul-group--conditional { border-left: 4px solid #f5b66a; }
+.fristen-overhaul-group--mandatory   { border-left: 4px solid var(--color-accent); }
+.fristen-overhaul-group--recommended { border-left: 4px solid var(--status-blue-border); }
+.fristen-overhaul-group--optional    { border-left: 4px solid var(--color-border-strong); }
+.fristen-overhaul-group--conditional { border-left: 4px solid var(--status-amber-border); }
 
 .fristen-overhaul-group-title {
   margin: 0 0 0.6rem 0;
   font-size: 1rem;
-  color: #2a2a2a;
+  color: var(--color-text);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -19039,8 +19076,8 @@ dialog.quick-add-sheet::backdrop {
   gap: 0.7rem;
   align-items: start;
   padding: 0.5rem 0.6rem;
-  background: #fafaf6;
-  border: 1px solid #ececde;
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
 }
 
@@ -19071,7 +19108,7 @@ dialog.quick-add-sheet::backdrop {
 
 .fristen-overhaul-rule-title {
   font-weight: 600;
-  color: #1f1f1f;
+  color: var(--color-text);
 }
 
 .fristen-overhaul-rule-spawn,
@@ -19079,14 +19116,14 @@ dialog.quick-add-sheet::backdrop {
   font-size: 0.75rem;
   padding: 0.05rem 0.45rem;
   border-radius: 0.35rem;
-  background: #f3e5cf;
-  color: #6e4a1d;
+  background: var(--status-amber-bg);
+  color: var(--status-amber-fg);
   white-space: nowrap;
 }
 
 .fristen-overhaul-rule-cond {
-  background: #fff2d6;
-  color: #7a570e;
+  background: var(--status-amber-bg);
+  color: var(--status-amber-fg-2);
 }
 
 .fristen-overhaul-rule-meta-row {
@@ -19094,33 +19131,33 @@ dialog.quick-add-sheet::backdrop {
   flex-wrap: wrap;
   gap: 0.5rem;
   font-size: 0.85rem;
-  color: #555;
+  color: var(--color-text-muted);
 }
 
 .fristen-overhaul-rule-duration {
-  color: #2a2a2a;
+  color: var(--color-text);
 }
 
 .fristen-overhaul-rule-party {
   padding: 0.05rem 0.45rem;
   border-radius: 0.35rem;
   font-size: 0.75rem;
-  background: #eef2e3;
-  color: #4a5d2a;
+  background: var(--color-accent-soft-bg);
+  color: var(--color-accent-soft-fg);
 }
 
-.fristen-overhaul-rule-party--claimant  { background: #d2e9ff; color: #1c4567; }
-.fristen-overhaul-rule-party--defendant { background: #ffe2d7; color: #6e2c14; }
-.fristen-overhaul-rule-party--court     { background: #f0e2f7; color: #4f2c66; }
+.fristen-overhaul-rule-party--claimant  { background: var(--status-blue-bg); color: var(--status-blue-fg); }
+.fristen-overhaul-rule-party--defendant { background: var(--status-red-bg); color: var(--status-red-fg); }
+.fristen-overhaul-rule-party--court     { background: var(--status-purple-bg); color: var(--status-purple-fg); }
 
 .fristen-overhaul-rule-source {
   font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
   font-size: 0.8rem;
-  color: #444;
+  color: var(--color-text-muted);
 }
 
 a.fristen-overhaul-rule-source {
-  color: #2d4f1a;
+  color: var(--color-accent-fg);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
@@ -19128,12 +19165,12 @@ a.fristen-overhaul-rule-source {
 .fristen-overhaul-rule-notes {
   margin-top: 0.3rem;
   font-size: 0.85rem;
-  color: #555;
+  color: var(--color-text-muted);
 }
 
 .fristen-overhaul-rule-notes summary {
   cursor: pointer;
-  color: #666;
+  color: var(--color-text-muted);
 }
 
 .fristen-overhaul-rule-date-cell {
@@ -19147,16 +19184,16 @@ a.fristen-overhaul-rule-source {
 
 .fristen-overhaul-rule-date {
   font-weight: 600;
-  color: #1f1f1f;
+  color: var(--color-text);
 }
 
 .fristen-overhaul-rule-date--unknown {
-  color: #999;
+  color: var(--color-text-subtle);
   font-weight: 400;
 }
 
 .fristen-overhaul-rule-court-set {
-  color: #6e4a1d;
+  color: var(--status-amber-fg);
   font-style: italic;
   font-size: 0.85rem;
 }
@@ -19164,15 +19201,16 @@ a.fristen-overhaul-rule-source {
 .fristen-overhaul-rule-date-input {
   padding: 0.2rem 0.4rem;
   font-size: 0.95rem;
-  border: 1px solid #c8c8be;
+  border: 1px solid var(--color-border-strong);
   border-radius: 0.3rem;
-  background: #fff;
+  background: var(--color-input-bg);
+  color: var(--color-text);
 }
 
 .fristen-overhaul-rule-edit-date {
   border: 0;
   background: transparent;
-  color: #4a6f1f;
+  color: var(--color-accent-fg);
   font-size: 0.8rem;
   cursor: pointer;
   padding: 0.1rem 0.3rem;
@@ -19180,7 +19218,7 @@ a.fristen-overhaul-rule-source {
 }
 
 .fristen-overhaul-rule-edit-date:hover {
-  background: #eef4dd;
+  background: var(--color-accent-soft-bg);
 }
 
 .fristen-overhaul-footer {
@@ -19189,14 +19227,14 @@ a.fristen-overhaul-rule-source {
   align-items: center;
   margin-top: 1.2rem;
   padding: 0.9rem 1.1rem;
-  background: #f7fbe6;
-  border: 1px solid #d3e08b;
+  background: var(--color-accent-soft-bg);
+  border: 1px solid var(--color-accent-soft-border);
   border-radius: 0.7rem;
 }
 
 .fristen-overhaul-footer-count {
   font-size: 0.95rem;
-  color: #3d501c;
+  color: var(--color-accent-soft-fg);
   font-weight: 500;
 }
 
@@ -19211,8 +19249,8 @@ a.fristen-overhaul-rule-source {
   border-radius: 0.4rem;
 }
 
-.fristen-overhaul-msg.form-msg-ok    { background: #e7f4d6; color: #3a5113; }
-.fristen-overhaul-msg.form-msg-error { background: #fde9e7; color: #732f25; }
+.fristen-overhaul-msg.form-msg-ok    { background: var(--status-green-bg); color: var(--status-green-fg); }
+.fristen-overhaul-msg.form-msg-error { background: var(--status-red-bg); color: var(--status-red-fg); }
 
 @media (max-width: 600px) {
   .fristen-overhaul-rule {
@@ -19240,7 +19278,7 @@ a.fristen-overhaul-rule-source {
   display: flex;
   gap: 0.4rem;
   margin: 0 0 1rem 0;
-  border-bottom: 2px solid #e3e3da;
+  border-bottom: 2px solid var(--color-border);
 }
 
 .fristen-mode-tab {
@@ -19252,7 +19290,7 @@ a.fristen-overhaul-rule-source {
   border: 0;
   border-bottom: 3px solid transparent;
   margin-bottom: -2px;
-  color: #555;
+  color: var(--color-text-muted);
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
@@ -19260,14 +19298,14 @@ a.fristen-overhaul-rule-source {
 }
 
 .fristen-mode-tab:hover {
-  background: #f5f5ef;
-  color: #1f1f1f;
+  background: var(--color-overlay-faint);
+  color: var(--color-text);
 }
 
 .fristen-mode-tab.is-active {
-  color: #2a2a2a;
-  border-bottom-color: #c6f41c;
-  background: #fbfdf3;
+  color: var(--color-text);
+  border-bottom-color: var(--color-accent);
+  background: var(--color-accent-soft-bg);
 }
 
 .fristen-mode-tab-icon {
@@ -19285,8 +19323,8 @@ a.fristen-overhaul-rule-source {
 }
 
 .fristen-mode-a-filters {
-  background: #f7f8f2;
-  border: 1px solid #e2e3d7;
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
   border-radius: 0.7rem;
   padding: 0.8rem 1rem;
 }
@@ -19294,7 +19332,7 @@ a.fristen-overhaul-rule-source {
 .fristen-mode-a-filters-header {
   font-size: 0.8rem;
   letter-spacing: 0.05em;
-  color: #6e7256;
+  color: var(--color-text-muted);
   text-transform: uppercase;
   margin-bottom: 0.6rem;
   font-weight: 600;
@@ -19310,7 +19348,7 @@ a.fristen-overhaul-rule-source {
 
 .fristen-mode-a-axis-label {
   font-size: 0.85rem;
-  color: #555;
+  color: var(--color-text-muted);
   min-width: 7rem;
   font-weight: 500;
 }
@@ -19326,9 +19364,9 @@ a.fristen-overhaul-rule-source {
   align-items: center;
   gap: 0.3rem;
   padding: 0.25rem 0.65rem;
-  border: 1px solid #d4d4c9;
-  background: #fff;
-  color: #2a2a2a;
+  border: 1px solid var(--color-border-strong);
+  background: var(--color-surface);
+  color: var(--color-text);
   border-radius: 1rem;
   font-size: 0.85rem;
   cursor: pointer;
@@ -19336,14 +19374,14 @@ a.fristen-overhaul-rule-source {
 }
 
 .fristen-mode-a-chip:hover {
-  border-color: #b9c98f;
-  background: #f6fae5;
+  border-color: var(--color-accent-soft-border);
+  background: var(--color-accent-soft-bg);
 }
 
 .fristen-mode-a-chip.is-active {
-  background: #d8ed90;
-  border-color: #98b545;
-  color: #2c3d10;
+  background: var(--color-accent-strong-bg);
+  border-color: var(--color-accent-strong-border);
+  color: var(--color-accent-strong-fg);
   font-weight: 600;
 }
 
@@ -19353,7 +19391,7 @@ a.fristen-overhaul-rule-source {
 
 .fristen-mode-a-chip-loading,
 .fristen-mode-a-chip-empty {
-  color: #888;
+  color: var(--color-text-subtle);
   font-size: 0.85rem;
   font-style: italic;
 }
@@ -19361,24 +19399,24 @@ a.fristen-overhaul-rule-source {
 .fristen-mode-a-inbox {
   margin-top: 0.5rem;
   padding-top: 0.4rem;
-  border-top: 1px dashed #d8d8cd;
+  border-top: 1px dashed var(--color-border);
 }
 
 .fristen-mode-a-inbox-summary {
   cursor: pointer;
-  color: #5f664a;
+  color: var(--color-text-muted);
   font-size: 0.85rem;
   margin-bottom: 0.3rem;
   user-select: none;
 }
 
 .fristen-mode-a-inbox-summary:hover {
-  color: #2a2a2a;
+  color: var(--color-text);
 }
 
 .fristen-mode-a-search {
-  background: #fff;
-  border: 1px solid #d8d8ce;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.7rem;
   padding: 0.6rem 0.9rem;
 }
@@ -19390,7 +19428,7 @@ a.fristen-overhaul-rule-source {
 }
 
 .fristen-mode-a-search-icon {
-  color: #888;
+  color: var(--color-text-subtle);
 }
 
 .fristen-mode-a-search-input {
@@ -19400,12 +19438,12 @@ a.fristen-overhaul-rule-source {
   font-size: 1rem;
   background: transparent;
   padding: 0.3rem 0;
-  color: #1f1f1f;
+  color: var(--color-text);
 }
 
 .fristen-mode-a-results {
-  background: #fff;
-  border: 1px solid #e0e0d4;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.7rem;
   padding: 0.7rem 0.9rem;
 }
@@ -19419,12 +19457,12 @@ a.fristen-overhaul-rule-source {
 
 .fristen-mode-a-results-title {
   font-weight: 600;
-  color: #2a2a2a;
+  color: var(--color-text);
 }
 
 .fristen-mode-a-results-count {
   font-size: 0.85rem;
-  color: #777;
+  color: var(--color-text-subtle);
 }
 
 .fristen-mode-a-result-list {
@@ -19444,16 +19482,16 @@ a.fristen-overhaul-rule-source {
   gap: 0.7rem;
   align-items: center;
   padding: 0.55rem 0.7rem;
-  background: #fafaf6;
-  border: 1px solid #ececde;
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   cursor: pointer;
 }
 
 .fristen-mode-a-result:hover,
 .fristen-mode-a-result:focus {
-  background: #f1f7d8;
-  border-color: #c2d182;
+  background: var(--color-accent-soft-bg);
+  border-color: var(--color-accent-soft-border);
   outline: none;
 }
 
@@ -19467,7 +19505,7 @@ a.fristen-overhaul-rule-source {
 
 .fristen-mode-a-result-title {
   font-weight: 600;
-  color: #1f1f1f;
+  color: var(--color-text);
 }
 
 .fristen-mode-a-result-meta {
@@ -19476,36 +19514,36 @@ a.fristen-overhaul-rule-source {
   gap: 0.4rem;
   align-items: center;
   font-size: 0.8rem;
-  color: #555;
+  color: var(--color-text-muted);
   margin-top: 0.2rem;
 }
 
 .fristen-mode-a-result-pt {
   font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
   padding: 0.05rem 0.45rem;
-  background: #efefe6;
+  background: var(--color-surface-muted);
   border-radius: 0.3rem;
 }
 
 .fristen-mode-a-result-pt-name {
-  color: #555;
+  color: var(--color-text-muted);
 }
 
 .fristen-mode-a-result-juris {
   padding: 0.05rem 0.45rem;
-  background: #d3edb7;
-  color: #38531a;
+  background: var(--color-accent-strong-bg);
+  color: var(--color-accent-strong-fg);
   border-radius: 0.3rem;
   font-weight: 600;
 }
 
 .fristen-mode-a-result-followups {
-  color: #4a6f1f;
+  color: var(--color-accent-fg);
   font-weight: 500;
 }
 
 .fristen-mode-a-result-cta {
-  color: #88a554;
+  color: var(--color-accent-fg);
   font-size: 1.2rem;
 }
 
@@ -19514,13 +19552,13 @@ a.fristen-overhaul-rule-source {
 .fristen-mode-a-result-error {
   list-style: none;
   padding: 0.7rem 0.5rem;
-  color: #888;
+  color: var(--color-text-subtle);
   font-style: italic;
   font-size: 0.9rem;
 }
 
 .fristen-mode-a-result-error {
-  color: #732f25;
+  color: var(--status-red-fg);
 }
 
 @media (max-width: 600px) {
@@ -19545,8 +19583,8 @@ a.fristen-overhaul-rule-source {
  * ==================================================================== */
 
 .fristen-wizard-root {
-  background: #fff;
-  border: 1px solid #e0e0d4;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
   border-radius: 0.7rem;
   padding: 1rem 1.1rem;
 }
@@ -19558,13 +19596,13 @@ a.fristen-overhaul-rule-source {
 .fristen-wizard-title {
   margin: 0 0 0.25rem 0;
   font-size: 1.15rem;
-  color: #2a2a2a;
+  color: var(--color-text);
 }
 
 .fristen-wizard-hint {
   margin: 0;
   font-size: 0.85rem;
-  color: #666;
+  color: var(--color-text-muted);
 }
 
 .fristen-wizard-rows {
@@ -19574,19 +19612,19 @@ a.fristen-overhaul-rule-source {
 }
 
 .fristen-wizard-row {
-  background: #fafaf6;
-  border: 1px solid #e0e0d4;
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
   border-radius: 0.6rem;
   padding: 0.55rem 0.7rem;
 }
 
 .fristen-wizard-row.is-active {
-  border-color: #b1c468;
-  box-shadow: 0 0 0 2px rgba(198, 244, 28, 0.15);
+  border-color: var(--color-accent-strong-border);
+  box-shadow: 0 0 0 2px rgb(var(--hlc-lime-rgb) / 0.15);
 }
 
 .fristen-wizard-row.is-from-project {
-  background: #f4f8e0;
+  background: var(--color-accent-soft-bg);
 }
 
 .fristen-wizard-row.is-implicit {
@@ -19607,8 +19645,8 @@ a.fristen-overhaul-rule-source {
   width: 1.6rem;
   height: 1.6rem;
   border-radius: 50%;
-  background: #c6f41c;
-  color: #2a2a2a;
+  background: var(--color-accent);
+  color: var(--color-accent-dark);
   font-weight: 600;
   font-size: 0.85rem;
 }
@@ -19622,32 +19660,32 @@ a.fristen-overhaul-rule-source {
   font-weight: 600;
 }
 
-.fristen-wizard-row-badge--filter    { background: #d6e4f0; color: #1c4567; }
-.fristen-wizard-row-badge--qualifier { background: #f5e1a8; color: #6c4905; }
+.fristen-wizard-row-badge--filter    { background: var(--status-blue-bg); color: var(--status-blue-fg); }
+.fristen-wizard-row-badge--qualifier { background: var(--status-amber-bg); color: var(--status-amber-fg-2); }
 
 .fristen-wizard-row-label {
   font-weight: 500;
-  color: #2a2a2a;
+  color: var(--color-text);
 }
 
 .fristen-wizard-row-anno {
   font-size: 0.75rem;
-  color: #5d6e2a;
-  background: #ebf4c9;
+  color: var(--color-accent-soft-fg);
+  background: var(--color-accent-soft-bg);
   padding: 0.05rem 0.4rem;
   border-radius: 0.3rem;
 }
 
 .fristen-wizard-row-answer {
   margin-left: auto;
-  color: #1f1f1f;
+  color: var(--color-text);
   font-weight: 500;
 }
 
 .fristen-wizard-row-edit {
   background: transparent;
   border: 0;
-  color: #4a6f1f;
+  color: var(--color-accent-fg);
   cursor: pointer;
   font-size: 0.85rem;
   padding: 0.15rem 0.45rem;
@@ -19655,7 +19693,7 @@ a.fristen-overhaul-rule-source {
 }
 
 .fristen-wizard-row-edit:hover {
-  background: #eef4dd;
+  background: var(--color-accent-soft-bg);
 }
 
 .fristen-wizard-row-body {
@@ -19671,7 +19709,7 @@ a.fristen-overhaul-rule-source {
 .fristen-wizard-empty,
 .fristen-wizard-probe {
   font-size: 0.85rem;
-  color: #888;
+  color: var(--color-text-subtle);
   font-style: italic;
 }