/**
* theme.css — AshemaleParadise dual-theme tokens (dark default + light).
*
* The whole site already references the SAME variable names on every page
* (--bg --surface --surface2 --border --text --muted --green --purple --neon),
* just redefined locally with dark literals. This file is the single source
* of truth: pages that still define their own :root color block override
* this (last-wins) until they're migrated — migrated pages delete their
* local color :root and these tokens take over automatically.
*
* Theme is selected via , set by the inline
* pre-paint script (see site-prefs.js) BEFORE first paint — no flash.
*
* Light-mode accent colors are intentionally darker/more saturated than their
* dark-mode counterparts. Verified via WCAG relative-luminance contrast math
* against the light surfaces below (not eyeballed):
* --green #007a4d on #ffffff ≈ 5.6:1 (dark-mode #01FF95 on white ≈ 2.7:1 — fails AA)
* --purple #7a1fb0 on #ffffff ≈ 6.5:1 (dark-mode #DC86FD on white would fail similarly)
* --muted is a SOLID grey, not alpha-blended — alpha-over-white drifts under
* 4.5:1 depending on what's behind it; solid #5a5764 holds ≈ 6.4:1 everywhere.
* Components that put a dark label ON a --green/--purple background (buttons,
* badges) are unaffected by this — that pairing already passes contrast in
* both themes. Only "accent used as text/icon/link color on --bg/--surface"
* needed the darker light-mode values.
*/
:root,
[data-theme="dark"] {
--bg: #070709;
--surface: #0f0f13;
--surface2: #17171e;
--border: rgba(255, 255, 255, 0.07);
--text: #f0eef8;
--muted: rgba(240, 238, 248, 0.45);
--green: #01FF95;
--purple: #DC86FD;
--neon: #39FF14;
/* Semantic helpers other CSS can opt into instead of raw rgba(0/255,...) literals */
--overlay-soft: rgba(255, 255, 255, 0.05);
--overlay-strong: rgba(255, 255, 255, 0.12);
--shadow-color: rgba(0, 0, 0, 0.6);
--scrim: rgba(0, 0, 0, 0.7);
color-scheme: dark;
}
[data-theme="light"] {
--bg: #f7f7fa;
--surface: #ffffff;
--surface2: #eef0f4;
--border: rgba(0, 0, 0, 0.10);
--text: #15131c;
--muted: #5a5764;
--green: #007a4d;
--purple: #7a1fb0;
--neon: #007a4d;
--overlay-soft: rgba(0, 0, 0, 0.04);
--overlay-strong: rgba(0, 0, 0, 0.10);
--shadow-color: rgba(20, 18, 28, 0.16);
--scrim: rgba(15, 13, 20, 0.55);
color-scheme: light;
}
/* Site logo swap: the SVG wordmark is white/light-colored (made for the dark
background) and disappears on the light surface. .theme-logo marks every
![]()
that renders it so light mode can swap in the black wordmark instead.
sp-blacklogo.png is a much wider lockup (~6.3:1) than the slots were sized
for (~1.6-3:1). Every page has its own unscoped `width:auto` rule for these
![]()
tags (e.g. `.nav-logo img{height:40px;width:auto}`) — if only height
is overridden here, BOTH width and height end up auto and the browser falls
back to the image's intrinsic 5509x870px size (the "logo exploded" bug).
!important forces both dimensions so neither can fall through to auto. */
[data-theme="light"] img.theme-logo {
content: url(/icons/sp-blacklogo.png);
height: 24px !important;
width: auto !important;
max-width: 160px;
object-fit: contain;
}
/* Respect OS preference only when the visitor hasn't made an explicit choice
(no localStorage pref_theme yet). The pre-paint script in site-prefs.js
already resolves this before paint — this media query is a CSS-only
fallback for the rare case JS is disabled. */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--bg: #f7f7fa;
--surface: #ffffff;
--surface2: #eef0f4;
--border: rgba(0, 0, 0, 0.10);
--text: #15131c;
--muted: #5a5764;
--green: #007a4d;
--purple: #7a1fb0;
--neon: #007a4d;
color-scheme: light;
}
}
/* ── Reward username styles (rewards.php rw_styleDefinitions()) ──────────
Shared here so the class works everywhere a username is rendered (comments,
/user/{id}/ profile, dashboard) — previously .username-thunder only had CSS
in dashboard/index.php's own inline