:root{ --lp:#1a6a6a;--lp-d:#0f4747;--lp-m:#278585;--lp-t:rgba(26,106,106,.07); --lo:#cf9526;--lo-h:#b8811c;--lo-l:rgba(207,149,38,.13);--lo-p:rgba(207,149,38,.06); --bg:#f2f7f7;--wh:#fff;--g100:#e6f1f1;--g200:#cfe2e2;--g400:#7ea6a6;--g600:#4f6f6f; --tx:#0f2222;--txs:#3d5555;--txm:#566d6d;--bdr:#d5e4e4;/* --txm darkened from #7ea6a6 to meet WCAG AA (~4.7:1) on --bg; dark mode overrides it below */ /* Pillar accent when it is drawn as TEXT. Light mode: identical to the accents in js/08-academy.js, so this theme renders exactly as before — they already measure 7.07 / 4.96 / 4.55 against --bg. Dark overrides below. The names are derived from the pillar id in JS, never typed. */ /* Amber as TEXT, and the ink that goes ON amber. --lo (#cf9526) is the brand accent and is theme-invariant. As a BACKGROUND it is fine; the failures are the two ways it meets text. --lo-ink is the label colour for a filled amber button. White on #cf9526 measures 2.63:1 — the primary CTA of the product, well under AA. Ink gives 6.27:1 at rest and 4.87:1 on the --lo-h hover, and leaves the amber itself untouched, so the button looks like the same button. --lo-t is amber used as text on a light surface: 2.63:1 on a white card. Darkened to #8f671a (5.08 card / 4.70 page / 4.53 on the amber tint), hue kept. Dark mode needs no change at all — the brand amber already measures 6.62 on the dark card and 7.38 on the dark page, so --lo-t there IS #cf9526 and the signature colour is preserved exactly where it already worked. */ --lo-ink:#0f2222; --lo-t:#8b6419; /* Amber on the TEAL hero, which is #1a6a6a in both themes. This is the opposite correction to --lo-t: the surface is dark, so the accent has to go lighter, not darker. --lo itself measures 2.41:1 there and --lo-t made it 1.24 — the sweep caught that regression immediately, which is the reason a single amber token cannot serve both surfaces. */ --lo-on-teal:#efd7a8; /* Teal as TEXT on a teal tint — the same shape as --lo-t. --lp-m (#278585) measures 3.97:1 on the .leg-tag tint, which is 356 elements in the Lexicon alone. #247c7c is 4.51 there, hue kept. */ /* Verified as the ROUNDED hex, not the float the solver produced. #247c7c computed 4.51 before rounding and measured 4.47 in the browser after — the rounding step costs a few hundredths, which is the difference between passing and not when a value is chosen at the floor. */ --lp-tx:#237878; /* Status green as TEXT. --ok (#16a34a) is a fill colour; on its own tints it measures 2.84-3.00 as text. #117b38 is 4.64-5.37 across the surfaces it lands on, hue kept. */ --ok-t:#117b38; --pt-regulations:#7b358f;--pt-care:#0e7490;--pt-leadership:#a16207; /* The search-results strip borrows --lo rather than a pillar accent. As TEXT on the light page that amber measures 2.43:1 — the worst contrast in the Academy in either theme, and the only one that fails in LIGHT mode. Darkened to #91681b (4.61 page / 4.99 card), hue 39.4deg kept. Dark mode keeps #cf9526, which already measures 7.38:1 there. */ --pt-search:#91681b; --ok:#16a34a;--ok-l:#dcfce7;--er:#dc2626;--er-l:#fee2e2; --wa:#d97706;--wa-l:#fef3c7;--inf:#2563eb;--inf-l:#dbeafe; --fd:'Playfair Display',Georgia,serif;--fb:'Nunito',system-ui,sans-serif;--heading:var(--lp); --r:10px;--rs:6px;--rl:16px; --sh:0 2px 12px rgba(26,106,106,.09);--shm:0 4px 20px rgba(26,106,106,.13);--shl:0 8px 32px rgba(26,106,106,.17); /* Z-INDEX SCALE — single source of truth. Each layer leaves room above for related elements (e.g. a popover sitting on top of its modal). Use these custom properties for new components instead of raw numbers. */ --z-base:1; --z-sticky:1040; /* main nav, sticky tab bars */ --z-dropdown:1100; /* nav submenu */ --z-fab:2000; /* floating action elements */ --z-mob-nav:9000; /* bottom mobile nav */ --z-a11y:9998; /* a11y settings widget */ --z-toast:9999; /* toast notifications */ --z-modal:10000; /* modal overlays, level-up, search */ --z-modal-popover:10001; /* popovers/menus inside a modal */ --z-boot-error:99999; /* last-resort boot failure dialog */ } *,*::before,*::after{box-sizing:border-box} /* color-scheme tells the browser what mode native UI (form controls, scrollbars, the open dropdown list of for keyboard a11y; visual weight matches the chips above. */ .case-filter-select{ width:100%;border:1.5px solid var(--bdr);background-color:var(--wh); border-radius:2rem;padding:.42rem 2.1rem .42rem 1rem; font-family:var(--fb);font-size:.82rem;font-weight:600;color:var(--tx); cursor:pointer;transition:border-color .15s,box-shadow .15s; /* Tell the browser the closed control matches the page's color scheme, so the OPEN dropdown list (which is browser-native) renders with the same light/dark scheme as the rest of the page. Without this hint, Chrome/Edge sometimes pick the OS preference instead of the app's theme, causing the dropdown list to flash light when the page is dark (the bug that looked like "theme reverts after selection"). */ color-scheme:light; /* Custom dropdown chevron — single source so all selects look identical across browsers. Light-mode SVG (brand purple chevron); dark-mode override below uses a lighter version so it remains visible against the dark dropdown surface. */ appearance:none;-webkit-appearance:none;-moz-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right .7rem center;background-size:.85rem; } .case-filter-select:hover{border-color:var(--g400)} .case-filter-select:focus{outline:none;border-color:var(--lo);box-shadow:0 0 0 3px rgba(207,149,38,.15)} /* Visual hint when a select has been changed away from default — softer colored border so the eye picks out which filters are set without needing to read each value. */ .case-filter-select.is-active{border-color:var(--lo);background-color:var(--lo-p)} /* Dark-mode chevron + color-scheme. Without these, the open dropdown list inherits the system preference instead of the app's dark theme, producing the "theme flips on selection" perception. Explicit background-color + color overrides act as defense in depth in case any browser auto-dark-mode override is interfering. */ body.liq-dark .case-filter-select{ color-scheme:dark; background-color:var(--wh); color:var(--tx); border-color:var(--bdr); background-image:url("data:image/svg+xml;utf8,"); } /* Explicit