/* 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: #C8102E; --baobab-bg: #FBE9EC; --baobab-on: #FAFAF6; --ds-logo-asset: url("/brand-mmd/mmd-logo-red.svg"); } /* Angola — keeps the default baobab red identity. */ [data-ds-theme="ds-theme-angola"] { --baobab: #C8102E; --baobab-bg: #FBE9EC; --baobab-on: #FAFAF6; --ds-logo-asset: url("/brand-mmd/mmd-logo-red.svg"); } /* Rwanda — dignified steel-industry blue-grey accent, distinct from baobab red. */ [data-ds-theme="ds-theme-rwanda"] { --baobab: #2E4756; --baobab-bg: #E6EBEE; --baobab-on: #FAFAF6; --ds-logo-asset: url("/brand-mmd/mmd-logo.svg"); }