/* ========================================================================== VTH ReSkin — Sector palettes public/css/vth-reskin/tokens/sectors.css GENERATED from Light_tokens.json (Figma export, Light mode). Sections 1-4 are READ-ONLY. Do not hand-edit. Regenerate from the export. !! SECTION 0 IS HAND-AUTHORED AND MUST SURVIVE REGENERATION !! Section 2 resolves every default role token through --vth-brand-*, but the export does not emit a brand layer and nothing else in public/css/ defined one -- so all eight references dangled and every default resolved to nothing. An unresolved var() chain is invalid at computed-value time, so the property falls back to its inherited/initial value: primary buttons rendered with NO background on every platform page (which set data-vth-sector but never .vth--sector-themed, and therefore always resolve through section 2), on every unknown sector key, and on every page that loads this file without opting in. Section 0 supplies that missing layer. If this file is regenerated, carry section 0 forward or move it into vth-tokens.css first. See PHASE-0-ANALYSIS.md R-20. Three layers: 0. BRAND --vth-brand-* hand-authored fallbacks for the unthemed and platform case. See section 0. 1. PALETTE --vth-palette-* raw exported values. Never consumed directly by a component. 2. ROLE --vth-sector-* what components consume. Remapped per sector by the [data-vth-sector] blocks. Applies on PUBLIC website pages only, and only where the page carries .vth--sector-themed. Platform pages set data-vth-sector (for the sector tag and logo) but must NOT carry .vth--sector-themed. See .claude/skills/vth-reskin/references/sector-theming.md ========================================================================== */ /* ========================================================================== 0. BRAND -- HAND-AUTHORED, NOT GENERATED The brand ramp the unthemed, unknown-key and platform cases fall back to. Every value below is quoted from Light_default_colors.md (light mode); none is derived, mixed or picked by eye -- the same rule sector-theming.md #5 applies to the sector on-colours. Ramp direction matches the exported sector palettes: hover is a LIGHTER version of the base, focus a DARKER one. Contrast, measured (WCAG AA needs 4.5:1 for normal text): on-primary #FFFFFF on #192AC1 9.80:1 hover 8.17:1 focus 11.49:1 on-secondary #1D2C92 on #DAE9FF 9.35:1 hover 10.27:1 focus 5.86:1 All six pass. Unlike the sector Secondary ramp (see the C-11 note in section 3), no brand pairing is marginal. ========================================================================== */ :root { /* Buttons / Primary */ --vth-brand-primary: #192AC1; /* Typography / Blue / Hover Main Blue -- lighter than base */ --vth-brand-primary-hover: #1A2CE8; /* Typography / Blue / Secondary Dark -- darker than base */ --vth-brand-primary-focus: #1D2C92; /* Typography / Blue / Primary Light */ --vth-brand-on-primary: #FFFFFF; /* Buttons / Secondary Blue */ --vth-brand-secondary: #DAE9FF; /* BG / Blue / Light Blue -- lighter than base */ --vth-brand-secondary-hover: #EAF3FF; /* BG / Blue / Blue -- darker than base */ --vth-brand-secondary-focus: #93BAFF; /* Typography / Blue / Secondary Dark */ --vth-brand-on-secondary: #1D2C92; } /* ========================================================================== 1. PALETTE ========================================================================== */ :root { /* --- Childminder ------------------------------------------------------ */ --vth-palette-childminder-primary: #4A610B; --vth-palette-childminder-primary-hover: #556E06; --vth-palette-childminder-primary-focus: #243400; --vth-palette-childminder-secondary: #D6F090; --vth-palette-childminder-secondary-hover: #EEF9CE; --vth-palette-childminder-secondary-focus: #C4E86E; --vth-palette-childminder-type: #4A610B; --vth-palette-childminder-type-numbers: #32410A; --vth-palette-childminder-icon: #4A610B; --vth-palette-childminder-bg-light: #7C9E2F; --vth-palette-childminder-bg-dark: #4A610B; --vth-palette-childminder-bg-secondary: #D6F090; --vth-palette-childminder-bg-numbers: #DAEFA1; --vth-palette-childminder-bg-testimonial: #DAEFA1; --vth-palette-childminder-logo-light: #7C9E2F; --vth-palette-childminder-logo-dark: #4A610B; /* --- Foster care ------------------------------------------------------ */ --vth-palette-foster-care-primary: #AA3300; --vth-palette-foster-care-primary-hover: #8A2D04; --vth-palette-foster-care-primary-focus: #4B1300; --vth-palette-foster-care-secondary: #F0520E; --vth-palette-foster-care-secondary-hover: #F76A18; --vth-palette-foster-care-secondary-focus: #C13B0D; --vth-palette-foster-care-type: #AA3300; --vth-palette-foster-care-type-numbers: #7B2C0B; --vth-palette-foster-care-icon: #AA3300; --vth-palette-foster-care-bg-light: #E66022; --vth-palette-foster-care-bg-dark: #AA3300; --vth-palette-foster-care-bg-secondary: #F0520E; --vth-palette-foster-care-bg-numbers: #FBD3C1; --vth-palette-foster-care-bg-testimonial: #FBD3C1; --vth-palette-foster-care-logo-light: #E66022; --vth-palette-foster-care-logo-dark: #AA3300; /* --- Adult care ------------------------------------------------------- */ --vth-palette-adult-care-primary: #1051B3; --vth-palette-adult-care-primary-hover: #144A94; --vth-palette-adult-care-primary-focus: #112E5A; --vth-palette-adult-care-secondary: #C5DCFF; --vth-palette-adult-care-secondary-hover: #DAE8FF; --vth-palette-adult-care-secondary-focus: #91C0FF; --vth-palette-adult-care-type: #1051B3; --vth-palette-adult-care-icon: #1051B3; --vth-palette-adult-care-bg-light: #1A6DFF; --vth-palette-adult-care-bg-dark: #1051B3; --vth-palette-adult-care-bg-secondary: #C5DCFF; --vth-palette-adult-care-bg-numbers: #E5EFFF; --vth-palette-adult-care-bg-testimonial: #DAE9FF; --vth-palette-adult-care-logo-light: #1A6DFF; --vth-palette-adult-care-logo-dark: #1051B3; /* --- Leaving care ----------------------------------------------------- */ --vth-palette-leaving-care-primary: #0E570B; --vth-palette-leaving-care-primary-hover: #0D6D07; --vth-palette-leaving-care-primary-focus: #003300; --vth-palette-leaving-care-secondary: #F090C4; --vth-palette-leaving-care-secondary-hover: #F9D1E9; --vth-palette-leaving-care-secondary-focus: #E3519C; --vth-palette-leaving-care-type: #0E570B; --vth-palette-leaving-care-type-numbers: #6E0F43; --vth-palette-leaving-care-icon: #0E570B; --vth-palette-leaving-care-bg-light: #3FAE49; --vth-palette-leaving-care-bg-dark: #0E570B; --vth-palette-leaving-care-bg-secondary: #F090C4; --vth-palette-leaving-care-bg-numbers: #FFD7EC; --vth-palette-leaving-care-bg-testimonial: #FFD7EC; --vth-palette-leaving-care-logo-light: #3FAE49; --vth-palette-leaving-care-logo-dark: #0E570B; /* --- Social worker ---------------------------------------------------- */ --vth-palette-social-worker-primary: #A31A26; --vth-palette-social-worker-primary-hover: #BC1927; --vth-palette-social-worker-primary-focus: #811B24; --vth-palette-social-worker-secondary: #FFB900; --vth-palette-social-worker-secondary-hover: #FFD91B; --vth-palette-social-worker-secondary-focus: #E28E00; --vth-palette-social-worker-type: #A31A26; --vth-palette-social-worker-icon: #A31A26; --vth-palette-social-worker-bg-light: #C43C32; --vth-palette-social-worker-bg-dark: #A31A26; --vth-palette-social-worker-bg-secondary: #FFB900; --vth-palette-social-worker-bg-numbers: #FFDA79; --vth-palette-social-worker-bg-testimonial: #FFDA79; --vth-palette-social-worker-bg-affiliate: #FBE4E2; --vth-palette-social-worker-logo-light: #C43C32; --vth-palette-social-worker-logo-dark: #A31A26; /* --- Childrens home --------------------------------------------------- */ --vth-palette-childrens-home-primary: #881473; --vth-palette-childrens-home-primary-hover: #B31898; --vth-palette-childrens-home-primary-focus: #500240; --vth-palette-childrens-home-secondary: #FFB900; --vth-palette-childrens-home-secondary-hover: #FFD91B; --vth-palette-childrens-home-secondary-focus: #E28E00; --vth-palette-childrens-home-type: #881473; --vth-palette-childrens-home-icon: #881473; --vth-palette-childrens-home-bg-light: #DC31BD; --vth-palette-childrens-home-bg-dark: #881473; --vth-palette-childrens-home-bg-secondary: #FFB900; --vth-palette-childrens-home-bg-numbers: #FFDA79; --vth-palette-childrens-home-bg-testimonial: #FFF2D1; --vth-palette-childrens-home-bg-affiliate: #FAE4F6; --vth-palette-childrens-home-logo-light: #DC31BD; --vth-palette-childrens-home-logo-dark: #881473; /* --- Childrens services ----------------------------------------------- */ --vth-palette-childrens-services-primary: #0D4B50; --vth-palette-childrens-services-primary-hover: #0A5E65; --vth-palette-childrens-services-primary-focus: #002D33; --vth-palette-childrens-services-secondary: #FFB900; --vth-palette-childrens-services-secondary-hover: #FFD91B; --vth-palette-childrens-services-secondary-focus: #E28E00; --vth-palette-childrens-services-type: #0D4B50; --vth-palette-childrens-services-icon: #0D4B50; --vth-palette-childrens-services-bg-light: #008C89; --vth-palette-childrens-services-bg-dark: #0D4B50; --vth-palette-childrens-services-bg-secondary: #FFB900; --vth-palette-childrens-services-bg-numbers: #FFDA79; --vth-palette-childrens-services-bg-testimonial: #FFB900; --vth-palette-childrens-services-bg-affiliate: #CBF4F3; --vth-palette-childrens-services-logo-light: #008C89; --vth-palette-childrens-services-logo-dark: #0D4B50; /* --- Early years ------------------------------------------------------ */ --vth-palette-early-years-primary: #6E13A2; --vth-palette-early-years-primary-hover: #8F10E0; --vth-palette-early-years-primary-focus: #44006D; --vth-palette-early-years-secondary: #DEF090; --vth-palette-early-years-secondary-hover: #F2F9CE; --vth-palette-early-years-secondary-focus: #CFE86E; --vth-palette-early-years-type: #6E13A2; --vth-palette-early-years-type-numbers: #383F1D; --vth-palette-early-years-icon: #6E13A2; --vth-palette-early-years-bg-light: #B345F2; --vth-palette-early-years-bg-dark: #6E13A2; --vth-palette-early-years-bg-secondary: #DEF090; --vth-palette-early-years-bg-numbers: #E8F8A7; --vth-palette-early-years-bg-testimonial: #E8F8A7; --vth-palette-early-years-logo-light: #B345F2; --vth-palette-early-years-logo-dark: #6E13A2; /* --- Education -------------------------------------------------------- */ --vth-palette-education-primary: #1841C8; --vth-palette-education-primary-hover: #183790; --vth-palette-education-primary-focus: #142357; --vth-palette-education-secondary: #FFB900; --vth-palette-education-secondary-hover: #FFD91B; --vth-palette-education-secondary-focus: #E28E00; --vth-palette-education-type: #1841C8; --vth-palette-education-icon: #1841C8; --vth-palette-education-bg-light: #1841C8; --vth-palette-education-bg-dark: #0A30AE; --vth-palette-education-bg-secondary: #FFB900; --vth-palette-education-bg-numbers: #FFDA79; --vth-palette-education-bg-testimonial: #DAE9FF; --vth-palette-education-logo-light: #1841C8; --vth-palette-education-logo-dark: #0A30AE; } /* ========================================================================== 2. ROLE TOKENS — defaults Unthemed pages, unknown sector keys, and all platform pages resolve here. These fall back to the brand tokens in tokens.css, so a missing or unrecognised sector renders the standard brand treatment. Never a broken or unstyled page. ========================================================================== */ :root { --vth-sector-primary: var(--vth-brand-primary); --vth-sector-primary-hover: var(--vth-brand-primary-hover); --vth-sector-primary-focus: var(--vth-brand-primary-focus); --vth-sector-on-primary: var(--vth-brand-on-primary); --vth-sector-secondary: var(--vth-brand-secondary); --vth-sector-secondary-hover: var(--vth-brand-secondary-hover); --vth-sector-secondary-focus: var(--vth-brand-secondary-focus); --vth-sector-on-secondary: var(--vth-brand-on-secondary); --vth-sector-tag-bg: var(--vth-brand-primary); --vth-sector-tag-text: var(--vth-brand-on-primary); } /* ========================================================================== 3. ROLE TOKENS — per sector CONTRAST NOTE The export supplies background values only; it does not supply on-colour values. --vth-sector-on-primary and --vth-sector-on-secondary below are PROPOSED and require design sign-off (INSTRUCTIONS C-10). Proposal: every Primary state takes white. Every Secondary state takes the sector's own Primary/Focus value as ink. Foster care Secondary (#4B1300 on #F0520E) measures approximately 4.3:1 — marginally under WCAG AA for normal text. Flagged as C-11. ========================================================================== */ .vth--sector-themed[data-vth-sector="childminder"] { --vth-sector-primary: var(--vth-palette-childminder-primary); --vth-sector-primary-hover: var(--vth-palette-childminder-primary-hover); --vth-sector-primary-focus: var(--vth-palette-childminder-primary-focus); --vth-sector-on-primary: #FFFFFF; --vth-sector-secondary: var(--vth-palette-childminder-secondary); --vth-sector-secondary-hover: var(--vth-palette-childminder-secondary-hover); --vth-sector-secondary-focus: var(--vth-palette-childminder-secondary-focus); --vth-sector-on-secondary: var(--vth-palette-childminder-primary-focus); --vth-sector-tag-bg: var(--vth-palette-childminder-primary); --vth-sector-tag-text: #FFFFFF; } .vth--sector-themed[data-vth-sector="foster-care"] { --vth-sector-primary: var(--vth-palette-foster-care-primary); --vth-sector-primary-hover: var(--vth-palette-foster-care-primary-hover); --vth-sector-primary-focus: var(--vth-palette-foster-care-primary-focus); --vth-sector-on-primary: #FFFFFF; --vth-sector-secondary: var(--vth-palette-foster-care-secondary); --vth-sector-secondary-hover: var(--vth-palette-foster-care-secondary-hover); --vth-sector-secondary-focus: var(--vth-palette-foster-care-secondary-focus); --vth-sector-on-secondary: var(--vth-palette-foster-care-primary-focus); /* C-11 */ --vth-sector-tag-bg: var(--vth-palette-foster-care-primary); --vth-sector-tag-text: #FFFFFF; } .vth--sector-themed[data-vth-sector="adult-care"] { --vth-sector-primary: var(--vth-palette-adult-care-primary); --vth-sector-primary-hover: var(--vth-palette-adult-care-primary-hover); --vth-sector-primary-focus: var(--vth-palette-adult-care-primary-focus); --vth-sector-on-primary: #FFFFFF; --vth-sector-secondary: var(--vth-palette-adult-care-secondary); --vth-sector-secondary-hover: var(--vth-palette-adult-care-secondary-hover); --vth-sector-secondary-focus: var(--vth-palette-adult-care-secondary-focus); --vth-sector-on-secondary: var(--vth-palette-adult-care-primary-focus); --vth-sector-tag-bg: var(--vth-palette-adult-care-primary); --vth-sector-tag-text: #FFFFFF; } .vth--sector-themed[data-vth-sector="leaving-care"] { --vth-sector-primary: var(--vth-palette-leaving-care-primary); --vth-sector-primary-hover: var(--vth-palette-leaving-care-primary-hover); --vth-sector-primary-focus: var(--vth-palette-leaving-care-primary-focus); --vth-sector-on-primary: #FFFFFF; --vth-sector-secondary: var(--vth-palette-leaving-care-secondary); --vth-sector-secondary-hover: var(--vth-palette-leaving-care-secondary-hover); --vth-sector-secondary-focus: var(--vth-palette-leaving-care-secondary-focus); --vth-sector-on-secondary: var(--vth-palette-leaving-care-primary-focus); --vth-sector-tag-bg: var(--vth-palette-leaving-care-primary); --vth-sector-tag-text: #FFFFFF; } .vth--sector-themed[data-vth-sector="social-worker"] { --vth-sector-primary: var(--vth-palette-social-worker-primary); --vth-sector-primary-hover: var(--vth-palette-social-worker-primary-hover); --vth-sector-primary-focus: var(--vth-palette-social-worker-primary-focus); --vth-sector-on-primary: #FFFFFF; --vth-sector-secondary: var(--vth-palette-social-worker-secondary); --vth-sector-secondary-hover: var(--vth-palette-social-worker-secondary-hover); --vth-sector-secondary-focus: var(--vth-palette-social-worker-secondary-focus); --vth-sector-on-secondary: var(--vth-palette-social-worker-primary-focus); --vth-sector-tag-bg: var(--vth-palette-social-worker-primary); --vth-sector-tag-text: #FFFFFF; } .vth--sector-themed[data-vth-sector="childrens-home"] { --vth-sector-primary: var(--vth-palette-childrens-home-primary); --vth-sector-primary-hover: var(--vth-palette-childrens-home-primary-hover); --vth-sector-primary-focus: var(--vth-palette-childrens-home-primary-focus); --vth-sector-on-primary: #FFFFFF; --vth-sector-secondary: var(--vth-palette-childrens-home-secondary); --vth-sector-secondary-hover: var(--vth-palette-childrens-home-secondary-hover); --vth-sector-secondary-focus: var(--vth-palette-childrens-home-secondary-focus); --vth-sector-on-secondary: var(--vth-palette-childrens-home-primary-focus); --vth-sector-tag-bg: var(--vth-palette-childrens-home-primary); --vth-sector-tag-text: #FFFFFF; } .vth--sector-themed[data-vth-sector="childrens-services"] { --vth-sector-primary: var(--vth-palette-childrens-services-primary); --vth-sector-primary-hover: var(--vth-palette-childrens-services-primary-hover); --vth-sector-primary-focus: var(--vth-palette-childrens-services-primary-focus); --vth-sector-on-primary: #FFFFFF; --vth-sector-secondary: var(--vth-palette-childrens-services-secondary); --vth-sector-secondary-hover: var(--vth-palette-childrens-services-secondary-hover); --vth-sector-secondary-focus: var(--vth-palette-childrens-services-secondary-focus); --vth-sector-on-secondary: var(--vth-palette-childrens-services-primary-focus); --vth-sector-tag-bg: var(--vth-palette-childrens-services-primary); --vth-sector-tag-text: #FFFFFF; } .vth--sector-themed[data-vth-sector="early-years"] { --vth-sector-primary: var(--vth-palette-early-years-primary); --vth-sector-primary-hover: var(--vth-palette-early-years-primary-hover); --vth-sector-primary-focus: var(--vth-palette-early-years-primary-focus); --vth-sector-on-primary: #FFFFFF; --vth-sector-secondary: var(--vth-palette-early-years-secondary); --vth-sector-secondary-hover: var(--vth-palette-early-years-secondary-hover); --vth-sector-secondary-focus: var(--vth-palette-early-years-secondary-focus); --vth-sector-on-secondary: var(--vth-palette-early-years-primary-focus); --vth-sector-tag-bg: var(--vth-palette-early-years-primary); --vth-sector-tag-text: #FFFFFF; } .vth--sector-themed[data-vth-sector="education"] { --vth-sector-primary: var(--vth-palette-education-primary); --vth-sector-primary-hover: var(--vth-palette-education-primary-hover); --vth-sector-primary-focus: var(--vth-palette-education-primary-focus); --vth-sector-on-primary: #FFFFFF; --vth-sector-secondary: var(--vth-palette-education-secondary); --vth-sector-secondary-hover: var(--vth-palette-education-secondary-hover); --vth-sector-secondary-focus: var(--vth-palette-education-secondary-focus); --vth-sector-on-secondary: var(--vth-palette-education-primary-focus); --vth-sector-tag-bg: var(--vth-palette-education-primary); --vth-sector-tag-text: #FFFFFF; } /* ========================================================================== 4. SECTOR TAG — platform surfaces Platform pages carry data-vth-sector WITHOUT .vth--sector-themed, so their buttons stay on the brand palette. Only the sector tag and the sector logo take the sector colour. ========================================================================== */ .vth:not(.vth--sector-themed)[data-vth-sector="childminder"] { --vth-sector-tag-bg: var(--vth-palette-childminder-primary); } .vth:not(.vth--sector-themed)[data-vth-sector="foster-care"] { --vth-sector-tag-bg: var(--vth-palette-foster-care-primary); } .vth:not(.vth--sector-themed)[data-vth-sector="adult-care"] { --vth-sector-tag-bg: var(--vth-palette-adult-care-primary); } .vth:not(.vth--sector-themed)[data-vth-sector="leaving-care"] { --vth-sector-tag-bg: var(--vth-palette-leaving-care-primary); } .vth:not(.vth--sector-themed)[data-vth-sector="social-worker"] { --vth-sector-tag-bg: var(--vth-palette-social-worker-primary); } .vth:not(.vth--sector-themed)[data-vth-sector="childrens-home"] { --vth-sector-tag-bg: var(--vth-palette-childrens-home-primary); } .vth:not(.vth--sector-themed)[data-vth-sector="childrens-services"] { --vth-sector-tag-bg: var(--vth-palette-childrens-services-primary); } .vth:not(.vth--sector-themed)[data-vth-sector="early-years"] { --vth-sector-tag-bg: var(--vth-palette-early-years-primary); } .vth:not(.vth--sector-themed)[data-vth-sector="education"] { --vth-sector-tag-bg: var(--vth-palette-education-primary); } /* ========================================================================== 5. SECTOR TAG — coloured by the COURSE's sector, not the page's !! HAND-AUTHORED, LIKE SECTION 0. MUST SURVIVE REGENERATION. !! The export does not emit this; sections 1-4 do. Sections 3 and 4 both key off [data-vth-sector] on , i.e. the SURFACE's sector. That is right for the page theme and wrong for the tag: on a public sector site the page is themed by the DOMAIN the visitor is on, while the tag names the COURSE's own sector. A Foster Care course browsed on the Children's Home site was therefore labelled "Foster Care" in Children's Home colours. These rules redefine the two role tokens ON THE TAG ITSELF, from the key the component puts in data-vth-sector-tag. A custom property set on an element wins over one inherited from an ancestor, so this overrides regardless of the body rule's specificity, and it needs no !important. Only the role tokens are touched, so nothing else on the page re-themes, and --vth-palette-* stays unconsumed by components (the mapping lives here, which is this file's job). A sector with no palette simply matches nothing and falls back to the section 0/2 brand defaults. ========================================================================== */ .vth [data-vth-sector-tag="childminder"]{ --vth-sector-tag-bg: var(--vth-palette-childminder-primary); --vth-sector-tag-text: #FFFFFF; } .vth [data-vth-sector-tag="foster-care"]{ --vth-sector-tag-bg: var(--vth-palette-foster-care-primary); --vth-sector-tag-text: #FFFFFF; } .vth [data-vth-sector-tag="adult-care"]{ --vth-sector-tag-bg: var(--vth-palette-adult-care-primary); --vth-sector-tag-text: #FFFFFF; } .vth [data-vth-sector-tag="leaving-care"]{ --vth-sector-tag-bg: var(--vth-palette-leaving-care-primary); --vth-sector-tag-text: #FFFFFF; } .vth [data-vth-sector-tag="social-worker"]{ --vth-sector-tag-bg: var(--vth-palette-social-worker-primary); --vth-sector-tag-text: #FFFFFF; } .vth [data-vth-sector-tag="childrens-home"]{ --vth-sector-tag-bg: var(--vth-palette-childrens-home-primary); --vth-sector-tag-text: #FFFFFF; } .vth [data-vth-sector-tag="childrens-services"]{ --vth-sector-tag-bg: var(--vth-palette-childrens-services-primary); --vth-sector-tag-text: #FFFFFF; } .vth [data-vth-sector-tag="early-years"]{ --vth-sector-tag-bg: var(--vth-palette-early-years-primary); --vth-sector-tag-text: #FFFFFF; } .vth [data-vth-sector-tag="education"]{ --vth-sector-tag-bg: var(--vth-palette-education-primary); --vth-sector-tag-text: #FFFFFF; } /* ========================================================================== 6. BRAND -> SECTOR on a themed page !! HAND-AUTHORED, LIKE SECTIONS 0 AND 5. MUST SURVIVE REGENERATION. !! Components consume the BRAND tokens (--vth-blue, --text-on-blue, --text-link) because that is what the design system is built on. Section 3 only remaps the --vth-sector-* ROLE tokens, which almost nothing reads directly — so on a sector domain the page was still brand blue everywhere except the sector tag: measured, --vth-sector-primary was #0D4B50 while every primary button rendered #192AC1. Pointing the brand family at the role tokens fixes it in ONE place instead of editing every component: buttons, links, focus rings, the benefit tiles, the section eyebrows and anything added later all follow the sector automatically. SCOPE. This keys off .vth--sector-themed, which SectorThemeResolver sets only when $themed is true — public surfaces, and only the two course-detail controllers set it at all. Platform pages carry data-vth-sector WITHOUT this class (decision C-8: the platform keeps the brand palette), so none of this reaches them. Off a sector domain the role tokens still resolve to --vth-brand-*, so the page is brand blue and byte-identical to before. NOT REMAPPED, deliberately: --badge-*, the format colours and the status colours. They carry MEANING rather than identity and must read the same on every sector (sector-theming.md section 6), and none of them goes through the brand blue. ========================================================================== */ .vth--sector-themed { --vth-blue: var(--vth-sector-primary); --vth-blue-hover: var(--vth-sector-primary-hover); --vth-blue-focus: var(--vth-sector-primary-focus); --text-on-blue: var(--vth-sector-on-primary); --text-link: var(--vth-sector-primary); } /* The soft surface has no sector role token, so it is mixed from the primary — a dark sector ink on a pale BLUE disc would be the one pairing left out of step. Guarded: without color-mix the pale blue stands, which still reads correctly because every sector primary is dark. */ @supports (color: color-mix(in srgb, red 50%, blue)) { .vth--sector-themed { --surface-blue-soft: color-mix(in srgb, var(--vth-sector-primary) 10%, #FFFFFF); } }