:root{ --lp:#331638;--lp-d:#1f0e25;--lp-m:#4a2255;--lp-t:rgba(51,22,56,.07); --lo:#f47f20;--lo-h:#d96d10;--lo-l:rgba(244,127,32,.13);--lo-p:rgba(244,127,32,.06); --bg:#f7f4fa;--wh:#fff;--g100:#f0ecf5;--g200:#ddd6e6;--g400:#9b8faa;--g600:#6b5778; --tx:#1a0f22;--txs:#5a4866;--txm:#766a85;--bdr:#e4dcea;/* --txm darkened from #9b8faa to meet WCAG AA (4.6:1 on --bg, 5.0:1 on white); dark mode overrides it below */ --ok:#16a34a;--ok-l:#dcfce7;--er:#dc2626;--er-l:#fee2e2; --wa:#d97706;--wa-l:#fef3c7;--inf:#2563eb;--inf-l:#dbeafe; /* THE STATUS COLOUR AS TEXT IS A DIFFERENT COLOUR FROM THE STATUS COLOUR AS AN OBJECT. --ok/--wa/--er/--inf above are tuned as borders, fills and radio dots, where 3:1 is the bar. They were also being read as small bold TEXT in 330 places — badge labels, chip text, step counters, KPI figures — where the bar is 4.5:1, and every one of the four missed it. MEASURED against every background each is actually painted on, which includes the matching -l tint, because a badge is `background:var(--ok-l);color:var(--ok)`: light --ok 2.83 --wa 2.73 --er 3.95 --inf 4.24 (worst case) dark --ok 3.93 --wa 3.96 --er 2.89 --inf 2.65 Each fails in exactly ONE theme, which is why a single set of values cannot fix it and why the -text tokens are redefined per theme below. Values are the smallest lightness move from the base hue that clears 4.5:1 on the WORST background the token is actually used on — enumerate the consumers first, then tune to the strictest one among them. Ratios in the comments are the worst case, not the best. */ --ok-text:#117c38; /* 4.55 on --g100, 4.82 on --ok-l, 5.30 on card */ --wa-text:#a25904; /* 4.54 on --g100, 4.75 on --wa-l, 5.29 on card */ --er-text:#cc2121; /* 4.52 on --er-l, 4.73 on --g100, 5.52 on card */ --inf-text:#1d5dea; /* 4.52 on --inf-l, 4.73 on --g100, 5.52 on card */ --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(51,22,56,.09);--shm:0 4px 20px rgba(51,22,56,.13);--shl:0 8px 32px rgba(51,22,56,.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(244,127,32,.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