/* LCP-PUBLIC-INSTALLATION-THEME-GRANORT-001 (ADR 032 §4 amendment, second rework after QA NO_GO QA-…-AXE-CONTRAST-002). Mechanism change, not a third round of specificity tuning -- Owner decision 2026-08-10 (spec R3b): the semantic token layer is the approved re-skin seam. Why the first two attempts failed, in order: (1) f47d898 shipped granort rules inside the same bundled stylesheet core-native loads; ties in specificity went to whichever rule the page's own component graph happened to emit last, unpredictably. (2) 5c20114 moved those rules to this file, loaded via a placed as the last element of -- which reliably wins DOCUMENT-ORDER TIES. It does not reliably win outright: Astro appends one [data-astro-cid-*] attribute per compound part of a selector, so a descendant rule like `.footer-navigation h2` compiles to `.footer-navigation[data-astro-cid-x] h2[data-astro-cid-x]` at specificity (0,3,1), while this file's override `[data-theme="granort"] .footer-navigation h2` sits at (0,2,1) and LOSES outright -- document order never gets consulted, because order only breaks ties, and a compound selector is not a tie. A single-class override (`.site-footer`) DOES tie at equal specificity and IS won by position, which is why the footer background applied while the heading text inside it did not: two rules in the same file, two different outcomes, no way to predict which from the source alone. The fix: stop competing for the `color`/`background` declaration at all. Every rule below sets CUSTOM PROPERTIES (--text, --primary, --accent, --surface) on a container element that core-native's EXISTING rules already read via var(...) -- `.footer-navigation h2` already does `color: var(--text)`. Custom properties inherit down the DOM regardless of which stylesheet rule's specificity produced the `color` declaration that consumes them: a direct declaration on an element always wins over an inherited one, with no specificity contest, because that comparison happens before specificity is ever considered. Core-native's own rule, completely unmodified, then reads a different value and renders it -- correct by construction, for every descendant, including compound/nested selectors this file can no longer see or predict. Two scopes, not a global remap (R3b: no general token refactor, no broad restyle): the navy chrome (header/utility strip/footer) needs a LIGHT orange for text-on-navy legibility; the unchanged light main content needs a DARK orange for text-on-white legibility and for white text on an orange button background. No single hue clears both WCAG 4.5:1 pairings at once, which is why there are two distinct `--primary`/`--accent` values below, not one theme color reused everywhere. The one addition that is not a token: current-page navigation styling. Core-native has no rule at all for [aria-current="page"] to redirect, so there is nothing to lose a specificity contest against -- this is additive, not an override, and stays sourced from var(--primary) so it still moves with the token scope it sits in. Mechanism this file still relies on, already proved by QA and unchanged here: a plain static asset, never bundled by Astro, linked as the LAST element of (see CoreNativeShell.astro), scoped entirely by the `[data-theme="granort"]` attribute set on -- a core-native render never matches anything here. The unhashed asset path is separate, known Ops debt (LCP-OPS-PUBLIC-THEME-ASSET-CACHING-001) and is not addressed by this candidate. */ [data-theme="granort"] .utility-strip { --surface: #17385c; --text: #ffffff; --primary: #fb923c; --accent: #fb923c; } [data-theme="granort"] .site-header { --surface: #0f2540; --text: #ffffff; --primary: #fb923c; --accent: #fb923c; } [data-theme="granort"] .site-footer { --surface: #0f2540; --text: #ffffff; --primary: #fb923c; --accent: #fb923c; } [data-theme="granort"] .site-main { --text: #0f2540; --primary: #c2410c; --accent: #c2410c; } /* Additive, not an override -- see explanation above. */ [data-theme="granort"] .desktop-navigation a[aria-current="page"], [data-theme="granort"] .nav-panel a[aria-current="page"] { color: var(--primary); text-decoration: underline; text-underline-offset: .22em; }