:root{ --lp:#1a1f4d;--lp-d:#10132f;--lp-m:#2e3671;--lp-t:rgba(26,31,77,.07); /* The brand indigo AS TEXT. --lp-m is a fill colour: correct behind white on a light page, and 1.43:1 on a dark card. The dark ramp never redefined it, so every rule painting text with it was unreadable in dark mode. Per-ramp, like --on-lo and --lo-od. */ --lp-tx:#2e3671; --lo:#0e7490;--lo-h:#0b5d74;--lo-l:rgba(14,116,144,.13);--lo-p:rgba(14,116,144,.06); /* Text that sits ON a surface filled with --lo. White clears 5.36:1 here and only 2.11:1 on the dark ramp, where the accent brightens — so this is a per-ramp token, not a constant. See DESIGN_SYSTEM.md. */ --on-lo:#ffffff; /* 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. #3fd8ef 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:#3fd8ef; --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; --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,31,77,.09);--shm:0 4px 20px rgba(26,31,77,.13);--shl:0 8px 32px rgba(26,31,77,.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