/* ============================================================ LIGHT MODE Dark is the default; adding the .light class on repaints the palette: blue sky background, white translucent card, and a blue accent replacing emerald. ============================================================ */ /* Blue sky backdrop (clouds are drawn on the canvas) */ html.light body { background: radial-gradient(1200px 700px at 50% -10%, rgba(255, 255, 255, 0.85), transparent 60%), linear-gradient(180deg, #7ec8f2 0%, #a9dcf7 45%, #d8eefb 100%); background-attachment: fixed; } /* Scrollbar */ html.light .thin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; } html.light .thin-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* --- Surfaces: white and slightly translucent (body stays the most opaque) --- */ html.light .bg-zinc-900\/30 { background-color: rgba(255, 255, 255, 0.22); } html.light .bg-zinc-800\/50 { background-color: rgba(255, 255, 255, 0.28); } html.light .bg-zinc-950\/70 { background-color: rgba(255, 255, 255, 0.42); } html.light .bg-black\/60 { background-color: rgba(255, 255, 255, 0.62); } html.light .bg-black\/50 { background-color: rgba(255, 255, 255, 0.62); } html.light .bg-black\/40 { background-color: rgba(255, 255, 255, 0.38); } html.light .bg-black\/30 { background-color: rgba(255, 255, 255, 0.30); } html.light .hover\:bg-black\/60:hover { background-color: rgba(255, 255, 255, 0.75); } html.light .bg-zinc-800 { background-color: #ffffff; } html.light .hover\:bg-zinc-800\/50:hover { background-color: rgba(15, 23, 42, 0.06); } html.light .hover\:bg-zinc-700\/50:hover { background-color: rgba(15, 23, 42, 0.06); } /* Card shadow: softer in daylight */ html.light .shadow-\[0_30px_70px_-25px_rgba\(0\2c 0\2c 0\2c 0\.85\)\2c 0_0_40px_-12px_rgba\(16\2c 185\2c 129\2c 0\.12\)\] { box-shadow: 0 30px 70px -25px rgba(30, 58, 95, 0.35), 0 0 40px -12px rgba(37, 99, 235, 0.15); } /* --- Borders & rings --- */ html.light .border-zinc-800 { border-color: #e2e8f0; } html.light .border-zinc-700, html.light .border-zinc-700\/60 { border-color: #cbd5e1; } html.light .ring-zinc-700\/60 { --tw-ring-color: rgba(203, 213, 225, 0.9); } html.light .ring-emerald-500\/40 { --tw-ring-color: rgba(59, 130, 246, 0.45); } /* --- Text --- */ /* Slightly darker than a typical light theme: the card is very translucent, so the text sits directly over the sky and needs the extra contrast. */ html.light .text-zinc-200 { color: #0f172a; } html.light .text-zinc-300 { color: #1e293b; } html.light .text-zinc-400 { color: #334155; } html.light .text-zinc-500 { color: #475569; } html.light .text-zinc-600, html.light .placeholder\:text-zinc-600::placeholder { color: #64748b; } html.light .hover\:text-zinc-200:hover { color: #0f172a; } /* Text sitting on a filled (accent) button */ html.light .text-zinc-950 { color: #ffffff; } /* --- Accent: emerald -> blue --- */ html.light .text-emerald-300 { color: #1d4ed8; } html.light .text-emerald-400, html.light .text-emerald-400\/90 { color: #2563eb; } html.light .text-emerald-500, html.light .text-emerald-500\/70 { color: #2563eb; } html.light .hover\:text-emerald-300:hover, html.light .hover\:text-emerald-400:hover { color: #1e40af; } html.light .bg-emerald-600 { background-color: #2563eb; } html.light .hover\:bg-emerald-500:hover { background-color: #1d4ed8; } html.light .hover\:bg-emerald-600:hover { background-color: #2563eb; } html.light .bg-emerald-500\/10 { background-color: rgba(37, 99, 235, 0.10); } html.light .border-emerald-500\/20 { border-color: rgba(37, 99, 235, 0.25); } html.light .border-emerald-500\/60, html.light .hover\:border-emerald-500\/60:hover { border-color: rgba(37, 99, 235, 0.55); } html.light .focus\:border-emerald-500:focus { border-color: #2563eb; } html.light .focus\:ring-emerald-500\/30:focus { --tw-ring-color: rgba(37, 99, 235, 0.25); } html.light .caret-emerald-400 { caret-color: #2563eb; } html.light .accent-emerald-500 { accent-color: #2563eb; } html.light .shadow-emerald-900\/40 { --tw-shadow-color: rgba(37, 99, 235, 0.30); } /* --- Secondary accents --- */ html.light .bg-sky-500 { background-color: #0891b2; } html.light .hover\:bg-sky-400:hover, html.light .hover\:bg-sky-500:hover { background-color: #0e7490; } html.light .text-sky-300 { color: #0e7490; } html.light .text-sky-400, html.light .text-sky-500 { color: #0891b2; } html.light .bg-sky-500\/10 { background-color: rgba(8, 145, 178, 0.10); } html.light .border-sky-500\/20 { border-color: rgba(8, 145, 178, 0.25); } html.light .bg-violet-500 { background-color: #7c3aed; } html.light .hover\:bg-violet-400:hover, html.light .hover\:bg-violet-500:hover { background-color: #6d28d9; } html.light .text-violet-300, html.light .text-violet-400 { color: #7c3aed; } html.light .bg-violet-500\/10 { background-color: rgba(124, 58, 237, 0.10); } html.light .border-violet-500\/20 { border-color: rgba(124, 58, 237, 0.25); } /* Copy feedback + status colors */ html.light .bg-amber-400 { background-color: #d97706; } html.light .hover\:bg-amber-300:hover { background-color: #b45309; } html.light .text-amber-300, html.light .text-amber-500 { color: #b45309; } html.light .bg-amber-500\/10 { background-color: rgba(217, 119, 6, 0.12); } html.light .border-amber-500\/20 { border-color: rgba(217, 119, 6, 0.30); } html.light .bg-emerald-500\/10.text-emerald-400, html.light .bg-emerald-500\/10 { background-color: rgba(37, 99, 235, 0.10); } html.light .border-emerald-500\/30 { border-color: rgba(37, 99, 235, 0.30); } html.light .bg-red-500\/10 { background-color: rgba(220, 38, 38, 0.10); } html.light .border-red-500\/30 { border-color: rgba(220, 38, 38, 0.30); } html.light .text-red-400 { color: #dc2626; } html.light .hover\:text-red-400:hover { color: #b91c1c; } html.light .hover\:bg-red-500\/10:hover { background-color: rgba(220, 38, 38, 0.10); } /* Highlight spans rendered from JS (diff / non-ASCII) */ html.light .bg-red-500\/25 { background-color: rgba(220, 38, 38, 0.18); } html.light .text-red-300 { color: #b91c1c; } html.light .bg-amber-500\/25 { background-color: rgba(217, 119, 6, 0.20); } html.light .text-amber-200 { color: #92400e; } html.light .bg-emerald-500\/10.border-emerald-500\/30 { border-color: rgba(37, 99, 235, 0.30); } /* --- Data table (log viewer) --- */ /* Header row: a light slate band instead of the dark one */ html.light .bg-zinc-800\/60 { background-color: rgba(226, 232, 240, 0.85); } html.light thead.bg-zinc-800\/60 { color: #334155; } /* Row separators and hover */ html.light .divide-zinc-800\/70>:not([hidden])~:not([hidden]) { border-color: rgba(148, 163, 184, 0.35); } html.light .hover\:bg-zinc-800\/40:hover { background-color: rgba(255, 255, 255, 0.55); } /* Pagination buttons (scoped by id so the active tab, which also uses .bg-zinc-800, keeps its own accent colour) */ html.light #logPrevBtn, html.light #logNextBtn { background-color: rgba(255, 255, 255, 0.75); color: #334155; } html.light #logPrevBtn:hover, html.light #logNextBtn:hover { background-color: rgba(255, 255, 255, 0.95); } /* Level badges: darker text so they stay readable over the sky background */ html.light .bg-red-500\/15 { background-color: rgba(220, 38, 38, 0.12); } html.light .border-red-500\/30 { border-color: rgba(220, 38, 38, 0.35); } html.light .bg-amber-500\/15 { background-color: rgba(217, 119, 6, 0.14); } html.light .border-amber-500\/30 { border-color: rgba(217, 119, 6, 0.35); } html.light .bg-sky-500\/15 { background-color: rgba(2, 132, 199, 0.12); } html.light .border-sky-500\/30 { border-color: rgba(2, 132, 199, 0.35); } html.light .bg-zinc-500\/15 { background-color: rgba(100, 116, 139, 0.12); } html.light .border-zinc-500\/30 { border-color: rgba(100, 116, 139, 0.35); } /* Search match highlight */ html.light .bg-amber-400\/30 { background-color: rgba(250, 204, 21, 0.45); } /* --- Sticky note --- */ html.light .note-backdrop { background: rgba(15, 23, 42, .35); } /* --- Command palette --- */ html.light .palette-backdrop { background: rgba(15, 23, 42, .35); } html.light .palette-item { color: #334155; } html.light .palette-item:hover, html.light .palette-item.is-active { background: rgba(37, 99, 235, .12); color: #1d4ed8; } /* --- Log message modal --- */ html.light .log-modal-backdrop { background: rgba(15, 23, 42, .35); }