From 23075dddb11dd971ec0c73ce2b47d0b446e32d2e Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Fri, 29 May 2026 21:29:54 +0300
Subject: [PATCH] fix(bg): light text on dark-tone backgrounds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dark veil was right (deep navy at 78%), but every page chrome
element below it inherited light-theme text colors and faded to
invisible — 'Магазин наград' header, shop filter buttons, achievement
group titles, balance counter etc.

Targeted overrides for body[data-bg-tone='dark']: only the elements
that sit directly on the veil get a light text color. White cards
(.shop-item, .ach-item, .ep-card) keep their dark text intact.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/css/ls.css | 46 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/frontend/css/ls.css b/frontend/css/ls.css
index 1c325ee..377da8e 100644
--- a/frontend/css/ls.css
+++ b/frontend/css/ls.css
@@ -1233,8 +1233,52 @@ body.no-gamification [data-gamified] { display: none !important; }
 /* On the 'dark' preset we want a darker veil so light content still
    pops. body[data-bg-tone="dark"] is set by api.js for dark slugs. */
 body[data-bg-tone="dark"] #ls-bg-veil {
-  background: rgba(15, 23, 42, 0.55);
+  background: rgba(11, 17, 32, 0.78);
 }
+
+/* ── Dark-tone readability overrides ──
+   When a dark background is active the page chrome (headings, filter
+   tabs, section titles, breadcrumbs, balance counters) sits directly
+   on the dark veil and inherits the light-theme text colors — which
+   become invisible. Override only elements that don't have an opaque
+   container of their own. White cards (`.shop-item`, `.ach-item`,
+   `.ep-card`, etc.) keep their dark text unchanged. */
+body[data-bg-tone="dark"] {
+  color: #e6e9f2;
+}
+body[data-bg-tone="dark"] .shop-title,
+body[data-bg-tone="dark"] .ach-group-title,
+body[data-bg-tone="dark"] .ach-group-count,
+body[data-bg-tone="dark"] .ach-sum-chip,
+body[data-bg-tone="dark"] .shop-balance,
+body[data-bg-tone="dark"] .filter-bar,
+body[data-bg-tone="dark"] .filter-tab,
+body[data-bg-tone="dark"] .p-stat-label,
+body[data-bg-tone="dark"] .p-stat-val,
+body[data-bg-tone="dark"] .profile-name,
+body[data-bg-tone="dark"] .frames-section > h4,
+body[data-bg-tone="dark"] .p-pane > h2,
+body[data-bg-tone="dark"] .p-pane > h3,
+body[data-bg-tone="dark"] .p-section > h2,
+body[data-bg-tone="dark"] .p-section > h3 {
+  color: #f3f4f6;
+}
+body[data-bg-tone="dark"] .shop-filter:not(.active) {
+  color: rgba(243, 244, 246, 0.78);
+}
+body[data-bg-tone="dark"] .shop-filter:not(.active):hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.08);
+}
+body[data-bg-tone="dark"] .ach-group-head {
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+body[data-bg-tone="dark"] .ach-group-count,
+body[data-bg-tone="dark"] .shop-balance,
+body[data-bg-tone="dark"] .frame-unlock-hint {
+  color: rgba(230, 233, 242, 0.72);
+}
+/* Sidebar already has its own opaque background — leave it alone. */
 .bg-preview {
   position: relative;
   width: 100%;