/* Per-product accent themes. A product's brand colour is its UI accent. Scope one with [data-product] on or any subtree; --accent and --on-accent follow. Everything else in DDS is identical across products. light mode, Dot Red dark mode, navy tuned for #000 Unscoped, --accent falls back to the value in colors.css. */ [data-product="subs"] { --accent: #007504; --on-accent: #FFFFFF; } [data-product="subs"][data-theme="dark"], [data-product="subs"] [data-theme="dark"], [data-theme="dark"] [data-product="subs"] { --accent: #00D40A; --on-accent: #FFFFFF; } [data-product="news"] { --accent: #D11500; --on-accent: #FFFFFF; } [data-product="news"][data-theme="dark"], [data-product="news"] [data-theme="dark"], [data-theme="dark"] [data-product="news"] { --accent: #FF4518; --on-accent: #FFFFFF; } [data-product="penny"] { --accent: #C4470A; --on-accent: #FFFFFF; } [data-product="penny"][data-theme="dark"], [data-product="penny"] [data-theme="dark"], [data-theme="dark"] [data-product="penny"] { --accent: #FF6B1A; --on-accent: #FFFFFF; } [data-product="park"] { --accent: #B26500; --on-accent: #FFFFFF; } [data-product="park"][data-theme="dark"], [data-product="park"] [data-theme="dark"], [data-theme="dark"] [data-product="park"] { --accent: #FF8A00; --on-accent: #FFFFFF; } [data-product="tos"] { --accent: #8F5C00; --on-accent: #FFFFFF; } [data-product="tos"][data-theme="dark"], [data-product="tos"] [data-theme="dark"], [data-theme="dark"] [data-product="tos"] { --accent: #FFB300; --on-accent: #FFFFFF; } [data-product="money"] { --accent: #8C7000; --on-accent: #FFFFFF; } [data-product="money"][data-theme="dark"], [data-product="money"] [data-theme="dark"], [data-theme="dark"] [data-product="money"] { --accent: #FFD400; --on-accent: #FFFFFF; } [data-product="snap"] { --accent: #5C7A00; --on-accent: #FFFFFF; } [data-product="snap"][data-theme="dark"], [data-product="snap"] [data-theme="dark"], [data-theme="dark"] [data-product="snap"] { --accent: #E8FF1A; --on-accent: #FFFFFF; } [data-product="go"] { --accent: #E80000; --on-accent: #FFFFFF; } [data-product="go"][data-theme="dark"], [data-product="go"] [data-theme="dark"], [data-theme="dark"] [data-product="go"] { --accent: #FF2D2D; --on-accent: #FFFFFF; } [data-product="plant"] { --accent: #0A8F3D; --on-accent: #FFFFFF; } [data-product="plant"][data-theme="dark"], [data-product="plant"] [data-theme="dark"], [data-theme="dark"] [data-product="plant"] { --accent: #3AFF7D; --on-accent: #FFFFFF; } [data-product="budget"] { --accent: #008F5E; --on-accent: #FFFFFF; } [data-product="budget"][data-theme="dark"], [data-product="budget"] [data-theme="dark"], [data-theme="dark"] [data-product="budget"] { --accent: #00FFB0; --on-accent: #FFFFFF; } [data-product="clean"] { --accent: #00806F; --on-accent: #FFFFFF; } [data-product="clean"][data-theme="dark"], [data-product="clean"] [data-theme="dark"], [data-theme="dark"] [data-product="clean"] { --accent: #00E0C4; --on-accent: #FFFFFF; } [data-product="track"] { --accent: #0070B2; --on-accent: #FFFFFF; } [data-product="track"][data-theme="dark"], [data-product="track"] [data-theme="dark"], [data-theme="dark"] [data-product="track"] { --accent: #00B8FF; --on-accent: #FFFFFF; } [data-product="web"] { --accent: #0047D6; --on-accent: #FFFFFF; } [data-product="web"][data-theme="dark"], [data-product="web"] [data-theme="dark"], [data-theme="dark"] [data-product="web"] { --accent: #3D7AFF; --on-accent: #FFFFFF; } [data-product="bot"] { --accent: #4B1FBF; --on-accent: #FFFFFF; } [data-product="bot"][data-theme="dark"], [data-product="bot"] [data-theme="dark"], [data-theme="dark"] [data-product="bot"] { --accent: #8F5CFF; --on-accent: #FFFFFF; } [data-product="photo"] { --accent: #7A14B5; --on-accent: #FFFFFF; } [data-product="photo"][data-theme="dark"], [data-product="photo"] [data-theme="dark"], [data-theme="dark"] [data-product="photo"] { --accent: #C14DFF; --on-accent: #FFFFFF; } [data-product="design"] { --accent: #B51495; --on-accent: #FFFFFF; } [data-product="design"][data-theme="dark"], [data-product="design"] [data-theme="dark"], [data-theme="dark"] [data-product="design"] { --accent: #FF4DD4; --on-accent: #FFFFFF; } [data-product="pet"] { --accent: #C4144F; --on-accent: #FFFFFF; } [data-product="pet"][data-theme="dark"], [data-product="pet"] [data-theme="dark"], [data-theme="dark"] [data-product="pet"] { --accent: #FF4D8F; --on-accent: #FFFFFF; } [data-product="zone"] { --accent: #333333; --on-accent: #FFFFFF; } [data-product="zone"][data-theme="dark"], [data-product="zone"] [data-theme="dark"], [data-theme="dark"] [data-product="zone"] { --accent: #666666; --on-accent: #FFFFFF; } [data-product="ko"] { --accent: #0047A0; --on-accent: #FFFFFF; } [data-product="ko"][data-theme="dark"], [data-product="ko"] [data-theme="dark"], [data-theme="dark"] [data-product="ko"] { --accent: #3D7BD9; --on-accent: #FFFFFF; } [data-product="do"] { --accent: #000080; --on-accent: #FFFFFF; } [data-product="do"][data-theme="dark"], [data-product="do"] [data-theme="dark"], [data-theme="dark"] [data-product="do"] { --accent: #4D7CFF; --on-accent: #FFFFFF; }