fix(theme): readable on-accent text color and unified accent aliases

Solid-accent buttons used the page text color (--lora-text) or white,
which falls below WCAG AA on the mid-bright accent (L 52-72%) in every
theme/preset — e.g. ~1.7:1 in dark+solarized, making primary buttons
hard to read. Add --color-accent-contrast (dark, low-chroma, same hue,
derived per preset) aliased as --text-on-accent, and switch ~90
accent-background selectors (primary/confirm buttons, nav items, chips,
badges, checkmarks) to it.

Also define the previously dangling --lora-accent-l/c/h, --lora-accent-hover
and --lora-accent-light aliases (fixing ~40 dead declarations), replace the
hardcoded rgba(--lora-accent-rgb, 79 70 229) fallbacks with oklch channel
syntax, and add the missing margin above .template-custom-input in
settings.

static/css/base.css

@@ -64,6 +64,14 @@ body {
     --border-color: var(--border-base);
 
     --lora-accent: var(--color-accent);
+    /* Channel aliases: referenced across components (oklch tints, focus
+       rings); previously undeclared, so those declarations silently dropped. */
+    --lora-accent-l: var(--color-accent-l);
+    --lora-accent-c: var(--color-accent-c);
+    --lora-accent-h: var(--color-accent-h);
+    --lora-accent-hover: var(--color-accent-hover);
+    --lora-accent-light: var(--color-accent-subtle);
+    --text-on-accent: var(--color-accent-contrast);
     --lora-surface: var(--bg-elevated);
     --lora-surface-solid: var(--bg-elevated-solid);
     --lora-border: var(--border-subtle);
@@ -93,6 +101,14 @@ body {
     --border-color: var(--border-base);
 
     --lora-accent: var(--color-accent);
+    /* Channel aliases: referenced across components (oklch tints, focus
+       rings); previously undeclared, so those declarations silently dropped. */
+    --lora-accent-l: var(--color-accent-l);
+    --lora-accent-c: var(--color-accent-c);
+    --lora-accent-h: var(--color-accent-h);
+    --lora-accent-hover: var(--color-accent-hover);
+    --lora-accent-light: var(--color-accent-subtle);
+    --text-on-accent: var(--color-accent-contrast);
     --lora-surface: var(--bg-elevated);
     --lora-surface-solid: var(--bg-elevated-solid);
     --lora-border: var(--border-subtle);

static/css/components/alphabet-bar.css

@@ -105,14 +105,14 @@
 
 .letter-chip:hover {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     transform: scale(1.1);
     box-shadow: var(--shadow-md);
 }
 
 .letter-chip.active {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
 }
 

static/css/components/banner.css

@@ -80,7 +80,7 @@
 /* Primary Action Button */
 .banner-action-primary {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
 }
 
@@ -99,7 +99,7 @@
 
 .banner-action-secondary:hover {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
     transform: translateY(-1px);
     box-shadow: var(--shadow-md);
@@ -114,7 +114,7 @@
 
 .banner-action-tertiary:hover {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     transform: translateY(-1px);
 }
 

static/css/components/batch-import-modal.css

@@ -93,7 +93,7 @@
     content: '\f00c';
     font-family: 'Font Awesome 6 Free', sans-serif;
     font-weight: 900;
-    color: var(--lora-text);
+    color: var(--text-on-accent);
     font-size: 12px;
 }
 
@@ -120,7 +120,7 @@
     white-space: nowrap;
     padding: 8px 16px;
     background: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
     border: none;
     border-radius: var(--border-radius-xs);
     cursor: pointer;
@@ -134,7 +134,7 @@
 /* Dark theme adjustments for input-with-button */
 [data-theme="dark"] .input-with-button button {
     background: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
 }
 
 [data-theme="dark"] .input-with-button button:hover {

static/css/components/bulk.css

@@ -13,7 +13,7 @@
     width: 24px;
     height: 24px;
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-radius: 50%;
     display: flex;
     align-items: center;

static/css/components/card.css

@@ -245,7 +245,7 @@
 
 .show-content-btn {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border: none;
     border-radius: var(--border-radius-xs);
     padding: 4px var(--space-1);
@@ -805,7 +805,7 @@ body.hide-card-version .hl-badge {
     top: 8px;
     right: 8px;
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-radius: var(--border-radius-xs);
     padding: 3px 6px;
     font-size: 0.75em;

static/css/components/download-batch-summary.css

@@ -45,7 +45,7 @@
     align-items: center;
     gap: var(--space-1);
     background: var(--lora-accent, #4f46e5);
-    color: #fff;
+    color: var(--text-on-accent);
     border: none;
     border-radius: var(--border-radius-sm);
     padding: var(--space-2) var(--space-3);

static/css/components/duplicates.css

@@ -277,7 +277,7 @@
     top: 10px;
     left: 10px;
     background: oklch(var(--color-accent-l) var(--color-accent-c) var(--color-accent-h));
-    color: white;
+    color: var(--text-on-accent);
     font-size: 12px;
     padding: 2px 6px;
     border-radius: var(--border-radius-xs);
@@ -616,7 +616,7 @@ html[data-theme="dark"] .help-tooltip {
 /* Make the active duplicates button more prominent */
 #findDuplicatesBtn.active {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
     box-shadow: 0 0 0 2px oklch(var(--color-accent-l) var(--color-accent-c) var(--color-accent-h) / 0.25);
     position: relative;

static/css/components/filter-indicator.css

@@ -4,7 +4,7 @@
     align-items: center;
     gap: 6px;
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-radius: var(--border-radius-xs);
     padding: 4px 10px;
     transition: var(--transition-base);

static/css/components/header.css

@@ -104,7 +104,7 @@
 
 .nav-item.active {
   background-color: var(--lora-accent);
-  color: white;
+  color: var(--text-on-accent);
 }
 
 /* Header search - Centered with VS Code command palette style */
@@ -354,7 +354,7 @@
 
 .header-controls>div:hover {
   background: var(--lora-accent);
-  color: white;
+  color: var(--text-on-accent);
   transform: translateY(-2px);
 }
 

static/css/components/import-modal.css

@@ -69,7 +69,7 @@
 
 .toggle-btn.active {
     background: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
 }
 
 .toggle-btn:hover:not(.active) {
@@ -433,7 +433,7 @@
     white-space: nowrap;
     padding: 8px 16px;
     background: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
     border: none;
     border-radius: var(--border-radius-xs);
     cursor: pointer;

static/css/components/initialization.css

@@ -125,7 +125,7 @@
 
 .stage-item.active .stage-icon {
   background: var(--lora-accent);
-  color: white;
+  color: var(--text-on-accent);
 }
 
 .stage-item.completed .stage-icon {

static/css/components/lora-modal/lora-modal.css

@@ -473,7 +473,7 @@
 
 .modal-content .back-to-top:hover {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     transform: translateY(-2px);
 }
 
@@ -1262,7 +1262,7 @@
 
 .creator-placeholder {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     display: flex;
     align-items: center;
     justify-content: center;

static/css/components/lora-modal/preset-tags.css

@@ -56,7 +56,7 @@
 .add-preset-btn {
   padding: calc(var(--space-1) * 0.5) var(--space-2);
   background: var(--lora-accent);
-  color: var(--lora-text);
+  color: var(--text-on-accent);
   border: none;
   border-radius: var(--border-radius-xs);
   cursor: pointer;

static/css/components/lora-modal/showcase.css

@@ -330,7 +330,7 @@
 
 .showcase-layout-toggle .layout-toggle-btn.active {
   background: var(--lora-accent);
-  color: var(--lora-text);
+  color: var(--text-on-accent);
 }
 
 /* Vertical list layout (showcase_layout = vertical): every example stacked
@@ -446,7 +446,7 @@
 
 .media-control-btn.set-preview-btn:hover {
   background: var(--lora-accent);
-  color: white;
+  color: var(--text-on-accent);
   border-color: var(--lora-accent);
 }
 
@@ -805,7 +805,7 @@
 
 .select-files-btn {
   background: var(--lora-accent);
-  color: var(--lora-text);
+  color: var(--text-on-accent);
   border: none;
   border-radius: var(--border-radius-xs);
   padding: var(--space-2) var(--space-3);
@@ -891,7 +891,7 @@
 .setup-settings-btn {
   margin-top: var(--space-2);
   background: var(--lora-accent) !important;
-  color: var(--lora-text) !important;
+  color: var(--text-on-accent) !important;
 }
 
 .setup-settings-btn:hover {

static/css/components/lora-modal/tag.css

@@ -62,7 +62,7 @@
 
 .model-tag-more {
   background: var(--lora-accent);
-  color: var(--lora-text);
+  color: var(--text-on-accent);
   border-radius: var(--border-radius-xs);
   padding: 2px 8px;
   font-size: 0.75em;

static/css/components/lora-modal/triggerwords.css

@@ -140,7 +140,7 @@
 
 .token-badge {
   background: var(--lora-accent);
-  color: white;
+  color: var(--text-on-accent);
   font-size: 0.7em;
   padding: 2px 5px;
   border-radius: 8px;

static/css/components/lora-modal/versions.css

@@ -66,7 +66,7 @@
 
 .versions-toolbar-btn-primary {
     background: var(--lora-accent);
-    color: #fff;
+    color: var(--text-on-accent);
     border-color: color-mix(in oklch, var(--lora-accent) 70%, transparent);
 }
 
@@ -345,7 +345,7 @@
 
 .version-action-primary {
     background: var(--lora-accent);
-    color: #fff;
+    color: var(--text-on-accent);
     border-color: color-mix(in oklch, var(--lora-accent) 65%, transparent);
 }
 

static/css/components/menu.css

@@ -24,7 +24,7 @@
 .context-menu-item:hover,
 .context-menu-item:focus-visible {
     background-color: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
     outline: none;
 }
 
@@ -78,7 +78,7 @@
    the accent background would otherwise wash the muted colour out. */
 .context-menu-item:hover .context-menu-count,
 .context-menu-item:focus-visible .context-menu-count {
-    color: var(--lora-text);
+    color: var(--text-on-accent);
     opacity: 0.8;
 }
 
@@ -212,7 +212,7 @@
 
 .nsfw-level-btn.active {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
 }
 
@@ -251,7 +251,7 @@
 
 .node-item:hover {
     background-color: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
 }
 
 .node-icon-indicator {
@@ -282,7 +282,7 @@
 
 .send-all-item:hover {
     background-color: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
 }
 
 .send-all-item i {

static/css/components/modal/_base.css

@@ -114,7 +114,7 @@ body.modal-open {
 /* Style for exclude button - different from delete button */
 .exclude-btn, .confirm-btn {
     background: var(--lora-accent, #4f46e5);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .cancel-btn:hover,
@@ -187,7 +187,7 @@ body.modal-open {
     gap: 8px;
     padding: var(--space-1) var(--space-2);
     background-color: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
     border: none;
     border-radius: var(--border-radius-sm);
     cursor: pointer;
@@ -198,7 +198,7 @@ body.modal-open {
 .primary-btn:hover,
 .primary-btn:focus-visible {
     background-color: oklch(from var(--lora-accent) l c h / 85%);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
     outline: none;
 }
 
@@ -229,7 +229,7 @@ body.modal-open {
     opacity: 0.5;
     cursor: not-allowed;
     background-color: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
     pointer-events: none;
 }
 
@@ -668,7 +668,7 @@ button:disabled,
     content: '\f00c';
     font-family: 'Font Awesome 6 Free', sans-serif;
     font-weight: 900;
-    color: var(--lora-text);
+    color: var(--text-on-accent);
     font-size: 12px;
 }
 

static/css/components/modal/download-modal.css

@@ -373,7 +373,7 @@
 
 .create-folder-form button.confirm {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
 }
 
@@ -1139,7 +1139,7 @@
 
 .routing-override-option.active {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
     opacity: 1;
     cursor: default;

static/css/components/modal/help-modal.css

@@ -144,7 +144,7 @@
   font-size: 0.7em;
   font-weight: 600;
   background-color: var(--lora-accent);
-  color: var(--lora-text);
+  color: var(--text-on-accent);
   padding: 2px 6px;
   border-radius: 10px;
   margin-left: 8px;
@@ -171,7 +171,7 @@
 .replay-tutorial-btn .new-content-badge {
   display: none;
   background-color: rgba(255, 255, 255, 0.22);
-  color: #fff;
+  color: var(--text-on-accent);
   box-shadow: none;
   margin-left: 2px;
 }
@@ -227,7 +227,7 @@
   font-size: 0.75em;
   font-weight: 500;
   background-color: var(--lora-accent);
-  color: var(--lora-text);
+  color: var(--text-on-accent);
   padding: 4px 8px;
   border-radius: 12px;
   margin-left: 10px;
@@ -306,7 +306,7 @@
   cursor: pointer;
   transition: var(--transition-base);
   background-color: var(--lora-accent);
-  color: white;
+  color: var(--text-on-accent);
   text-decoration: none;
   border: none;
 }
@@ -343,7 +343,7 @@
   cursor: pointer;
   transition: var(--transition-base);
   background-color: var(--lora-accent);
-  color: white;
+  color: var(--text-on-accent);
   border: none;
 }
 

static/css/components/modal/settings-modal.css

@@ -15,7 +15,7 @@
 
 .settings-toggle:hover {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     transform: translateY(-2px);
 }
 
@@ -86,13 +86,13 @@
 }
 
 .settings-nav-item:hover {
-    background: rgba(var(--lora-accent-rgb, 79, 70, 229), 0.1);
+    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
     color: var(--lora-accent);
 }
 
 .settings-nav-item.active {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     font-weight: 600;
 }
 
@@ -160,7 +160,7 @@
 .settings-search-input:focus {
     border-color: var(--lora-accent);
     outline: none;
-    box-shadow: 0 0 0 2px rgba(var(--lora-accent-rgb, 79, 70, 229), 0.1);
+    box-shadow: 0 0 0 2px oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
 }
 
 .settings-search-input::placeholder {
@@ -193,7 +193,7 @@
 
 /* Search Highlight Styles */
 .settings-search-highlight {
-    background-color: rgba(var(--lora-accent-rgb, 79, 70, 229), 0.3);
+    background-color: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.3);
     color: var(--lora-accent);
     padding: 0 2px;
     border-radius: 2px;
@@ -265,7 +265,7 @@
 }
 
 .settings-action-link:focus-visible {
-    box-shadow: 0 0 0 2px rgba(var(--lora-accent-rgb, 79, 70, 229), 0.2);
+    box-shadow: 0 0 0 2px oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.2);
 }
 
 /* Settings Links */
@@ -296,7 +296,7 @@
 
 .settings-link:hover {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     transform: translateY(-2px);
 }
 
@@ -364,7 +364,7 @@
 .api-key-input input:focus {
     border-color: var(--lora-accent);
     outline: none;
-    box-shadow: 0 0 0 2px rgba(var(--lora-accent-rgb, 79, 70, 229), 0.1);
+    box-shadow: 0 0 0 2px oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
 }
 
 .api-key-input .toggle-visibility {
@@ -491,7 +491,7 @@
 .text-input-wrapper input:focus {
     border-color: var(--lora-accent);
     outline: none;
-    box-shadow: 0 0 0 2px rgba(var(--lora-accent-rgb, 79, 70, 229), 0.1);
+    box-shadow: 0 0 0 2px oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
 }
 
 /* Dark theme specific adjustments */
@@ -577,7 +577,7 @@
 .base-model-skip-search:focus {
     border-color: var(--lora-accent);
     outline: none;
-    box-shadow: 0 0 0 2px rgba(var(--lora-accent-rgb, 79, 70, 229), 0.1);
+    box-shadow: 0 0 0 2px oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
 }
 
 .base-model-skip-list {
@@ -602,7 +602,7 @@
 
 .base-model-skip-option:hover {
     border-color: var(--lora-accent);
-    background-color: rgba(var(--lora-accent-rgb, 79, 70, 229), 0.05);
+    background-color: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.05);
 }
 
 .base-model-skip-option input {
@@ -623,7 +623,7 @@
 .priority-tags-input:focus {
     border-color: var(--lora-accent);
     outline: none;
-    box-shadow: 0 0 0 2px rgba(var(--lora-accent-rgb, 79, 70, 229), 0.1);
+    box-shadow: 0 0 0 2px oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
 }
 
 .priority-tags-item {
@@ -681,7 +681,7 @@
 
 .priority-tags-example code {
     font-family: var(--font-mono);
-    background-color: rgba(var(--lora-accent-rgb, 79, 70, 229), 0.12);
+    background-color: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.12);
     padding: 2px 6px;
     border-radius: var(--border-radius-xs);
     display: inline-block;
@@ -1268,7 +1268,7 @@ input:checked + .toggle-slider:before {
     gap: 6px;
     padding: 6px 12px;
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border: none;
     border-radius: var(--border-radius-xs);
     cursor: pointer;
@@ -1315,7 +1315,7 @@ input:checked + .toggle-slider:before {
 .path-value-input:focus {
     border-color: var(--lora-accent);
     outline: none;
-    box-shadow: 0 0 0 2px rgba(var(--lora-accent-rgb, 79, 70, 229), 0.1);
+    box-shadow: 0 0 0 2px oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
 }
 
 .remove-mapping-btn {
@@ -1442,7 +1442,7 @@ input:checked + .toggle-slider:before {
 .placeholder-tag {
     display: inline-block;
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     padding: 2px 6px;
     border-radius: 3px;
     font-family: var(--font-mono);
@@ -1468,6 +1468,9 @@ input:checked + .toggle-slider:before {
 
 .template-custom-input {
     width: 96%;
+    /* Space from the label/apply-button row above; the row has no bottom
+       margin, so without this the input sits flush against the button. */
+    margin-top: var(--space-1);
     padding: 6px 10px;
     border-radius: var(--border-radius-xs);
     border: 1px solid var(--border-color);
@@ -1482,7 +1485,7 @@ input:checked + .toggle-slider:before {
 .template-custom-input:focus {
     border-color: var(--lora-accent);
     outline: none;
-    box-shadow: 0 0 0 2px rgba(var(--lora-accent-rgb, 79, 70, 229), 0.1);
+    box-shadow: 0 0 0 2px oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
 }
 
 .template-custom-input::placeholder {
@@ -1646,7 +1649,7 @@ input:checked + .toggle-slider:before {
 .extra-folder-path-row .path-controls .extra-folder-path-input:focus {
     border-color: var(--lora-accent);
     outline: none;
-    box-shadow: 0 0 0 2px rgba(var(--lora-accent-rgb, 79, 70, 229), 0.1);
+    box-shadow: 0 0 0 2px oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
 }
 
 .extra-folder-path-row .path-controls .extra-folder-path-input.has-error {
@@ -1713,7 +1716,7 @@ input:checked + .toggle-slider:before {
 
 #settingsModal .browse-path-btn:hover {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 /* Inset variant (static path fields): the button floats inside the right

static/css/components/modal/support-modal.css

@@ -105,7 +105,7 @@
 
 .social-link:hover {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     transform: translateY(-2px);
 }
 
@@ -253,7 +253,7 @@
 }
 
 .social-link:hover .civitai-icon {
-    color: white; /* Icon color changes to white on hover */
+    color: var(--text-on-accent); /* Icon color flips to the on-accent foreground on hover */
 }
 
 /* Enhanced hover visual feedback */

static/css/components/modal/update-modal.css

@@ -42,7 +42,7 @@
     padding: 0 0.4rem;
     border-radius: 999px;
     background: var(--lora-accent);
-    color: #fff;
+    color: var(--text-on-accent);
     font-size: 0.75rem;
     font-weight: 600;
     align-items: center;
@@ -163,7 +163,7 @@
 
 .update-link:hover {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     transform: translateY(-2px);
 }
 
@@ -274,7 +274,7 @@
 
 .changelog-item .latest-badge {
     background-color: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     padding: 2px 8px;
     border-radius: 12px;
     font-size: 0.75em;
@@ -384,12 +384,12 @@
 
 .channel-btn.active {
     background: var(--lora-accent, #4285F4);
-    color: #fff;
+    color: var(--text-on-accent);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
 .channel-btn.active i {
-    color: #fff;
+    color: var(--text-on-accent);
 }
 
 .channel-btn i {
@@ -456,7 +456,7 @@
     border: none;
     border-radius: 6px;
     background: var(--lora-accent, #4285F4);
-    color: #fff;
+    color: var(--text-on-accent);
     cursor: pointer;
     font-size: 0.9em;
     font-weight: 500;
@@ -614,7 +614,7 @@
 .banner-history-action.banner-history-action-primary {
     background: var(--lora-accent);
     border-color: var(--lora-accent);
-    color: #fff;
+    color: var(--text-on-accent);
 }
 
 .banner-history-action.banner-history-action-secondary {

static/css/components/recipe-modal.css

@@ -423,7 +423,7 @@
 
 .source-url-save-btn {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .source-url-cancel-btn:hover {
@@ -1268,7 +1268,7 @@
 
 .reconnect-confirm-btn {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .reconnect-cancel-btn:hover {
@@ -1517,7 +1517,7 @@
 
 .resource-action.primary {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
 }
 

static/css/components/search-filter.css

@@ -129,7 +129,7 @@
     top: -6px;
     right: -6px;
     background-color: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     width: 16px;
     height: 16px;
     border-radius: 50%;
@@ -213,7 +213,7 @@
 .filter-search-input:focus {
     outline: none;
     border-color: var(--lora-accent);
-    box-shadow: 0 0 0 2px rgba(var(--lora-accent-rgb, 76, 175, 80), 0.15);
+    box-shadow: 0 0 0 2px oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.15);
 }
 
 .filter-empty-state {
@@ -257,7 +257,7 @@
 
 .filter-tag.active {
     background-color: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
 }
 
@@ -309,7 +309,7 @@
 
 .tag-filter.active .tag-count {
     background: rgba(255, 255, 255, 0.3);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .tags-loading, .tags-error, .no-tags {
@@ -493,7 +493,7 @@
 
 .search-option-tag.active {
     background-color: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
 }
 
@@ -537,12 +537,12 @@
 }
 
 .filter-preset.active .preset-name {
-    color: white;
+    color: var(--text-on-accent);
     font-weight: 600;
 }
 
 .filter-preset.active .preset-delete-btn {
-    color: white;
+    color: var(--text-on-accent);
     opacity: 0;
 }
 
@@ -552,7 +552,7 @@
 
 .filter-preset.active .preset-delete-btn:hover {
     opacity: 1;
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .preset-name {
@@ -743,7 +743,7 @@
 
 .tag-logic-option.active {
     background-color: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     opacity: 1;
 }
 

static/css/components/shared.css

@@ -3,7 +3,7 @@
     display: inline-flex;
     align-items: center;
     background: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
     padding: 4px 8px;
     border-radius: var(--border-radius-xs);
     font-size: 0.8em;

static/css/components/shared/edit-metadata.css

@@ -257,7 +257,7 @@ body.reorder-drag-active * {
 .append-tags-btn,
 .replace-tags-btn {
   background: var(--lora-accent) !important;
-  color: white !important;
+  color: var(--text-on-accent) !important;
   border-color: var(--lora-accent) !important;
 }
 
@@ -271,7 +271,7 @@ body.reorder-drag-active * {
 /* Specific styling for bulk tag action buttons */
 .bulk-append-tags-btn {
   background: var(--lora-accent) !important;
-  color: white !important;
+  color: var(--text-on-accent) !important;
   border-color: var(--lora-accent) !important;
 }
 

static/css/components/sidebar.css

@@ -140,7 +140,7 @@
 }
 
 .sidebar-hidden-indicator:hover i {
-    color: white;
+    color: var(--text-on-accent);
 }
 
 /* Subtle breathing animation for first-time discovery */

static/css/components/toast.css

@@ -1,7 +1,7 @@
 /* Update toast animation for trigger word copy */
 .toast.toast-copy {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border: none;
     padding: 8px 16px;
     font-size: 0.9em;
@@ -98,7 +98,7 @@
 
 .toast-action-btn:hover {
     background: var(--lora-accent);
-    color: #fff;
+    color: var(--text-on-accent);
 }
 
 .toast-countdown {

static/css/layout.css

@@ -159,7 +159,7 @@ body.sticky-controls .sticky-topbar {
 
 .control-group button.favorite-filter.active {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .control-group button.favorite-filter i {
@@ -174,17 +174,17 @@ body.sticky-controls .sticky-topbar {
 
 .control-group button.update-filter.active {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .control-group button.update-filter.active i {
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .update-filter-group .dropdown-main.update-filter.active + .dropdown-toggle {
     background: var(--lora-accent);
     border-color: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
 }
 
 .update-filter-group .dropdown-main.update-filter.active + .dropdown-toggle i {
@@ -194,7 +194,7 @@ body.sticky-controls .sticky-topbar {
 /* Active state for buttons that can be toggled */
 .control-group button.active {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
 }
 
@@ -540,7 +540,7 @@ body.sticky-controls .sticky-topbar {
 
 .back-to-top:hover {
     background: var(--lora-accent);
-    color: white;
+    color: var(--text-on-accent);
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
 }

static/css/onboarding.css

@@ -110,13 +110,13 @@
 
 .onboarding-btn:hover {
     background: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
 }
 
 .onboarding-btn.primary {
     background: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
     border-color: var(--lora-accent);
 }
 
@@ -189,7 +189,7 @@
 .language-option.selected {
     border-color: var(--lora-accent);
     background: var(--lora-accent);
-    color: var(--lora-text);
+    color: var(--text-on-accent);
 }
 
 .language-flag {

static/css/tokens/colors.css

@@ -24,6 +24,13 @@
   --color-accent-border: oklch(var(--color-accent-l) var(--color-accent-c) var(--color-accent-h) / 0.25);
   --color-accent-transparent: oklch(var(--color-accent-l) var(--color-accent-c) var(--color-accent-h) / 0.6);
 
+  /* Text/icon color on top of a solid accent background. The accent is a
+     mid-to-bright color (L 52-72%) in every theme/preset, so a dark,
+     low-chroma color of the same hue reads far better than white or the
+     page text color (WCAG: dark on L60% accent ≈ 4.4:1, white ≈ 3.5:1).
+     Derived from --color-accent-h so every preset picks it up. */
+  --color-accent-contrast: oklch(20% 0.02 var(--color-accent-h));
+
   --color-warning: oklch(var(--color-warning-l) var(--color-warning-c) var(--color-warning-h));
   --color-warning-bg: oklch(var(--color-warning-l) var(--color-warning-c) var(--color-warning-h) / 0.15);
   --color-warning-border: oklch(var(--color-warning-l) var(--color-warning-c) var(--color-warning-h) / 0.3);