/* QPDS Web UI Guidelines §2 — semantic tokens, light default with a [data-theme="dark"] override. Also respects prefers-color-scheme for a user who hasn't explicitly toggled yet. The theme toggle (shell.js) stamps data-theme on , which wins over the media-query default in both directions per artifact/theming convention. */ :root { --bg: #F8FAFC; --surface: #FFFFFF; --text: #0B1F3A; --border: #DDE2E6; --accent: #0C8C52; --info: #00A3E0; /* Money/status semantics (guideline §2) — positive reads green, negative red, caution amber, consistently across every panel. Receivables positive, payables negative; status pills reuse the same three plus --info for neutral/informational states. */ --positive: #0C8C52; --negative: #C0392B; --caution: #B7791F; --focus-ring: #0C8C52; --radius: 6px; --shell-sidebar-width: 240px; --shell-topbar-height: 56px; /* Sidebar is fixed navy regardless of theme (guideline §4's nav examples show the same navy sidebar in both editions) — tokenized here rather than hardcoded in shell.css so every hex value in the app still lives in exactly one file. */ --sidebar-bg: #0B1F3A; --sidebar-text: #EEF2F6; --sidebar-text-muted: #C7D0DE; /* Turn 18 accessibility QA finding: white text directly on --accent (the guideline's own primary-button color) measures 4.30:1 in light mode — under the 4.5:1 AA threshold. Neither theme's --accent passes at full strength with white text; darkened button-only fills computed to the minimum shift needed to clear 4.5:1 (light: +5% black, dark: +25% black — dark mode's brighter accent needs more, or it overshoots into looking washed out well past what's needed). --negative-button-fill exists for symmetry even though light mode's raw --negative already passes (5.44:1) — dark mode's doesn't (3.82:1, needs +10% black). Neither --accent nor --negative themselves change — only where white text sits directly on a solid fill. */ --accent-button-fill: #0B854E; --negative-button-fill: #C0392B; /* Separate from --accent-button-fill: plain --accent-as-text already passes in dark mode (5.74:1) but not light (4.30:1) — darkening for one theme and not the other, unlike the button-fill case above, where both themes need darkening in the SAME direction. A single shared token can't serve both directions correctly. */ --accent-text-safe: #0B854E; } @media (prefers-color-scheme: dark) { :root { --bg: #0A1526; --surface: #12233B; --text: #EEF2F6; --border: #24374F; --accent: #1FB268; --info: #35B6EC; /* Guideline §2 specifies exact dark-mode hex only for accent/info; positive/negative/caution are directed to be "brightened one step" without an exact value given. accent doubles as positive per the guideline's own money-semantics text, so positive reuses accent's dark value; negative/caution are hand-brightened proportionally and should be treated as a first pass, not a validated final value, pending real design review against this specific brand's dark palette (no automated contrast validator was available for this token set at build time). */ --positive: #1FB268; --negative: #E05252; --caution: #E0A542; --focus-ring: #1FB268; --accent-button-fill: #17864E; --negative-button-fill: #CA4A4A; --accent-text-safe: #1FB268; } } [data-theme="dark"] { --sidebar-bg: #060D1A; --bg: #0A1526; --surface: #12233B; --text: #EEF2F6; --border: #24374F; --accent: #1FB268; --info: #35B6EC; --positive: #1FB268; --negative: #E05252; --caution: #E0A542; --focus-ring: #1FB268; --accent-button-fill: #17864E; --negative-button-fill: #CA4A4A; --accent-text-safe: #1FB268; } [data-theme="light"] { --bg: #F8FAFC; --surface: #FFFFFF; --text: #0B1F3A; --border: #DDE2E6; --accent: #0C8C52; --info: #00A3E0; --positive: #0C8C52; --negative: #C0392B; --caution: #B7791F; --focus-ring: #0C8C52; --accent-button-fill: #0B854E; --negative-button-fill: #C0392B; --accent-text-safe: #0B854E; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); } /* Guideline §7 — visible focus ring on every interactive element: 2px Energy-green outline + 2px offset, identical treatment in both themes. */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }