/* Light theme (2026-10-20). Default for everyone; signed-in users can switch to dark in Settings (users meta "theme").
   The page markup keeps its original dark Tailwind classes; these rules remap them when <html class="light">. */
html.light { color-scheme: light; }
html.light body { background: #f6f7f9; color: #111827; }
.light .bg-black { background-color: #ffffff; }
.light .bg-gray-950 { background-color: #f6f7f9; }
.light .bg-gray-900 { background-color: #ffffff; }
.light .bg-gray-800 { background-color: #f3f4f6; }
.light .bg-gray-700 { background-color: #e5e7eb; }
.light .bg-gray-800\/50 { background-color: #f3f4f6; }
.light .bg-white\/5 { background-color: rgba(17,24,39,.04); }
.light .bg-white\/10 { background-color: rgba(17,24,39,.06); }
.light .bg-gray-950\/90 { background-color: rgba(255,255,255,.92); }
.light .bg-black\/90 { background-color: rgba(255,255,255,.94); }
.light .bg-black\/80 { background-color: rgba(255,255,255,.9); }
.light .bg-black\/30 { background-color: rgba(255,255,255,.55); }
.light .bg-black\/70 { background-color: rgba(17,24,39,.45); }
.light .hover\:bg-white\/10:hover { background-color: rgba(17,24,39,.07); }
.light .hover\:bg-white\/5:hover { background-color: rgba(17,24,39,.04); }
.light .hover\:bg-white\/20:hover { background-color: rgba(17,24,39,.1); }
.light .hover\:bg-gray-800:hover { background-color: #eef0f3; }
.light .text-white { color: #111827; }
.light .text-gray-200 { color: #1f2937; }
.light .text-gray-300 { color: #374151; }
.light .text-gray-400 { color: #4b5563; }
.light .text-gray-500 { color: #6b7280; }
.light .text-gray-600 { color: #6b7280; }
.light .text-white\/80 { color: rgba(17,24,39,.8); }
.light .text-white\/60 { color: rgba(17,24,39,.62); }
.light .text-red-400 { color: #b91c1c; }
.light .text-red-300 { color: #b91c1c; }
.light .text-green-400 { color: #15803d; }
.light .text-yellow-400 { color: #a16207; }
.light .text-amber-400 { color: #92400e; }
.light .text-amber-300 { color: #92400e; }
.light .hover\:text-white:hover { color: #111827; }
.light .hover\:text-gray-300:hover { color: #374151; }
.light .hover\:text-gray-400:hover { color: #374151; }
.light .hover\:text-red-400:hover { color: #b91c1c; }
.light .hover\:text-green-300:hover { color: #15803d; }
.light .hover\:text-amber-300:hover { color: #92400e; }
.light .border-white\/10 { border-color: #e5e7eb; }
.light .border-white\/20 { border-color: #d1d5db; }
.light .border-gray-800 { border-color: #e5e7eb; }
.light .border-gray-700 { border-color: #d1d5db; }
.light .border-primary\/30 { border-color: rgba(181,6,0,.25); }
.light .hover\:border-white\/20:hover { border-color: #d1d5db; }
.light .divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-color: #eef0f3; }
.light .placeholder-gray-500::placeholder, .light input::placeholder { color: #9ca3af; }
.light .bg-gray-900, .light .bg-white\/5.rounded-2xl, .light .bg-white\/5.rounded-xl { box-shadow: 0 1px 2px rgba(17,24,39,.04); }
.light select option { background: #fff; color: #111827; }
.light .bg-primary, .light .bg-primary *, .light .hover\:bg-primary:hover, .light .hover\:bg-primary:hover * { color: #fff; }
.light .viewing-as, .light .viewing-as p { color: #fff; }
.light .bg-red-500\/10 { background-color: #fef2f2; } .light .bg-green-500\/10 { background-color: #f0fdf4; } .light .bg-amber-500\/10 { background-color: #fffbeb; } .light .bg-yellow-500\/10 { background-color: #fefce8; }
.light .border-red-500\/20 { border-color: #fecaca; } .light .border-green-500\/20 { border-color: #bbf7d0; } .light .border-amber-500\/20 { border-color: #fde68a; }
/* Photo heroes (home, signup, login): a soft white scrim behind the text instead of the dark wash. Modal backdrops are .fixed, not matched. */
.light .absolute.inset-0.bg-black\/70, .light .absolute.inset-0.bg-black\/80, .light .absolute.inset-0.bg-black\/90 {
  background: radial-gradient(ellipse at center, rgba(255,255,255,.93) 0%, rgba(255,255,255,.84) 55%, rgba(255,255,255,.66) 100%);
}
/* Cards and form fields read as white surfaces on the light gray page. */
.light .bg-white\/5.border, .light .bg-white\/10.border, .light input.bg-white\/5, .light input.bg-white\/10, .light select.bg-white\/10, .light textarea.bg-white\/5 { background-color: #ffffff; }
.light input.border-white\/10, .light input.border-white\/20, .light select.border-white\/20 { border-color: #d1d5db; }
.light .bg-white\/5.border { box-shadow: 0 1px 2px rgba(17,24,39,.05); }
/* Login/signup photo panels use in-flow overlays (not .absolute); modal backdrops carry [data-modal] and stay dim. */
.light .bg-black\/70:not([data-modal]), .light .bg-black\/80:not([data-modal]) {
  background: radial-gradient(ellipse at center, rgba(255,255,255,.93) 0%, rgba(255,255,255,.84) 55%, rgba(255,255,255,.7) 100%);
}
.light .bg-black\/30:not([data-modal]) { background-color: rgba(255,255,255,.9); }
.light [data-modal].bg-black\/80 { background-color: rgba(17,24,39,.5); }
/* Solid red buttons written with the hex class keep white text. */
.light [class~="bg-[#b50600]"], .light [class~="bg-[#b50600]"] * { color: #fff; }
.light [data-qr-view] { box-shadow: inset 0 0 0 1px #e5e7eb; }