/* Shared component boilerplate for both web properties (readpindu + pindulabs).
   Only genuinely cross-site, token-agnostic rules belong here. Appearance that
   differs by design — palette, fonts, radius, shadow, icon sizing — stays in
   each site's own stylesheet so the two visual identities remain distinct. */

/* Theme toggle: show the sun in dark mode, the moon in light. The toggle's
   html.theme-* class (set by shared/js/site.js) wins over the system
   preference. Button size/color is site-specific and lives in each styles.css. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  .theme-toggle .icon-sun { display: block; }
  .theme-toggle .icon-moon { display: none; }
}
html.theme-dark .theme-toggle .icon-sun { display: block; }
html.theme-dark .theme-toggle .icon-moon { display: none; }
html.theme-light .theme-toggle .icon-sun { display: none; }
html.theme-light .theme-toggle .icon-moon { display: block; }