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/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 {