/* Manrope and MiSans need optical, rather than numeric, weight matching.
   Body 400 maps to MiSans 350; emphasis 500 maps to MiSans 450.
   Heading selectors below explicitly opt back into MiSans's real 500 axis. */
@font-face {
  font-family: "MiSans VF";
  src: url("./assets/fonts/MiSans-VF-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-variation-settings: "wght" 350;
  font-display: swap;
}

@font-face {
  font-family: "MiSans VF";
  src: url("./assets/fonts/MiSans-VF-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-variation-settings: "wght" 450;
  font-display: swap;
}

:root:lang(zh-CN) {
  --font: "Manrope", "MiSans VF", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --font-cjk: "Manrope", "MiSans VF", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-latin: "Manrope", "MiSans VF", "PingFang SC", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", "MiSans VF", "PingFang SC", "Noto Sans SC", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
}

:root:lang(zh-CN) body {
  font-synthesis: none;
}

/* Chinese body copy, descriptions and inactive navigation use optical 350. */
:root:lang(zh-CN) :is(
  .case-index a,
  .case-section-nav-list a,
  .meta-cell dt,
  .paywall-tab
) {
  font-weight: 400;
}

:root:lang(zh-CN) #main:not(.subpage-main) .project-meta p,
:root:lang(zh-CN) .project-group .project-card-meta p {
  font-weight: 400;
}

:root:lang(zh-CN) .related-project-copy span {
  font-weight: 400;
}

/* Chinese headings use MiSans's real 500 axis. */
:root:lang(zh-CN) :is(
  .section-title,
  .projects-intro h1,
  .gallery-page .gallery-intro .page-intro-copy h1,
  .gallery-page .visually-hidden,
  .page-intro-copy .section-label,
  .subsection-copy h3
) {
  font-weight: 500;
  font-variation-settings: "wght" 500;
}

/* Titles that intentionally stay in English retain Manrope's display weight. */
:root:lang(zh-CN) body .page .section-title[data-zh-script="latin"] {
  font-weight: 700;
  font-variation-settings: "wght" 700;
}

:root:lang(zh-CN) #main:not(.subpage-main) .section-label,
:root:lang(zh-CN) #others-title {
  font-weight: 500;
  font-variation-settings: "wght" 500;
}

/* Emphasis and selected states pair Manrope 500 with MiSans 450. */
:root:lang(zh-CN) :is(
  .body-text strong,
  .body-text em,
  .case-index a.is-active,
  .case-section-nav-list a.is-active,
  .meta-cell dd,
  .paywall-tab.is-active,
  .design-system-page .atomic-controls button strong,
  .design-system-page .shadow-mode-switch button,
  .design-system-page .button-mode-switch button,
  .design-system-page .input-field-block > label,
  .design-system-page .dialog-card strong,
  .design-system-page .configurable-button
) {
  font-weight: 500;
}

/* Interactive component examples follow the same Chinese family standard. */
:root:lang(zh-CN) .design-system-page :is(
  .configurable-button,
  .input-field-block
) {
  font-family: var(--font-cjk);
}

/* Project-background highlights use color only, never a heavier weight. */
main.page #background .body-text :is(strong, em) {
  font-weight: inherit;
  font-variation-settings: inherit;
}

/* One keyboard-focus color across every public page. */
:root {
  --site-focus-ring: rgb(2 48 48 / 20%);
}
:root[data-theme="dark"] {
  --site-focus-ring: rgb(209 209 209 / 25%);
}
:where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--site-focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.input-shell:focus-within,
.input-configurator[data-input-state="focus"] .input-shell,
.button-configurator[data-button-state="focus"] .configurable-button {
  border-color: var(--site-focus-ring) !important;
  box-shadow: 0 0 0 2px var(--site-focus-ring) !important;
}
.case-scroll-progress:focus-visible .case-scroll-progress-thumb {
  box-shadow: 0 0 0 4px var(--site-focus-ring);
}