/* Dark mode — charcoal + bronze. Activated by `dark` on (persisted in localStorage, applied pre-paint in base.html to avoid a flash). Rather than rebuilding Tailwind with dark: variants across every template, this remaps the finite set of color utilities the app actually uses. */ html.dark { color-scheme: dark; } html.dark body { background: #131315; color: #d6d3d1; } /* Surfaces */ html.dark .bg-white { background-color: #1d1d20; } html.dark .bg-brand-50 { background-color: #232120; } html.dark .bg-brand-100, html.dark .bg-brand-100\/70 { background-color: #2b2822; } html.dark .bg-stone-50 { background-color: #202023; } html.dark .bg-stone-100 { background-color: #29292d; } html.dark .bg-brand-50\/40, html.dark .bg-brand-50\/50, html.dark .bg-brand-50\/60 { background-color: #232120; } html.dark .hover\:bg-brand-50:hover { background-color: #2b2822; } html.dark .hover\:bg-brand-50\/50:hover { background-color: #232120; } html.dark .bg-red-50, html.dark .bg-red-50\/60 { background-color: rgba(127, 29, 29, .22); } html.dark .bg-red-100 { background-color: rgba(153, 27, 27, .35); } html.dark .bg-amber-50, html.dark .bg-amber-100\/80 { background-color: rgba(146, 64, 14, .22); } html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: rgba(6, 78, 59, .35); } /* v462: the info tone of the shared status badge. Pre-existing gap — reports/list and the customers page already rendered a sky pill with no dark remap; the badge macro inherited it rather than created it. */ html.dark .bg-sky-50, html.dark .bg-sky-100 { background-color: rgba(12, 74, 110, .35); } html.dark .bg-stone-700 { background-color: #3f3f46; } html.dark .bg-stone-800 { background-color: #333338; } /* Borders */ html.dark .border-brand-50 { border-color: #29272394; } html.dark .border-brand-100 { border-color: #34302a; } html.dark .border-brand-200 { border-color: #413c33; } html.dark .border-stone-100 { border-color: #2e2e32; } html.dark .border-stone-200, html.dark .border-stone-300 { border-color: #3c3c41; } html.dark .border-red-100, html.dark .border-red-200 { border-color: #7f1d1d; } html.dark .border-amber-200 { border-color: #92400e; } html.dark .border-emerald-200 { border-color: #065f46; } html.dark .divide-brand-50 > * + * { border-color: #292723; } html.dark .divide-brand-100 > * + * { border-color: #34302a; } html.dark .divide-stone-100 > * + * { border-color: #2e2e32; } /* Text */ html.dark .text-stone-800, html.dark .text-stone-900 { color: #e9e7e4; } html.dark .text-stone-700 { color: #d6d3d1; } html.dark .text-stone-600 { color: #b8b3ae; } html.dark .text-stone-500 { color: #a19b94; } html.dark .text-stone-400 { color: #837d76; } /* v503 secondary-text tokens: muted reads at 5.8:1 on the dark card, faint at 4.0:1. */ html.dark .text-muted { color: #a19b94; } html.dark .text-faint { color: #837d76; } html.dark .text-stone-300 { color: #57534e; } html.dark .text-red-800 { color: #fca5a5; } html.dark .text-red-700 { color: #f87171; } html.dark .text-amber-800, html.dark .text-amber-900 { color: #fcd34d; } html.dark .text-amber-700 { color: #fbbf24; } html.dark .text-emerald-800 { color: #6ee7b7; } html.dark .text-sky-700 { color: #7dd3fc; } html.dark .text-emerald-700 { color: #34d399; } html.dark .text-leaf-700 { color: #ee9a75; } html.dark .text-brand-600, html.dark .text-brand-700, html.dark .text-brand-800 { color: #cbb281; } /* Form controls (inputs have no bg utility classes — style the elements) */ html.dark input, html.dark select, html.dark textarea { background-color: #242427; color: #e5e2df; border-color: #413c33; } html.dark input::placeholder, html.dark textarea::placeholder { color: #6b665f; } html.dark input[type="date"] { color-scheme: dark; } /* Tables & cards */ html.dark thead.bg-brand-50, html.dark .bg-brand-50 th { background-color: #232120; } html.dark .shadow-sm, html.dark .shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, .5); } /* Buttons that were dark-on-light stay readable; light accents keep contrast */ html.dark .bg-leaf-600 { background-color: #b5501f; } /* v469: the primary quick-action card fills with bg-leaf-600 and borders to match. The fill flips to coral above, so the border has to flip with it or the card wears a charcoal outline around a coral face. */ html.dark .border-leaf-600 { border-color: #b5501f; } html.dark .hover\:bg-leaf-700:hover { background-color: #d96a34; } html.dark .bg-amber-500 { background-color: #b45309; } html.dark .bg-brand-800 { background-color: #4a4237; } html.dark .hover\:bg-brand-900:hover { background-color: #3d372e; } /* Dashboard customize chrome + charts */ html.dark body.dash-edit [data-dash] { outline-color: #4a4237; } html.dark .dash-toggle { background-color: #1d1d20; } /* v340 — focus / selection / inner scrollbars in dark (coral focus stays on-brand) */ html.dark ::selection { background: #8f3f1a; color: #f5f5f4; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #b5501f; box-shadow: 0 0 0 3px rgba(217, 106, 52, .25); } html.dark .overflow-y-auto::-webkit-scrollbar-thumb { background: #3f3f46; } html.dark .overflow-y-auto::-webkit-scrollbar-thumb:hover { background: #52525b; } html.dark .overflow-y-auto { scrollbar-color: #3f3f46 transparent; } /* The card action-menu trigger (2026-08-19). Its hover and open states are the first uses of bg-brand-100 / text-stone-800 as HOVER and GROUP-OPEN variants, and dark.css remaps the base utilities only — so without these the open trigger rendered a near-white chip with near-black dots on a dark card, and hover flashed the same. Values are the ones this file already gives the base utilities (.bg-brand-100 → #2b2822, .text-stone-800 → #e9e7e4), so the trigger tracks the rest of the theme rather than inventing a shade. */ html.dark .hover\:bg-brand-100:hover { background-color: #2b2822; } /* v473: the tonal button's hover. bg-brand-200 is remapped for borders above but not as a background, so without this the More menu flashed a light grey #ded9d1 on a dark card. */ html.dark .hover\:bg-brand-200:hover { background-color: #343029; } html.dark .group[open] .group-open\:bg-brand-100 { background-color: #2b2822; } html.dark .hover\:text-stone-800:hover { color: #e9e7e4; } html.dark .group[open] .group-open\:text-stone-800 { color: #e9e7e4; }