/* platform-theme.css — v2.0 Platform Light Mode. Token-swap light theme, mirroring SetlistForge's proven data-sf-theme pattern but inverted (light = new default; dark = untouched base). Mechanism (see ROADMAP Phase 38 / PROJECT.md): - The existing dark rules in platform.css/platform-views.css are the BASE (`.p-shell` tokens, no override) — so dark = byte-for-byte preserved (THEME-04 regression-safe by construction). - `html[data-pf-theme="light"]` redefines the same `.p-shell`/`.p-toast` tokens to warm-neutral light values (THEME-01: light is default via the flash-free script in layouts/app.blade.php). - The handoff's `.app.light …` component contrast overrides are remapped onto the platform's `.p-*` selectors. We do NOT adopt the handoff's `.app`/`.tile`/`.panel` class scheme — only the palette + the contrast tunings. Source palette + overrides: platform-lightmode/project/platform.css (`.app.light` block, ~lines 589–790). Every value here is a direct port or a faithful remap onto `.p-*`; nothing is invented. */ /* ═══════════════════════════ TOKEN OVERRIDE ═══════════════════════════ */ /* Scope matches platform.css (.p-shell, .p-toast) so tokens resolve everywhere the dark base does — including JS-appended toasts. The ancestor selector (html[data-pf-theme="light"]) is what the head script + platform-theme.js toggle — toggling it flips every token at once. */ html[data-pf-theme="light"] .p-shell, html[data-pf-theme="light"] .p-toast{ /* BARE WHITE base — every surface is pure white; separation comes from thin neutral borders, not tone or shadow. */ --shell:#ffffff; /* content page */ --rail:#ffffff; /* sidebar */ --tile:#ffffff; /* cards / rows */ --tile-2:#f6f6f4; /* faint fill for hovers / inputs */ --field:#ffffff; /* form fields */ --line:#e5e5e2; --line-soft:#eeeeec; /* text — near-black ink on white (all ≥4.5:1) */ --text:#1c1b18; /* ~16:1 */ --muted:#5a564d; /* ~7:1 */ --faint:#76716a; /* ~4.9:1 */ /* status — darkened so they read on white as both text + tints */ --ok:#2f7d4e; --danger:#bb5439; /* accent (kept = #e3a948); bright variant darkened for ≥4.5:1 when used as text on pale tints; dim/line cut with white instead of transparent so they read as solid washes on white. */ --acc-bright:color-mix(in oklab, var(--accent) 60%, #17110a); --acc-dim:color-mix(in oklab, var(--accent) 14%, #fff); --acc-line:color-mix(in oklab, var(--accent) 40%, #fff); --acc-glow:color-mix(in oklab, var(--accent) 30%, transparent); } /* ───────────────────────── flat surfaces (no resting elevation) ───────── */ html[data-pf-theme="light"] .p-tile, html[data-pf-theme="light"] .p-promo, html[data-pf-theme="light"] .p-panel, html[data-pf-theme="light"] .p-side-storage, html[data-pf-theme="light"] .p-support-card{box-shadow:none;} /* subtle hover lift on tool tiles keeps them feeling interactive */ html[data-pf-theme="light"] .p-tile:hover{ box-shadow:0 8px 24px -20px rgba(20,20,20,.3), 0 0 0 1px color-mix(in oklab,var(--tc) 22%,transparent); } /* mobile drawer retains its off-canvas shadow (separator from the page) */ @media (max-width:920px){ html[data-pf-theme="light"] .p-side{box-shadow:0 0 60px -10px rgba(20,20,20,.22);} } /* drop the warm gradient washes on promo + support card → flat white */ html[data-pf-theme="light"] .p-promo, html[data-pf-theme="light"] .p-support-card{background:var(--tile);} /* ═══════════════════════════ TOPBAR ═══════════════════════════ */ /* accent used as text → swap to the darkened amber for ≥4.5:1 on white. SHELL-01: brand wordmark, log out, Ko-fi glyph, user name (p-who already inherits --muted ≈ 7:1). */ html[data-pf-theme="light"] .p-brand .wm{color:var(--acc-bright);} /* brand mark glyph (16px icon in a 30x30 amber-ringed box): raw --accent is 2.09:1 on the white box interior — fails the 3:1 large/UI bar. Use acc-bright to match the wordmark. */ html[data-pf-theme="light"] .p-brand .mark{color:var(--acc-bright);border-color:var(--acc-bright);} html[data-pf-theme="light"] .p-logout{ color:var(--acc-bright); border-bottom-color:color-mix(in oklab,var(--accent) 45%,#fff); } /* p-logout:hover must STAY acc-bright (the raw --accent is 2.09:1 on white, fails ≥4.5:1 for normal text). */ html[data-pf-theme="light"] .p-logout:hover{color:var(--acc-bright);border-bottom-color:var(--accent);} /* Ko-fi topbar button stays warm-red but darkens the glyph for 5.17:1. */ html[data-pf-theme="light"] .p-tbtn.kofi{color:#b0503c;} /* Shop topbar button uses acc-bright text (5.19:1) + a honey border; its hover honey-wash bg keeps the same text. */ html[data-pf-theme="light"] .p-tbtn.shop{color:var(--acc-bright);border-color:var(--acc-line);} /* Theme toggle hover: the dark base sets color:var(--accent) on hover (a large 18px UI glyph, but raw accent is 2.09:1 on white — fails the 3:1 large/UI bar). Use acc-bright so the sun/moon glyph stays readable on its honey wash. Same fix for the burger (18px icon) — both stay distinguishable from their default --muted state via the acc-bright honey + honey border. */ html[data-pf-theme="light"] .p-theme-toggle:hover{color:var(--acc-bright);} html[data-pf-theme="light"] .p-burger:hover{color:var(--acc-bright);} /* ═══════════════════════════ SIDEBAR ═══════════════════════════ */ /* selected nav item → honey wash (acc-bright text for ≥4.5:1). The selected icon stays distinguishable from the default --faint state via acc-bright (raw --accent is 2.09:1 on white — fails the 3:1 large/UI bar). */ html[data-pf-theme="light"] .p-nitem.on{ background:var(--acc-dim);color:var(--acc-bright);border-color:var(--acc-line); } html[data-pf-theme="light"] .p-nitem.on>svg{color:var(--acc-bright);} html[data-pf-theme="light"] .p-nitem.on::before{background:var(--acc-bright);} /* hover (unselected) → faint honey wash */ html[data-pf-theme="light"] .p-nitem:not(.on):hover{ background:color-mix(in oklab,var(--accent) 8%,#fff);color:var(--acc-bright); } html[data-pf-theme="light"] .p-nitem:not(.on):hover>svg{color:var(--acc-bright);} /* current tool rows (tree + pinned) → honey selected */ html[data-pf-theme="light"] .p-titem.cur, html[data-pf-theme="light"] .p-pinrow.cur{background:var(--acc-dim);} html[data-pf-theme="light"] .p-titem.cur{color:var(--acc-bright);} /* hover on tool tree rows (unselected) */ html[data-pf-theme="light"] .p-titem:not(.cur):hover, html[data-pf-theme="light"] .p-pinrow:not(.cur):hover{ background:color-mix(in oklab,var(--accent) 8%,#fff); } html[data-pf-theme="light"] .p-titem:not(.cur):hover{color:var(--acc-bright);} /* decorative colour-icon dots sit on pale tints in light mode → darken the glyph toward ink so it stays readable (matches handoff tuning). */ html[data-pf-theme="light"] .p-titem .p-tdot, html[data-pf-theme="light"] .p-titem .tdot, html[data-pf-theme="light"] .p-pinrow .p-tdot, html[data-pf-theme="light"] .p-pinrow .tdot, html[data-pf-theme="light"] .p-r-tool .rdot{ color:color-mix(in oklab, var(--tc) 64%, #20190c); background:color-mix(in oklab,var(--tc) 14%,#fff); border-color:color-mix(in oklab,var(--tc) 28%,#fff); } /* the build stamp version pill → muted amber (not bright accent) */ html[data-pf-theme="light"] .p-side-meta .ver{color:var(--muted);} /* pin-hint star (Pinned empty state) — 14px icon (normal text): the raw --accent fill is 2.09:1 on white; bump to acc-bright so the hint reads. */ html[data-pf-theme="light"] .p-pin-hint svg{color:var(--acc-bright);} /* toast icon (success) — 17px icon (large UI): raw --accent is 2.09:1 on the white tile; acc-bright keeps the success glyph readable (5.19:1). */ html[data-pf-theme="light"] .p-toast svg{color:var(--acc-bright);} /* SHELL-02: sidebar support card (Ko-fi + Shop buttons). The dark base uses #e6a6a0 text on a faint honey-red wash — on white that drops to 1.7:1. Darken the Ko-fi glyph to the same warm-red as the topbar button (4.74:1 on its pale wash); Shop uses acc-bright on the acc-dim wash (4.73:1). */ html[data-pf-theme="light"] .p-sbtn.kofi{ color:#b0503c; background:color-mix(in oklab,#e08a6a 10%,#fff); border-color:color-mix(in oklab,#e08a6a 30%,#fff); } html[data-pf-theme="light"] .p-sbtn.kofi:hover{ border-color:color-mix(in oklab,#e08a6a 55%,#fff); } html[data-pf-theme="light"] .p-sbtn.shop{ color:var(--acc-bright); background:var(--acc-dim); border-color:var(--acc-line); } html[data-pf-theme="light"] .p-sbtn.shop:hover{border-color:var(--accent);} /* ═══════════════════════════ DASHBOARD ═══════════════════════════ */ /* soon tiles dim differently on white */ html[data-pf-theme="light"] .p-tile.soon{opacity:.92;} html[data-pf-theme="light"] .p-tile.soon .p-tile-name{color:#6c6657;} /* filter chip selected → honey wash */ html[data-pf-theme="light"] .p-chip.on{ background:var(--acc-dim);border-color:var(--acc-line);color:var(--acc-bright); } html[data-pf-theme="light"] .p-chip:not(.on):hover{ background:color-mix(in oklab,var(--accent) 6%,#fff); border-color:var(--acc-line);color:var(--acc-bright); } /* tool CTA link (Open tool / Activate) → ink, not the raw tool colour */ html[data-pf-theme="light"] .p-tile-link{color:var(--text);} html[data-pf-theme="light"] .p-tile-link.muted{color:var(--faint);} /* hover ring goes neutral on white (preview image keeps its colour) */ html[data-pf-theme="light"] .p-tile:hover{ border-color:#d8d8d2; box-shadow:0 8px 24px -20px rgba(20,20,20,.3),0 0 0 1px #d8d8d2; } html[data-pf-theme="light"] .p-tile::after{display:none;} /* favourite / pin stars → solid amber (the handoff's #f0a500 is close to our --accent; we use --accent so the brand honey carries through). The star is 16px (normal text): use acc-bright (5.19:1) so the default + hover glyph stays ≥4.5:1 on white — the dark base's raw --accent hover is 2.09:1. */ html[data-pf-theme="light"] .p-fav{color:var(--acc-bright);} html[data-pf-theme="light"] .p-fav:hover{color:var(--acc-bright);background:var(--acc-dim);} html[data-pf-theme="light"] .p-fav.on{color:var(--acc-bright);} html[data-pf-theme="light"] .p-fav.on svg{fill:var(--acc-bright);} html[data-pf-theme="light"] .p-pin-off{color:var(--acc-bright);} html[data-pf-theme="light"] .p-pin-off svg{fill:var(--acc-bright);} html[data-pf-theme="light"] .p-pin-off:hover{background:var(--acc-dim);} /* device-fit chip → soft neutral on white */ html[data-pf-theme="light"] .p-tile-device{ background:var(--tile-2);color:var(--faint);border-color:var(--line); } /* badges: Free + Premium → monochrome; Unlocked stays green; Soon neutral */ html[data-pf-theme="light"] .p-badge--free{ background:color-mix(in oklab,#2563eb 12%,#fff);color:#1d4ed8; border-color:color-mix(in oklab,#2563eb 34%,#fff); } html[data-pf-theme="light"] .p-badge--premium{ background:#eeeeec;color:#2b2b27;border-color:#d8d8d2; } html[data-pf-theme="light"] .p-badge--unlocked{ background:color-mix(in oklab,var(--ok) 16%,#fff);color:var(--ok); border-color:color-mix(in oklab,var(--ok) 34%,#fff); } html[data-pf-theme="light"] .p-badge--soon{ background:#eeeeec;color:var(--faint);border-color:var(--line); } html[data-pf-theme="light"] .p-badge--maintenance{ background:color-mix(in oklab,#d68a3c 16%,#fff);color:#9a5a13; border-color:color-mix(in oklab,#d68a3c 42%,#fff); } /* screenshot thumbnail placeholder (no capture yet) → light tint, not dark */ html[data-pf-theme="light"] .p-tile-shot.ph{ background: repeating-linear-gradient(135deg, color-mix(in oklab,var(--tc) 16%,transparent) 0 10px, transparent 10px 20px), color-mix(in oklab,var(--tc) 12%,#fff); border-color:color-mix(in oklab,var(--tc) 32%,#fff); } html[data-pf-theme="light"] .p-tile-shot.ph .ph-ic{ color:color-mix(in oklab, var(--tc) 58%, #20190c);opacity:1; } /* the small icon chip sits on (dark) screenshots — keep its dark backing so the tool identity colour remains visible against the screenshot imagery */ html[data-pf-theme="light"] .p-tile-shot .p-tile-ic{ background:color-mix(in oklab,#0c0d0d 58%,transparent); border-color:color-mix(in oklab,var(--tc) 50%,#fff); } /* promo + support card: Visit-the-shop solid button → white icon + label on the honey (dark text was unreadable on the bright accent) */ html[data-pf-theme="light"] .p-pbtn.solid, html[data-pf-theme="light"] .p-pbtn.solid:hover{color:#fff;} /* Ko-fi "Buy me a coffee" stays warm-red but darkens on white */ html[data-pf-theme="light"] .p-pbtn.coffee{color:#b0503c;} /* DASH-01: promo heart icon. The dark base colours it --accent (amber) and sits it on a honey wash. Once the promo's gradient wash is dropped to flat white, the raw amber is 2.09:1 on white — fails ≥3:1 for a large UI glyph. The handoff uses a saturated support-red; we port that so the heart keeps its support semantic AND clears the 3:1 large-UI bar (≈4.9:1 on the wash). */ html[data-pf-theme="light"] .p-promo-ic{ color:#d63b30; background:color-mix(in oklab,#d63b30 11%,#fff); border-color:color-mix(in oklab,#d63b30 30%,#fff); } /* DASH-01: dashboard welcome notice (.dash-notice lives in app.css with hardcoded dark tokens — muted text, gold link, soft dark border). On the light dashboard that becomes an orphan dark-tinted island. Port the handoff's flat-white treatment: ink body text (17:1), ink link (17:1) with a neutral underline, amber info icon kept (large UI ≥3:1 via the icon fill against its own ring). */ html[data-pf-theme="light"] .dash-notice{ background:var(--tile); border-color:var(--line); color:var(--muted); } html[data-pf-theme="light"] .dash-notice > svg:first-of-type{color:var(--acc-bright);} html[data-pf-theme="light"] .dash-notice a{ color:var(--text); border-bottom-color:var(--line); } html[data-pf-theme="light"] .dash-notice a:hover{color:#000;border-bottom-color:var(--text);} html[data-pf-theme="light"] .dash-notice-dismiss{color:var(--faint);} html[data-pf-theme="light"] .dash-notice-dismiss:hover{ color:var(--text); background:var(--tile-2); } /* ═══════════════════════════ ACCOUNT + ADMIN (platform-views.css) ═════ */ /* inputs: focus → honey border + white field + a soft honey halo (matches the handoff). Placeholder fades to a light-mode neutral so the prompt reads ≥4.5:1 on white. */ html[data-pf-theme="light"] .p-in::placeholder{color:#9a948a;} html[data-pf-theme="light"] .p-in:hover{border-color:#c4beaf;} html[data-pf-theme="light"] .p-in:focus{ background:#fff;border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent); } /* admin search input (no .p-in class) → same placeholder + focus treatment */ html[data-pf-theme="light"] .p-adm-search input::placeholder{color:#9a948a;} html[data-pf-theme="light"] .p-adm-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent); } /* primary action buttons → ink (black on white) for contrast; the honey accent stays reserved for nav/identity. */ html[data-pf-theme="light"] .p-abtn.solid{background:#1c1b18;color:#fff;} html[data-pf-theme="light"] .p-abtn.solid:hover{background:#000;} html[data-pf-theme="light"] .p-abtn.ghost:hover{ border-color:#1c1b18;color:#000; } /* storage meter readout → neutral text on white */ html[data-pf-theme="light"] .p-ss-pct{color:var(--muted);} html[data-pf-theme="light"] .p-storage-row .pct{color:var(--muted);} /* title flourish dot → ink */ html[data-pf-theme="light"] .p-vtitle .dot{color:var(--text);} /* toast shadow softens on white */ html[data-pf-theme="light"] .p-toast{ box-shadow:0 22px 50px -20px rgba(20,20,20,.3); } /* ═══════════════════════════ ACCOUNT + ADMIN — Phase 40 ═══════════════ */ /* ACC-01 / ADM-01: status pill + verified pill + invite-state "done" text. The dark base uses desaturated pale tints (#9bd09b / #e0bd6e) that read 1.6–2.1:1 on white — fail. The handoff swaps the text token: green statuses → --ok (darkened, 4.7:1), the pending/amber one → acc-bright (5.19:1). Background tints were already cut with transparent in the dark base; on white they render pale enough that the darkened text contrast clears ≥4.5:1 against them. */ html[data-pf-theme="light"] .p-pill.active{color:var(--ok);} html[data-pf-theme="light"] .p-pill.pending{color:var(--acc-bright);} html[data-pf-theme="light"] .p-vpill.yes{color:var(--ok);} html[data-pf-theme="light"] .p-inv-state.done{color:var(--ok);} /* ADM-01: stat card + tool-management + grant-row + link-tracking decorative icons. They carry a per-item colour via --sc / --tc / --lc and sit on pale color-mix tints (15% on white). The base --sc/--tc/--lc values are dark- mode-tuned bright hues (e.g. #67b3d6) that drop to ~2.0:1 as a 17px UI glyph on the pale wash. Darken toward ink (handoff pattern, line 651-655) so the icons clear the 3:1 large-UI bar while keeping their identity hue. */ html[data-pf-theme="light"] .p-stat .si, html[data-pf-theme="light"] .p-tm-ic, html[data-pf-theme="light"] .p-gr-ic, html[data-pf-theme="light"] .p-lt-ic{ color:color-mix(in oklab,var(--sc, var(--tc, var(--lc))) 64%, #20190c); } /* .p-tm-ic + .p-gr-ic use --tc; .p-lt-ic uses --lc. Override per-token since color-mix can't pick "whichever of sc/tc/lc is set" without the var() fallback chain (which is exactly what the rule above does, but here we pin the right token for each selector to be explicit + safe if a row ever omits its inline custom property). */ html[data-pf-theme="light"] .p-tm-ic, html[data-pf-theme="light"] .p-gr-ic{color:color-mix(in oklab,var(--tc) 64%, #20190c);} html[data-pf-theme="light"] .p-lt-ic{color:color-mix(in oklab,var(--lc) 64%, #20190c);} /* ADM-01: user avatars. The dark base colours them --accent (raw, 2.09:1 on white) + three pastel variants (#67b3d6 / #5bb98c / #d987a8 — all ~2:1 on the pale wash). Port the handoff: default → acc-bright; variants → darkened teal/green/plum (4.5–5:1 on their own pale washes). */ html[data-pf-theme="light"] .p-uava{color:var(--acc-bright);} html[data-pf-theme="light"] .p-uava.a{color:#2f6f8c;} html[data-pf-theme="light"] .p-uava.b{color:#2e7d4e;} html[data-pf-theme="light"] .p-uava.c{color:#9c4f70;} /* ADM-01: active sort header → acc-bright (the dark base uses raw --accent, 2.09:1 on the white panel — fails ≥4.5:1 for the 10.5px uppercase label). */ html[data-pf-theme="light"] .p-th-sort.active{color:var(--acc-bright);} /* ADM-01: Live + Maintenance toggles. The dark base puts a raw --accent knob on an --acc-dim wash when ON. The knob is an 18px UI element (≥3:1 large- UI bar); raw --accent on the pale wash is ~2.1:1. Swap the knob to acc-bright so the ON state stays distinguishable from OFF (whose --faint knob on --tile-2 is itself ≥3:1). The ON honey wash is preserved. */ html[data-pf-theme="light"] .p-toggle.on::after{background:var(--acc-bright);} /* ACC-01: copy-to-clipboard button hover → acc-bright (the dark base sets color:var(--accent) on hover — 2.09:1 on the white row). */ html[data-pf-theme="light"] .p-copy:hover{color:var(--acc-bright);} /* ADM-01: invite-action danger hover → darken the danger token so it reads on white (the dark base uses --danger #d98a72 ≈ 3.5:1 — borderline; the light --danger #bb5439 is 4.8:1, which is what the token now resolves to, so no override needed — but pin the hover text to the token to be safe across future token edits). */ html[data-pf-theme="light"] .p-inv-a.danger:hover{color:var(--danger);} /* ADM-01: admin user-metadata "Administrator" badge uses --accent (raw, 2.09:1 on white) → swap to acc-bright so the admin role tag reads. */ html[data-pf-theme="light"] .p-umeta.adm{color:var(--acc-bright);} /* ADM-01: drawer scrim softens on white (the dark base's rgba(0,0,0,.55) is heavy against a light page; lift it slightly so the white drawer panel still reads as a distinct layer). */ html[data-pf-theme="light"] .p-drawer{background:rgba(20,20,20,.42);} /* ═══════════════════ VER-02: interactive boundary contrast ═══════════════ */ /* WCAG 1.4.11 (Non-text Contrast ≥3:1) audit in Phase 41 found EVERY focus ring in the platform fails on white: the dark base sets `box-shadow:0 0 0 3px var(--acc-dim)` on :focus-visible / :focus, and in light mode --acc-dim = color-mix(accent 14%, #fff) ≈ 1.1:1 on white — invisible. Similarly the .p-in / .p-adm-search focus border uses raw --accent (2.09:1 on white — fails). Fix: re-point every light-mode focus ring + focus border to --acc-bright (the existing darkened-amber token, 4.78:1 on white). Solid — no alpha, because even acc-bright @ 50% alpha drops to 1.98:1 (still fails). This keeps the honey identity while clearing the 3:1 UI-boundary bar. Note on the decorative-border decision (handoff #e5e5e2 ≈ 1.26:1): we KEEP the faint border for card-to-card / panel edges / resting input borders — those components are otherwise identifiable (fill difference, placeholder, position, icon). The 3:1 bar is enforced specifically on INTERACTIVE edges + state cues (focus rings, focus borders, toggle knobs). */ /* Input + admin-search focus border → acc-bright (was raw --accent, 2.09:1). */ html[data-pf-theme="light"] .p-in:focus{ border-color:var(--acc-bright); box-shadow:0 0 0 3px var(--acc-bright); } html[data-pf-theme="light"] .p-adm-search:focus-within{ border-color:var(--acc-bright); box-shadow:0 0 0 3px var(--acc-bright); } /* Every other :focus-visible ring in the dark base (shell + account/admin) → solid acc-bright. Selectors mirror the dark-base rule groups so this overrides precisely (platform-theme.css loads AFTER platform.css + platform-views.css — see layouts/app.blade.php head order). */ html[data-pf-theme="light"] .p-theme-toggle:focus-visible, html[data-pf-theme="light"] .p-burger:focus-visible, html[data-pf-theme="light"] .p-fav:focus-visible, html[data-pf-theme="light"] .p-dh-close:focus-visible, html[data-pf-theme="light"] .p-pg-btn:focus-visible, html[data-pf-theme="light"] .p-pg-num:focus-visible, html[data-pf-theme="light"] .p-adm-clear:focus-visible, html[data-pf-theme="light"] .p-toggle:focus-visible, html[data-pf-theme="light"] .p-copy:focus-visible, html[data-pf-theme="light"] .p-del:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--acc-bright); } /* ───── ADM-01 orphan-dark-islands: legacy app.css classes used in the admin views (account-table, text-data, text-small, storage-bar, linkish, admin-panel, h-page). Their rules in app.css reference :root tokens (--text-muted, --text-secondary, --bg-secondary, --border, --accent, --ok, --warn, --err) that are NEVER overridden by the .p-shell light block — so without these overrides the admin tables/storage bars read dark-on-light (text-secondary #a0a0a0 on white ≈ 2.7:1, bg-secondary #1a1a1a bars on white = orphan dark islands). */ /* legacy typography helpers → map onto the platform's light tokens */ html[data-pf-theme="light"] .text-small{color:var(--muted);} html[data-pf-theme="light"] .text-data{color:var(--text);} html[data-pf-theme="light"] .h-page{color:var(--text);} /* linkish (back-links, "View →" links) → ink, not raw --accent */ html[data-pf-theme="light"] .linkish{color:var(--text);} html[data-pf-theme="light"] .linkish:hover{color:#000;} /* account-table (admin index + users + user-detail) → ink text, ink-mute header, neutral borders. The app.css table hardcodes --border (a dark rgba white .08) + --text-secondary header — both fail on white. */ html[data-pf-theme="light"] .account-table th, html[data-pf-theme="light"] .account-table td{ border-bottom-color:var(--line-soft); } html[data-pf-theme="light"] .account-table th{color:var(--faint);} html[data-pf-theme="light"] .account-table td{color:var(--text);} html[data-pf-theme="light"] .account-table td code{color:var(--muted);} /* storage-bar (admin user-detail + top-10 panel) → light track. Without this the --bg-secondary (#1a1a1a) track reads as a black bar on white. */ html[data-pf-theme="light"] .storage-bar{ background:var(--tile-2);border-color:var(--line); } /* storage-bar-fill state colours: app.css uses --warn #f5b759 (an amber that reads ≈1.7:1 on the white tile — fails 3:1 UI boundary). Swap warn to a darker amber; ok + err inherit from .p-shell tokens (already correct). */ html[data-pf-theme="light"] .storage-bar-fill[data-state="warn"]{ background:#d68a3c; } /* admin-panel card (legacy) → flat white + thin border, matching .p-panel */ html[data-pf-theme="light"] .admin-panel{ background:var(--tile);border-color:var(--line-soft); } /* the legacy admin stat readout (.admin-panel .text-data) uses --accent (raw, 2.09:1 on white) → acc-bright */ html[data-pf-theme="light"] .admin-panel .text-data{color:var(--acc-bright);}