/* themes.css — per-country / per-app theme token overrides. See oms/program-mobile-sap/design/DESIGN-per-country-theming.md for the design. Themable set ONLY: --baobab (accent — DS's existing accent var, already used across shell.css/components.css) --baobab-bg (accent tint background — DS's existing accent-bg pairing) --baobab-on (on-accent — new token: text/icon color rendered on top of --baobab) --ds-logo-asset (new token: background-image url for the masthead/splash logo slot) Nothing else may appear in a theme block: no spacing/radius/shadow/border/font tokens, no non-custom-property declarations, no selectors other than [data-ds-theme="ds-theme-"]. Selector matches both the document root () and a subtree (e.g. an embedded remote carrying its own attribute) per the design's §2.1/§3. */ [data-ds-theme="ds-theme-letterbox"] { --baobab: #33C46E; --baobab-bg: #DEF3E5; --baobab-on: #0A2013; --ds-logo-asset: url("/brand-cwg/cwg-mark.svg"); } /* CWG is a single-brand company (no MMD-style per-country variants); all three theme blocks below now carry the same CWG bio-gas green so the ds-theme mechanism keeps working for any caller that still sets it. */ [data-ds-theme="ds-theme-angola"] { --baobab: #33C46E; --baobab-bg: #DEF3E5; --baobab-on: #0A2013; --ds-logo-asset: url("/brand-cwg/cwg-mark.svg"); } [data-ds-theme="ds-theme-rwanda"] { --baobab: #33C46E; --baobab-bg: #DEF3E5; --baobab-on: #0A2013; --ds-logo-asset: url("/brand-cwg/cwg-mark.svg"); }