/* Dark-mode overrides, scoped under html.dark, targeting the app's existing Tailwind utility classes directly (no per-view dark: variants needed). bg-gray-800/900/950 + text-white (Check-in Scanner, Scan Logs, Copy, etc.) keep their fill color in both themes — only a boundary ring is added below so they stay visible against the (also unrelated) card color. */ /* The gradient utility (from-gray-50 to-brand-50) is only ever used on in this app, so overriding background-image directly here is simpler and more robust than trying to reassign Tailwind's internal --tw-gradient-* custom properties. */ html.dark body { background-image: linear-gradient(to bottom right, #0f172a, #1e293b) !important; } /* Card / surface backgrounds. bg-white is deliberately LIGHTER (#374151) than the untouched gray-800/900/950 button colors used throughout the app (Manage, Check-in, Copy, Print, etc.) — those buttons sit inside bg-white cards, so the card must stay visibly different from gray-800 or the buttons disappear into it (this was a real bug: the previous #1f2937 card color was exactly gray-800's hex value). */ html.dark .bg-white { background-color: #374151; } html.dark .bg-gray-50 { background-color: #1f2937; } html.dark .bg-gray-100 { background-color: #111827; } html.dark .bg-gray-200 { background-color: #0f172a; } /* The lighter card alone only gets bg-gray-800 buttons to ~1.4:1 contrast against it — well under WCAG's 3:1 non-text-contrast guideline for UI component boundaries. Add an explicit ring so the button edge is reliably perceptible regardless of exact card/button lightness (4-8:1 against both, computed). Only .bg-gray-800 needs targeting — the hover/active states on these buttons are separate Tailwind classes (hover:bg-gray-900 etc.), not plain .bg-gray-900/.bg-gray-950, and the ring persists through them. */ html.dark .bg-gray-800 { box-shadow: 0 0 0 1px #9ca3af; } /* Text hierarchy */ html.dark .text-gray-800 { color: #f3f4f6; } html.dark .text-gray-700 { color: #e5e7eb; } html.dark .text-gray-600 { color: #d1d5db; } html.dark .text-gray-500 { color: #9ca3af; } html.dark .text-gray-400 { color: #6b7280; } /* Borders / dividers. border-gray-300 is boosted to gray-400 (#9ca3af, ~4:1 against the #374151 card — clears WCAG's 3:1 non-text-contrast guideline) so "outline" secondary buttons (Edit, Load More, Cancel, My Events, Scan an Image File — all bg-white border-gray-300) stay clearly visible via their border even though their fill now matches the card they sit on. border-gray-100/divide-gray-100 are decorative in-card dividers, not interactive component boundaries, so a subtler step suffices there. */ html.dark .border-gray-100 { border-color: #4b5563; } html.dark .border-gray-300 { border-color: #9ca3af; } html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #4b5563; } /* Form controls (no explicit bg-white class — rely on browser default) */ html.dark input, html.dark select, html.dark textarea { background-color: #111827; color: #f3f4f6; border-color: #4b5563; } html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7280; } /* Shadows read better slightly stronger on dark surfaces. Set box-shadow directly rather than Tailwind's --tw-shadow custom properties, since the plain (non "shadow-{color}") utilities don't route through --tw-shadow-color. */ html.dark .shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); } html.dark .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); } html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4); } /* Accent (brand/indigo) links/buttons that use the light-tint pattern. RGB source is brand-400 (#818CF8) — the same relative position in the scale the old rgba(59,130,246,...)/#60a5fa (blue-400) values used, just swapped to the new brand hue so the tint/text-on-dark relationship stays consistent after the blue- -> brand- rename in the views. */ html.dark .bg-brand-50 { background-color: rgba(129, 140, 248, 0.15); } html.dark .bg-brand-100 { background-color: rgba(129, 140, 248, 0.2); } html.dark .text-brand-600, html.dark .text-brand-700, html.dark .text-brand-800 { color: #a5b4fc; } html.dark .border-brand-200 { border-color: rgba(129, 140, 248, 0.35); } /* Status badges / banners: bg-X-50 or bg-X-100 + text-X-6/700 + border-X-200 */ html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12); } html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.18); } html.dark .text-red-500, html.dark .text-red-600, html.dark .text-red-700 { color: #f87171; } html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.35); } html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.12); } html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.18); } html.dark .text-green-600, html.dark .text-green-700, html.dark .text-green-800 { color: #4ade80; } html.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.35); } html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18); } html.dark .text-purple-600, html.dark .text-purple-700 { color: #c084fc; } html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12); } html.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.18); } html.dark .text-yellow-600, html.dark .text-yellow-700 { color: #facc15; } html.dark .border-yellow-200 { border-color: rgba(234, 179, 8, 0.35); }