/* Phase 21 — Region palette overrides. * * Each .palette- class is set on by app.js after every * renderState (from state.palette in /api/state). The class overrides * 4 tokens defined in theme.css: * --accent — primary brand colour for the region * --accent-soft — lighter accent variant for hover/badge states * --surface-tint — body background tint for this region * --ink-tint — muted text colour tint */ /* ===== Castle group ===== */ .palette-castle { --accent: #6b4f1f; --accent-soft: #a88858; --surface-tint: #f7f3e6; --ink-tint: #8a7c5a; } .palette-tower { --accent: #2a3855; --accent-soft: #7280a0; --surface-tint: #eef0f5; --ink-tint: #5a6480; } .palette-dungeons { --accent: #2a4555; --accent-soft: #6a8895; --surface-tint: #e8eef0; --ink-tint: #587078; } .palette-chamber { --accent: #2a4530; --accent-soft: #6a8870; --surface-tint: #e8eee5; --ink-tint: #557060; } .palette-pensieve { --accent: #5a5078; --accent-soft: #9a90b8; --surface-tint: #f0eef5; --ink-tint: #807888; } .palette-floo { --accent: #0c7d46; --accent-soft: #5cae82; --surface-tint: #e6f4ec; --ink-tint: #467a5e; } /* ===== Grounds & wild ===== */ .palette-grounds { --accent: #3a5a30; --accent-soft: #7a9070; --surface-tint: #ecf1e7; --ink-tint: #5a7050; } .palette-forbidden { --accent: #1a3018; --accent-soft: #4a6045; --surface-tint: #e2e6dc; --ink-tint: #4a5840; } .palette-black-lake { --accent: #1a3a55; --accent-soft: #5a7895; --surface-tint: #e8eff3; --ink-tint: #587078; } /* ===== Wizarding Britain ===== */ .palette-hogsmeade { --accent: #8a4a18; --accent-soft: #c8895a; --surface-tint: #f7ede0; --ink-tint: #806040; } .palette-diagon { --accent: #a83a15; --accent-soft: #d88058; --surface-tint: #f8e8d8; --ink-tint: #8a5538; } .palette-knockturn { --accent: #2a1a35; --accent-soft: #5a455a; --surface-tint: #e2dde6; --ink-tint: #5a4860; } .palette-gringotts { --accent: #8a6a10; --accent-soft: #c8a858; --surface-tint: #f4eee0; --ink-tint: #8a7838; } /* ===== Institutions ===== */ .palette-ministry { --accent: #1a3a1f; --accent-soft: #5a705a; --surface-tint: #e8e8e0; --ink-tint: #555a48; } .palette-st-mungos { --accent: #2a8050; --accent-soft: #7ab095; --surface-tint: #eaf1eb; --ink-tint: #5a8068; } /* ===== Family homes & muggle ===== */ .palette-burrow { --accent: #a8451a; --accent-soft: #d88858; --surface-tint: #f5ebe0; --ink-tint: #886040; } .palette-muggle { --accent: #454545; --accent-soft: #888888; --surface-tint: #e8e8e8; --ink-tint: #707070; } /* ===== Foreign schools ===== */ .palette-beauxbatons { --accent: #5a3a75; --accent-soft: #a888b0; --surface-tint: #f3eff5; --ink-tint: #806a85; } .palette-durmstrang { --accent: #1a4a78; --accent-soft: #6090b8; --surface-tint: #e2eaef; --ink-tint: #587088; } .palette-ilvermorny { --accent: #4a6535; --accent-soft: #8a9870; --surface-tint: #ede5d8; --ink-tint: #7a7860; } .palette-mahoutokoro { --accent: #a8351a; --accent-soft: #d87858; --surface-tint: #f5e8e0; --ink-tint: #885a48; } .palette-castelobruxo{ --accent: #5a7510; --accent-soft: #9aa860; --surface-tint: #ecede0; --ink-tint: #708060; } .palette-uagadou { --accent: #a8551a; --accent-soft: #d89058; --surface-tint: #f3e8d8; --ink-tint: #886848; } .palette-macusa { --accent: #3a2810; --accent-soft: #7a6540; --surface-tint: #e8e5dc; --ink-tint: #706048; } /* ===== Dark-mode variants (auto via @media) ===== */ @media (prefers-color-scheme: dark) { .palette-castle { --accent: #d0b878; --accent-soft: #a89858; --surface-tint: #1a1610; --ink-tint: #a89870; } .palette-tower { --accent: #88a0d0; --accent-soft: #6080a8; --surface-tint: #10141a; --ink-tint: #7088b0; } .palette-dungeons { --accent: #88b0c0; --accent-soft: #587880; --surface-tint: #0f1418; --ink-tint: #80a0b0; } .palette-chamber { --accent: #88c098; --accent-soft: #587a60; --surface-tint: #0f140f; --ink-tint: #80a888; } .palette-pensieve { --accent: #b0a8d0; --accent-soft: #807898; --surface-tint: #14101a; --ink-tint: #a098c0; } .palette-floo { --accent: #54d68e; --accent-soft: #3e8c62; --surface-tint: #0a140e; --ink-tint: #6cc290; } .palette-grounds { --accent: #98c088; --accent-soft: #688060; --surface-tint: #10140f; --ink-tint: #88a880; } .palette-forbidden { --accent: #88a880; --accent-soft: #5a7050; --surface-tint: #0a0f0a; --ink-tint: #708868; } .palette-black-lake { --accent: #88b0d0; --accent-soft: #5880a0; --surface-tint: #0f141a; --ink-tint: #80a0c0; } .palette-hogsmeade { --accent: #e0a878; --accent-soft: #a88060; --surface-tint: #181410; --ink-tint: #c8a080; } .palette-diagon { --accent: #e09070; --accent-soft: #b06850; --surface-tint: #1a100c; --ink-tint: #c88068; } .palette-knockturn { --accent: #b098c0; --accent-soft: #80688a; --surface-tint: #100c14; --ink-tint: #a088b0; } .palette-gringotts { --accent: #d0b070; --accent-soft: #a88858; --surface-tint: #14100c; --ink-tint: #c0a868; } .palette-ministry { --accent: #88b890; --accent-soft: #5a7858; --surface-tint: #0f120f; --ink-tint: #80a880; } .palette-st-mungos { --accent: #88c8a0; --accent-soft: #5a8070; --surface-tint: #0f140f; --ink-tint: #80b890; } .palette-burrow { --accent: #e0a080; --accent-soft: #a87858; --surface-tint: #18100c; --ink-tint: #c89878; } .palette-muggle { --accent: #b0b0b0; --accent-soft: #707070; --surface-tint: #181818; --ink-tint: #989898; } .palette-beauxbatons { --accent: #b098c8; --accent-soft: #80688a; --surface-tint: #110c14; --ink-tint: #a088b8; } .palette-durmstrang { --accent: #80a8d0; --accent-soft: #58789a; --surface-tint: #0c1014; --ink-tint: #78a0c8; } .palette-ilvermorny { --accent: #a8c088; --accent-soft: #788858; --surface-tint: #141008; --ink-tint: #98b078; } .palette-mahoutokoro { --accent: #e08878; --accent-soft: #a86858; --surface-tint: #18100c; --ink-tint: #c88068; } .palette-castelobruxo{ --accent: #c0c878; --accent-soft: #888858; --surface-tint: #11140c; --ink-tint: #b0b870; } .palette-uagadou { --accent: #e09870; --accent-soft: #a86850; --surface-tint: #18100c; --ink-tint: #c88060; } .palette-macusa { --accent: #c8a878; --accent-soft: #886848; --surface-tint: #14100c; --ink-tint: #b89868; } } /* Manual dark override beats the @media query. */ :root[data-theme="dark"] .palette-castle { --accent: #d0b878; --accent-soft: #a89858; --surface-tint: #1a1610; --ink-tint: #a89870; } :root[data-theme="dark"] .palette-tower { --accent: #88a0d0; --accent-soft: #6080a8; --surface-tint: #10141a; --ink-tint: #7088b0; } :root[data-theme="dark"] .palette-dungeons { --accent: #88b0c0; --accent-soft: #587880; --surface-tint: #0f1418; --ink-tint: #80a0b0; } :root[data-theme="dark"] .palette-chamber { --accent: #88c098; --accent-soft: #587a60; --surface-tint: #0f140f; --ink-tint: #80a888; } :root[data-theme="dark"] .palette-pensieve { --accent: #b0a8d0; --accent-soft: #807898; --surface-tint: #14101a; --ink-tint: #a098c0; } :root[data-theme="dark"] .palette-floo { --accent: #54d68e; --accent-soft: #3e8c62; --surface-tint: #0a140e; --ink-tint: #6cc290; } :root[data-theme="dark"] .palette-grounds { --accent: #98c088; --accent-soft: #688060; --surface-tint: #10140f; --ink-tint: #88a880; } :root[data-theme="dark"] .palette-forbidden { --accent: #88a880; --accent-soft: #5a7050; --surface-tint: #0a0f0a; --ink-tint: #708868; } :root[data-theme="dark"] .palette-black-lake { --accent: #88b0d0; --accent-soft: #5880a0; --surface-tint: #0f141a; --ink-tint: #80a0c0; } :root[data-theme="dark"] .palette-hogsmeade { --accent: #e0a878; --accent-soft: #a88060; --surface-tint: #181410; --ink-tint: #c8a080; } :root[data-theme="dark"] .palette-diagon { --accent: #e09070; --accent-soft: #b06850; --surface-tint: #1a100c; --ink-tint: #c88068; } :root[data-theme="dark"] .palette-knockturn { --accent: #b098c0; --accent-soft: #80688a; --surface-tint: #100c14; --ink-tint: #a088b0; } :root[data-theme="dark"] .palette-gringotts { --accent: #d0b070; --accent-soft: #a88858; --surface-tint: #14100c; --ink-tint: #c0a868; } :root[data-theme="dark"] .palette-ministry { --accent: #88b890; --accent-soft: #5a7858; --surface-tint: #0f120f; --ink-tint: #80a880; } :root[data-theme="dark"] .palette-st-mungos { --accent: #88c8a0; --accent-soft: #5a8070; --surface-tint: #0f140f; --ink-tint: #80b890; } :root[data-theme="dark"] .palette-burrow { --accent: #e0a080; --accent-soft: #a87858; --surface-tint: #18100c; --ink-tint: #c89878; } :root[data-theme="dark"] .palette-muggle { --accent: #b0b0b0; --accent-soft: #707070; --surface-tint: #181818; --ink-tint: #989898; } :root[data-theme="dark"] .palette-beauxbatons { --accent: #b098c8; --accent-soft: #80688a; --surface-tint: #110c14; --ink-tint: #a088b8; } :root[data-theme="dark"] .palette-durmstrang { --accent: #80a8d0; --accent-soft: #58789a; --surface-tint: #0c1014; --ink-tint: #78a0c8; } :root[data-theme="dark"] .palette-ilvermorny { --accent: #a8c088; --accent-soft: #788858; --surface-tint: #141008; --ink-tint: #98b078; } :root[data-theme="dark"] .palette-mahoutokoro { --accent: #e08878; --accent-soft: #a86858; --surface-tint: #18100c; --ink-tint: #c88068; } :root[data-theme="dark"] .palette-castelobruxo{ --accent: #c0c878; --accent-soft: #888858; --surface-tint: #11140c; --ink-tint: #b0b870; } :root[data-theme="dark"] .palette-uagadou { --accent: #e09870; --accent-soft: #a86850; --surface-tint: #18100c; --ink-tint: #c88060; } :root[data-theme="dark"] .palette-macusa { --accent: #c8a878; --accent-soft: #886848; --surface-tint: #14100c; --ink-tint: #b89868; }