@tailwind base;
@tailwind components;
@tailwind utilities;

/* Ui::NavbarComponent's own JS (navbar_component_controller.js#setActive) toggles a
   plain class name via `classList.toggle`, which can't carry a `dark:` variant the
   way a class written directly in an .erb template can (Tailwind's `dark:` prefix
   only ever means anything to the CSS compiler at build time, applied to a literal
   class it sees in source — a bare runtime string like "bg-[#0e0e0e]" toggled from
   JS is just that one color, unconditionally, in both themes). Reported directly:
   light theme showed a plain white page bleeding into a `#0e0e0e` almost-black nav
   pill with dark-gray text on top of it — unreadable. This component class gives the
   JS one theme-aware name to toggle instead. */
@layer components {
  .nav-item-active {
    @apply bg-gray-100 dark:bg-[#0e0e0e];
  }
}