/* About bridge to the shared index color and language typography system.
 * Layout, spacing, media and motion remain owned by about-reference.css.
 */
@font-face {
  font-family: "Chiron Sung HK Home";
  src: url("../fonts/chiron-sung-hk/chiron-sung-hk-site-200-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: block;
}

/* Licensed static Web fonts. Existing family alias retained for compatibility. */
@font-face {
  font-family: "Serim Test Tiempos Headline";
  src: url("../fonts/tiempos-headline/tiempos-headline-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Serim Test Tiempos Headline";
  src: url("../fonts/tiempos-headline/tiempos-headline-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

body:is(.about-page, .about-system-page) {
  /* Index typography policy: UCity for Latin and Pretendard for Korean. */
  --serim-font-body: var(--vf-font-sans);
  --serim-font-editorial: "Chiron Sung HK Home", "Noto Serif CJK KR", "Nanum Myeongjo", serif;
  --serim-font-editorial-weight: 500;

  color: var(--serim-text-primary);
  font-family: var(--serim-font-body);
}

html:lang(en) body:is(.about-page, .about-system-page) {
  --serim-font-editorial: "Serim Test Tiempos Headline", Georgia, "Times New Roman", serif;
  --serim-font-editorial-weight: 400;
}

/* The current English About file still uses the project scaffold layout.
 * Give that document the same token and language type policy without importing
 * the Korean About layout component.
 */
body.about-system-page {
  color: var(--serim-text-primary);
  font-family: var(--serim-font-body);
  font-weight: 400;
}

body.about-system-page :is(.page-header h1, .content-section h2) {
  color: var(--serim-text-primary);
  font-family: var(--serim-font-editorial);
  font-weight: var(--serim-font-editorial-weight);
  font-variation-settings: "wght" var(--serim-font-editorial-weight);
  font-synthesis: none;
}

body.about-system-page :is(.page-header p, .content-section p) {
  color: var(--serim-text-secondary);
}

body.about-system-page .section-nav a {
  color: var(--serim-text-button);
}

@media (hover: hover) and (pointer: fine) {
  body.about-system-page .section-nav a:hover {
    color: var(--serim-text-button-hover);
  }
}

body.about-system-page :is(a, button, input, select, textarea):focus-visible {
  outline-color: var(--serim-text-link-focus-soft);
}

body.about-page .vfa-about {
  /* Shared index surface and text roles. */
  --vfa-paper: var(--stone-stone-0);
  --vfa-sage: var(--vfc-color-shades-shades-300);
  --vfa-dark: var(--vfs-surface-dark);
  --vfa-heading: var(--serim-text-primary);
  --vfa-copy: var(--serim-text-secondary);
  --vfa-body: var(--serim-text-weak);
  --vfa-subtle: var(--serim-text-weak-on-dark);
  --vfa-border: var(--vfc-color-neutral-light-neutrals-light-100);
  --vfa-dark-border: var(--vfs-border-dark);
  --vfa-action: var(--serim-text-link-focus-soft);
  --vfa-action-hover: var(--serim-text-link-focus-soft-hover);
  --vfa-font-sans: var(--serim-font-body);
  --vfa-font-display: var(--serim-font-editorial);

  color: var(--serim-text-weak);
  font-family: var(--serim-font-body);
}

/* Index editorial rule: Korean Chiron 500 / English Tiempos 400. */
body.vf-font-rendering.about-page :is(
  .vfa-heading-md,
  .serim-hero-intro-lg__title,
  .vf-heading-editorial,
  .vfa-story-quote-text,
  #vfa-proof-title,
  .vf-section-heading,
  .serim-section-header__title
) {
  font-family: var(--serim-font-editorial);
  font-weight: var(--serim-font-editorial-weight);
  font-variation-settings: "wght" var(--serim-font-editorial-weight);
  font-synthesis: none;
}

html[lang="en"] body.vf-font-rendering.about-page :is(
  .vfa-heading-md,
  .serim-hero-intro-lg__title,
  .vf-heading-editorial,
  .vfa-story-quote-text,
  #vfa-proof-title,
  .vf-section-heading,
  .serim-section-header__title
) {
  letter-spacing: -0.01em;
}

/* Light-surface text roles. */
body.about-page :is(
  .vfa-heading-md,
  .serim-hero-intro-lg__title,
  .vf-heading-editorial,
  .vfa-community-title,
  .vfa-story-quote-text,
  .vf-section-heading,
  .serim-section-header__title
) {
  color: var(--serim-text-primary);
}

body.about-page :is(
  .vfa-story-body,
  .vfa-story-quote-role,
  .vfa-community-body,
  .vfa-mission-subline,
  .vfa-value-card h3
) {
  color: var(--serim-text-secondary);
}

body.about-page :is(
  .vfa-value-card p,
  .vfa-solution-copy p,
  .vfa-contact-note
) {
  color: var(--serim-text-weak);
}

body.about-page :is(.vf-section-label, .vfa-story .vf-section-label) {
  --vf-section-label-color: var(--serim-text-secondary);
  color: var(--serim-text-secondary);
}

body.about-page :is(.vfa-story-body a, .vfa-community-button:focus-visible) {
  outline-color: var(--serim-text-link-focus-soft);
}

body.about-page .vfa-story-body a {
  color: var(--serim-text-link-focus-strong);
}

body.about-page .vfa-community-button--secondary {
  color: var(--serim-text-button);
}

@media (hover: hover) and (pointer: fine) {
  body.about-page .vfa-community-button--secondary:hover {
    color: var(--serim-text-button-hover);
  }
}

body.about-page .vfa-community-button--secondary:active {
  color: var(--serim-text-button-hover);
}

/* Dark-surface text roles are explicit; the site has no automatic dark mode. */
body.about-page .vfa-proof {
  color: var(--serim-text-primary-on-dark);
}

body.about-page .vfa-proof :is(#vfa-proof-title, .vfa-proof-metric dd) {
  color: var(--serim-text-primary-on-dark);
}

body.about-page .vfa-proof .vfa-proof-metric dt {
  color: var(--serim-text-secondary-on-dark);
}

body.about-page .vfa-proof .vf-section-label--inverse {
  --vf-section-label-inverse-color: var(--serim-text-weak-on-dark);
  color: var(--serim-text-weak-on-dark);
}