/* AccountsERP — glassmorphic violet design system (Phase 3 redesign). Same custom-property NAMES as the original token layer throughout — only their values changed — so every class rule and every inline `style="...var(--x)..."` across the app picks up the new look without any usage site needing to be touched. New variables (marked below) were added for things the old system didn't have: the page-background gradient, glass blur, and a properly-defined --accent-100 (previously referenced in ~12 files but never defined, so those always silently rendered their hardcoded fallback instead). */ :root { --surface-0: #FFFFFF; --surface-50: #F5F3FC; --surface-100: #EFEBFA; --surface-200: rgba(108,92,231,.16); /* §dashboard-a11y-contrast — the previous #948DA8 measured 3.1-3.2:1 against --surface-0/#fbfcff (confirmed live via the Impeccable detector overlay on the dashboard), well under WCAG AA's 4.5:1 for normal text. #736E83 keeps the same violet-gray hue family as ink-700/ink-900 while clearing 4.5:1+ against every background this token is actually used on. This is a :root token, so it updates every secondary-text consumer app-wide (stat labels, card headings, row meta text, tile captions), not just the dashboard — the same fix everywhere it was already the same defect. */ --ink-900: #181428; --ink-700: #5B5470; --ink-500: #736E83; --brand-700: #4B3FC9; --brand-600: #6C5CE7; --brand-100: #EFECFF; --danger-600: #D8394B; --danger-100: #FDEAEC; --success-600: #12925B; --success-100: #E7F9EF; --warning-600: #B4740E; --warning-100: #FCF0DA; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 22px; --shadow-md: 0 16px 40px -14px rgba(108,92,231,.24), 0 6px 16px -8px rgba(108,92,231,.12); --font-display: -apple-system, "Segoe UI Semibold", "Segoe UI", sans-serif; --font-body: -apple-system, "Segoe UI", sans-serif; /* New in Phase 3 */ --accent-100: #EFECFF; --shadow-shell: 0 30px 70px -24px rgba(90,70,190,.28), 0 10px 26px -12px rgba(90,70,190,.14); --bg-1: #EEF1FF; --bg-2: #F6EEFC; --bg-3: #EAF4FF; --blur: 20px; } /* §mobile-theme-preference — a real request: light/dark/auto on Menu → Profile, mobile only for now — deliberately scoped to body.m-body's own subtree (every mobile page's class), never :root, so a desktop user whose OS happens to be in dark mode never sees any of this: app.css's desktop pages have no .m-body ancestor at all, so neither rule below can ever match there regardless of system theme or this user's own theme_preference. 'auto' (the default — see the theme_preference migration) sets no data-theme attribute at all, so only the @media block below applies, live, straight from the device's own current prefers-color-scheme; an explicit 'light' choice is excluded from that block by the :not() guard (stays light even under a dark system setting), and an explicit 'dark' choice applies unconditionally via the plain [data-theme="dark"] rule beneath it, regardless of the system setting either way. Same token NAMES as :root above — every existing class/inline var(--x) usage across mobile.css picks this up for free, no component-level dark-mode work needed. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.m-body { --surface-0: #211D33; --surface-50: #15121F; --surface-100: #2B2645; --surface-200: rgba(255,255,255,.14); --ink-900: #F1EEFA; --ink-700: #B7B0CC; --ink-500: #8A8299; --brand-700: #AC9BFF; --brand-600: #8D7CF0; --brand-100: #2E2856; --danger-600: #FF7A8A; --danger-100: #3D2029; --success-600: #3EDDA0; --success-100: #163826; --warning-600: #F5BD5C; --warning-100: #3D2F12; } } html[data-theme="dark"] body.m-body { --surface-0: #211D33; --surface-50: #15121F; --surface-100: #2B2645; --surface-200: rgba(255,255,255,.14); --ink-900: #F1EEFA; --ink-700: #B7B0CC; --ink-500: #8A8299; --brand-700: #AC9BFF; --brand-600: #8D7CF0; --brand-100: #2E2856; --danger-600: #FF7A8A; --danger-100: #3D2029; --success-600: #3EDDA0; --success-100: #163826; --warning-600: #F5BD5C; --warning-100: #3D2F12; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); color: var(--ink-900); background: radial-gradient(1200px 700px at 15% 10%, var(--bg-1), transparent 60%), radial-gradient(1000px 700px at 85% 20%, var(--bg-2), transparent 55%), radial-gradient(1200px 800px at 50% 100%, var(--bg-3), transparent 60%), var(--bg-1); } /* §dialog-double-scrollbar — showModal() puts a