/* Design tokens — verbatim from design_handoff_pharmacy_billing/README.md. Every color in the UI comes from this file. No ad-hoc colors anywhere. The one documented exception is the alert-count badge (#c2410c, both themes). */ :root { --bg: #f7f4ef; --panel: #fffdf9; --panel2: #f3efe6; --sunk: #f7f4ef; --border: #e7e0d3; --hair: #f1ece2; --ink: #1e1b16; --muted: #7d7566; --faint: #9a9182; --hover: #f9f6f0; --input: #ffffff; --accent: #1d4ed8; --accent-h: #163bab; --acc-bg: #eef4ff; --acc-fg: #163bab; --acc-br: #c7d8fb; --ok-bg: #e9f3ec; --ok-fg: #1f6f4a; --warn-bg: #fdf4e3; --warn-fg: #8a5a09; --bad-bg: #fdeee2; --bad-fg: #9a3412; --green: #1f6f4a; --side: #221f1a; --side-ink: #fffdf9; --side-muted: #b8ae9c; --side-dim: #8d8474; --side-active: rgba(255, 255, 255, 0.13); --side-hover: rgba(255, 255, 255, 0.08); --dropdown-shadow: 0 14px 34px rgba(20, 16, 10, 0.22); --alert-badge: #c2410c; --font: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; --mono: ui-monospace, Menlo, monospace; } [data-theme="dark"] { --bg: #14120e; --panel: #1e1b16; --panel2: #272319; --sunk: #191612; --border: #332e24; --hair: #2a261e; --ink: #efe9dd; --muted: #a09786; --faint: #8a8272; --hover: #252118; --input: #191612; --accent: #5a86f7; --accent-h: #7b9ffa; --acc-bg: #1b2540; --acc-fg: #a8c1fb; --acc-br: #2c3a5e; --ok-bg: #1a2a21; --ok-fg: #7fc9a3; --warn-bg: #2c2517; --warn-fg: #dcae63; --bad-bg: #2e1d16; --bad-fg: #e8a184; --green: #2f8a5f; --side: #100e0b; --side-ink: #fffdf9; --side-muted: #a3998a; --side-dim: #7c7365; } /* --------------------------------------------------------------------------- Colour schemes — chosen per shop in Settings, rendered as data-scheme on . A scheme moves the accent family and the sidebar; the paper palette and the ok/warn/bad semantics stay fixed in every one. "classic" is the palette above, so it needs no block. Each other scheme declares light first, then dark at higher specificity so it still wins once [data-theme="dark"] has had its say. core/schemes.py lists them, and core/tests/test_schemes.py fails if this file and that list disagree. The dark blocks also retune the surfaces. In light the sidebar is a large block of scheme colour, so the schemes read apart immediately; in dark every sidebar is near-black and the accent has too little surface area to carry a whole theme, which left every variation looking identical. Tinting bg, panel and the borders toward the scheme's hue is what makes dark mode legible as a choice. The ok/warn/bad semantics are never touched, in either theme. --------------------------------------------------------------------------- */ [data-scheme="indigo"] { --accent: #1d4ed8; --accent-h: #163bab; --acc-bg: #eef4ff; --acc-fg: #163bab; --acc-br: #c7d8fb; --side: #1d4ed8; --side-muted: #c7d8fb; --side-dim: #a8c1fb; } [data-theme="dark"][data-scheme="indigo"] { --bg: #0e1119; --panel: #171c28; --panel2: #202634; --sunk: #121620; --border: #262e3e; --hair: #1e2431; --hover: #1b212d; --input: #121620; --ink: #e7ebf3; --muted: #97a2b6; --faint: #7e8899; --accent: #5a86f7; --accent-h: #7b9ffa; --acc-bg: #1b2540; --acc-fg: #a8c1fb; --acc-br: #2c3a5e; --side: #1b2540; --side-muted: #a8c1fb; --side-dim: #7b9ffa; } [data-scheme="emerald"] { --accent: #047857; --accent-h: #065f46; --acc-bg: #e7f4ef; --acc-fg: #065f46; --acc-br: #b6ddcb; --side: #14261e; --side-muted: #a9bfb4; --side-dim: #7f9689; } [data-theme="dark"][data-scheme="emerald"] { --bg: #0b1310; --panel: #141e1a; --panel2: #1c2823; --sunk: #0f1815; --border: #22322b; --hair: #1b2721; --hover: #182521; --input: #0f1815; --ink: #e4ede9; --muted: #96a99f; --faint: #7d8f87; --accent: #45b98a; --accent-h: #6ecfa6; --acc-bg: #16302a; --acc-fg: #9fe0c4; --acc-br: #274d42; --side: #0b1712; --side-muted: #9db3a8; --side-dim: #74897e; } [data-scheme="plum"] { --accent: #7c3aed; --accent-h: #6d28d9; --acc-bg: #f3eeff; --acc-fg: #6d28d9; --acc-br: #d8c9fb; --side: #241a2e; --side-muted: #bdb0c8; --side-dim: #8f849b; } [data-theme="dark"][data-scheme="plum"] { --bg: #120f18; --panel: #1c1824; --panel2: #252030; --sunk: #16121d; --border: #302940; --hair: #26202f; --hover: #211c2a; --input: #16121d; --ink: #ece8f2; --muted: #a69ab2; --faint: #8d8298; --accent: #a78bfa; --accent-h: #c4b5fd; --acc-bg: #251c3a; --acc-fg: #cfc0fb; --acc-br: #3b2f57; --side: #150f1c; --side-muted: #ab9fb6; --side-dim: #7f7589; } [data-scheme="slate"] { --accent: #0369a1; --accent-h: #075985; --acc-bg: #e8f2f9; --acc-fg: #075985; --acc-br: #bcd8ea; --side: #1f2937; --side-muted: #b0bac7; --side-dim: #828d9c; } [data-theme="dark"][data-scheme="slate"] { --bg: #0f1215; --panel: #181c22; --panel2: #21262d; --sunk: #13171a; --border: #2b323a; --hair: #23282f; --hover: #1d2228; --input: #13171a; --ink: #e9ecf0; --muted: #9ba5b2; --faint: #828c99; --accent: #56a8d8; --accent-h: #7cc0e6; --acc-bg: #16283a; --acc-fg: #a9d4ec; --acc-br: #2a4459; --side: #111823; --side-muted: #a3adba; --side-dim: #79838f; }