/* Fixed light surfaces must carry light-theme text/control tokens even when the
   surrounding page is dark. Explicit dark-background variants own their theme. */
.dark :where(
  .bg-white, .bg-white\/70, .bg-white\/75, .bg-white\/80, .bg-white\/90,
  .bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100,
  .bg-zinc-50, .bg-zinc-100, .bg-neutral-50, .bg-neutral-100,
  .bg-stone-50, .bg-stone-100, .bg-red-50, .bg-red-100,
  .bg-orange-50, .bg-orange-100, .bg-amber-50, .bg-amber-100,
  .bg-amber-50\/80, .bg-yellow-50, .bg-yellow-100,
  .bg-lime-50, .bg-lime-100, .bg-green-50, .bg-green-100,
  .bg-emerald-50, .bg-emerald-100, .bg-teal-50, .bg-teal-100,
  .bg-cyan-50, .bg-cyan-100, .bg-sky-50, .bg-sky-100,
  .bg-blue-50, .bg-blue-100, .bg-indigo-50, .bg-indigo-100,
  .bg-violet-50, .bg-violet-100, .bg-purple-50, .bg-purple-100,
  .bg-fuchsia-50, .bg-fuchsia-100, .bg-pink-50, .bg-pink-100,
  .bg-rose-50, .bg-rose-100
):not(:where([class*="dark:bg-"], img, svg)) {
  --background: 0 0% 100%;
  --foreground: 222 30% 12%;
  --card: 0 0% 100%;
  --card-foreground: 222 30% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 30% 12%;
  --muted: 210 20% 96%;
  --muted-foreground: 215 16% 35%;
  --secondary: 210 20% 94%;
  --secondary-foreground: 222 30% 14%;
  --border: 214 18% 76%;
  --input: 214 18% 76%;
  color: hsl(var(--foreground));
  color-scheme: light;
}