/* Accent derivation — pure CSS, zero JS color math. When a custom accent is active (the user picks one, or the home page derives one from the avatar), the theme code sets ONE inline variable on : `--accent-color: #rrggbb`, and sets data-accent-source to "user" or "avatar". Every derived colour (primary, secondary, the five surface tints) is then computed from that single hue with CSS relative-colour syntax — so changing the accent is a single custom-property write and the whole palette follows instantly, with no per-change JavaScript recomputation. This replaces the old SiteUtils.buildAccentPalette() HSL math. The derivations mirror it: primary/secondary are shifted+saturated variants of the accent, and color-1..5 are hue-rotated background tints (light ~90% L / dark ~15% L). The `html:is([data-accent-source="user"], [data-accent-source="avatar"])` prefix carries specificity (0,2,0) — plus the [data-theme-mode] attribute below it (0,3,0) — so these rules out-specify the per-theme palette in themes.bundle.css (html[data-theme="x"], 0,1,1) and win when a custom accent is set. When no accent is set, none match and the theme's own colours apply. */ html:is([data-accent-source="user"], [data-accent-source="avatar"])[data-theme-mode] { --primary-color: hsl(from var(--accent-color) h calc(s * 1.02) calc(l * 0.82)); --secondary-color: hsl(from var(--accent-color) calc(h + 28) calc(s * 0.94) calc(l * 0.9)); } /* Light themes: pale, high-lightness surface tints derived from the accent hue. */ html:is([data-accent-source="user"], [data-accent-source="avatar"])[data-theme-mode="light"] { --color-1: hsl(from var(--accent-color) calc(h - 8) calc(s * 0.7) 92%); --color-2: hsl(from var(--accent-color) calc(h + 14) calc(s * 0.68) 90%); --color-3: hsl(from var(--accent-color) calc(h + 32) calc(s * 0.64) 88%); --color-4: hsl(from var(--accent-color) calc(h - 28) calc(s * 0.68) 91%); --color-5: hsl(from var(--accent-color) calc(h + 52) calc(s * 0.6) 93%); } /* Dark themes: deep, low-lightness surface tints, plus brighter primary/secondary. */ html:is([data-accent-source="user"], [data-accent-source="avatar"])[data-theme-mode="dark"] { --primary-color: hsl(from var(--accent-color) h calc(s * 1.08) calc(l * 1.22)); --secondary-color: hsl(from var(--accent-color) calc(h + 28) s calc(l * 1.24)); --color-1: hsl(from var(--accent-color) calc(h - 8) calc(s * 0.62) 15%); --color-2: hsl(from var(--accent-color) calc(h + 12) calc(s * 0.64) 17%); --color-3: hsl(from var(--accent-color) calc(h + 30) calc(s * 0.66) 19%); --color-4: hsl(from var(--accent-color) calc(h - 26) calc(s * 0.62) 16%); --color-5: hsl(from var(--accent-color) calc(h + 48) calc(s * 0.58) 14%); }