:root{ --lp:#2b3a47;--lp-d:#1d2830;--lp-m:#3c4f5f;--lp-t:rgba(43,58,71,.07); --lo:#0a7a55;--lo-h:#086345;--lo-l:rgba(10,122,85,.13);--lo-p:rgba(10,122,85,.06); /* The accent as a FOREGROUND on the graphite surfaces (--lp / --lp-d / --lp-m). --lo itself measures 2.18:1 on --lp and is unreadable there. No sibling product has this token: crimson on deep blue separates by hue as well as luminance, and dark emerald on dark slate separates by neither. #4ed3a1 measures 6.20 on --lp and 4.51 on --lp-m. Any rule putting the accent on a dark brand surface must use this. */ --lo-od:#4ed3a1; /* PILLAR ACCENTS. One per pillar, defined here rather than in js/08 so dark mode resolves through the cascade instead of through a second JS table. js/08's PILLARS[].accent references these by name. These are load-bearing beyond decoration: the Academy rebuild makes an accent a whole pillar's identity — a 2px shelf rule and a card edge — where it used to be a small chip. Two constraints apply, and tools/check-contrast.mjs enforces both rather than trusting this comment: 1. WCAG 1.4.11 — a 2px rule is a graphical object, so >=3:1 against whatever surface it sits on. Every accent below clears it on the light page, the white card AND the dark page. 2. dE2000 >= 20 between any two accents, in BOTH themes. Perceptual difference, not contrast: two colours can each be legible and still be indistinguishable from each other. The Function was #46527a and measured dE 9.4 from The Profession — two slate blues barely further apart than two shades WITHIN one pillar (5.9). Hue alone could not fix it (both sit at L* 35-37, and dE2000 weights lightness heavily; hue-only candidates topped out at 13.5). Staying indigo and clearing 20 required #a82ee5, an electric neon. Plum at hue ~293 gets there at chroma 32 — LOWER chroma than several colours already shipping here. Weakest pair anywhere is now 22.7. */ --pillar-profession:#3f5b72; --pillar-designations:#0f7a55; --pillar-function:#5e3663; /* The same pillar as TEXT. Eight rules in the Academy colour text with the pillar accent — the context heading, the selected pillar's label and glyph, the panel eyebrow, a card's pillar label and path step, and the two boundary-callout icons — and their threshold is 4.5:1 on 11-16px type, not the 3:1 the object values are tuned to. In light mode these are the accents unchanged (7.12 / 5.34 / 9.62 on white), so nothing moves; the dark block lifts them. Splitting the token rather than lifting --pillar-* keeps every ring, rule and border exactly as measured above. */ --pillar-text-profession:#3f5b72; --pillar-text-designations:#0f7a55; --pillar-text-function:#5e3663; --bg:#f4f6f7;--wh:#fff;--g100:#eaeef0;--g200:#d7dee2;--g400:#8b9aa4;--g600:#55636d; --tx:#131b21;--txs:#3c4a54;--txm:#55636d;--bdr:#dae0e4;/* --txm darkened from #8b9aa4 to meet WCAG AA (~5.2:1) on --bg; 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; /* Badge text. --ok/--wa/--er are tuned to read as icons and borders against the page, not as small text on their own tint: --wa on --wa-l is only 2.9:1. These are the same hues darkened to clear WCAG AA (4.5:1) for the 0.68rem bold text used on status pills. Overridden for dark mode, where the tints are .18 alpha. */ --ok-bt:#166534;--wa-bt:#92400e;--er-bt:#991b1b; /* TEXT ON AN ACCENT OR STATUS FILL. 31 rules wrote `background:var(--lo)` with a hardcoded `color:#fff`, which is correct in light — --lo is #0a7a55 there, 5.35:1 — and wrong in dark, where --lo becomes the bright #2fbc8a and white falls to 2.42:1. Worse in high contrast: --lo is #7ff0c4 and white reads 1.38:1, on the setting people turn on BECAUSE they need contrast. Every fill in this family inverts lightness between the themes, so the text on it inverts too. Measured across all four combinations: light light+hc dark dark+hc --lo #fff 5.35 8.02 | #10171d 7.47 13.05 --lo-h #fff 7.29 11.19 | #10171d 9.60 14.54 --ok-bt #fff 7.13 7.13 | #10171d 12.87 12.87 --wa-bt #fff 7.09 7.09 | #10171d 12.53 12.53 --er-bt #fff 8.31 8.31 | #10171d 9.52 9.52 One token covers all five. It does NOT cover --lp, which has no dark value and is #2b3a47 in every theme, so white is always right there and near-black would read 1.55:1 — those rules keep #fff deliberately. Nor --lo-od, which is pale in BOTH themes by design. */ --on-fill:#fff; --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(43,58,71,.09);--shm:0 4px 20px rgba(43,58,71,.13);--shl:0 8px 32px rgba(43,58,71,.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(10,122,85,.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