/* THE KIDS' COLORS: one set for the whole site, on while Kids mode is (hub/kidsmode.js). Switched on
   from the home page: everywhere. Switched on in an app: only in the apps with a kids mode, each
   marked with data-kids-app on its outermost element (a new app joins by adding that mark).
   (Doubled attributes: these win over an app's own colors, like the reader's color modes.) */
html.kids-theme-site body,
html.kids-theme-site [data-kids-app][data-kids-app],
html.kids-theme-apps [data-kids-app][data-kids-app] {
  --bg: #FFF7EA;
  --bg-raised: #FFFFFF;
  --rule: #F1DCC0;
  --ink: #3A2A1E;
  --muted: #8C7663;
  --coral: #F2913D;
  --coral-soft: rgba(242, 145, 61, 0.16);
  --gold: #8E4FC9;
  --on-gold: #FFFFFF;
  --teal: #3B82C4;
  --teal-soft: rgba(59, 130, 196, 0.14);
  --good: #2E9A52;
  --good-soft: rgba(61, 170, 92, 0.14);
  --slate: #3B82C4;
  --slate-soft: rgba(59, 130, 196, 0.12);
  --sans: "Andika", -apple-system, "Segoe UI", system-ui, sans-serif;
}
html.kids-theme-site body.site-dark,
html.kids-theme-site body.site-dark [data-kids-app][data-kids-app],
html.kids-theme-apps body.site-dark [data-kids-app][data-kids-app] {
  --bg: #221C2C;
  --bg-raised: #2C2438;
  --rule: #463A57;
  --ink: #F4EEFB;
  --muted: #B9AACB;
  --coral: #FFB25E;
  --coral-soft: rgba(255, 178, 94, 0.16);
  --gold: #CDA8FF;
  --on-gold: #221C2C;
  --teal: #8CC0F0;
  --teal-soft: rgba(140, 192, 240, 0.16);
  --good: #8CD9A2;
  --good-soft: rgba(140, 217, 162, 0.14);
}

/* A kids account (hub/kidsmode.js): Kids mode always, so no switch for it anywhere */
.kids-locked #kids-switch, .kids-locked .tr-kids-toggle, .kids-locked .br-kidssw { display: none !important; }