/* No font files are bundled yet. Local lookup uses installed fonts only.
   To make rendering portable, supply licensed Xiaolai and Fredoka webfonts
   and add their real @font-face sources here. No remote requests are made. */
:root {
  --font-zh: "Xiaolai", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-en: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-mixed: "FamilyMeal Latin", var(--font-zh);
}

/* Restrict the English face to Latin text. Chinese glyphs and punctuation
   then fall through to Xiaolai, even if an English fallback supports CJK.
   Segoe UI is the Windows system-ui fallback for this local prototype. */
@font-face {
  font-family: "FamilyMeal Latin";
  src: local("Fredoka"), local("Fredoka Regular"),
       local("Arial Rounded MT Bold"), local("ArialRoundedMTBold"),
       local("Segoe UI"), local("Arial");
  unicode-range: U+0000-024F, U+1E00-1EFF;
  font-display: swap;
}

/* These elements always contain English, unlike bilingual card subtitles. */
.topbar a span,
.recipe-detail .english,
.staple-chip small {
  font-family: var(--font-en);
}

/* Card subtitles switch to Chinese when the interface switches to English. */
html:lang(zh) .recipe-copy .english {
  font-family: var(--font-en);
}