/* ORULINK typography system v1.0
 * Authority: ORULINK_AI_DESIGN_SPEC.md
 * Five formal roles: H1, H2, H3, Body, UI Text. Meta is auxiliary only.
 */
@import url("fonts/misans/Normal/MiSans-Regular.min.css");
@import url("fonts/misans/Normal/MiSans-Semibold.min.css");
@import url("fonts/misans/Normal/MiSans-Bold.min.css");
@import url("fonts/d-din/font-face.css");

:root {
  --font-family-zh: MiSans, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-family-en: "D-DIN-PRO", "DIN Alternate", Arial, MiSans, sans-serif;
  --font-family-code: "D-DIN-PRO", MiSans, "SFMono-Regular", Consolas, monospace;

  --type-h1-size: 64px;
  --type-h2-size: 48px;
  --type-h3-size: 24px;
  --type-body-size: 18px;
  --type-ui-size: 15px;
  --type-meta-size: 12px;
  --type-h1-weight: 700;
  --type-h2-weight: 700;
  --type-h3-weight: 600;
  --type-body-weight: 400;
  --type-ui-weight: 500;
  --type-meta-weight: 600;
  --type-h1-line-height: 1.08;
  --type-h2-line-height: 1.15;
  --type-h3-line-height: 1.3;
  --type-body-line-height: 1.55;
  --type-ui-line-height: 1.4;
  --type-meta-line-height: 1.4;
  --type-h1-letter-spacing: -0.03em;
  --type-h2-letter-spacing: -0.025em;
  --type-h3-letter-spacing: -0.01em;
  --type-body-letter-spacing: 0;
  --type-ui-letter-spacing: 0.01em;
  --type-meta-letter-spacing: 0.06em;

  /* Compatibility aliases; each resolves to an approved role. */
  --type-font-zh: var(--font-family-zh);
  --type-font-latin: var(--font-family-en);
  --type-font-code: var(--font-family-code);
  --type-hero: var(--type-h1-size);
  --type-h1: var(--type-h1-size);
  --type-h2: var(--type-h2-size);
  --type-h3: var(--type-h3-size);
  --type-body-lg: var(--type-body-size);
  --type-body: var(--type-body-size);
  --type-body-sm: var(--type-meta-size);
  --type-label: var(--type-meta-size);
  --type-control: var(--type-ui-size);
  --font-body: var(--font-family-zh);
  --font-display: var(--font-family-zh);
  --font-mono: var(--font-family-code);
  --font: var(--font-family-zh);
}

html {
  font-family: var(--font-family-zh);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body, button, input, textarea, select { font-family: var(--font-family-zh); font-synthesis: none; }
:lang(en), html[data-lang="en"] body, .text-en, .text-numeric { font-family: var(--font-family-en); }
body {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
}
.content, .copy, .lead { min-width: 0; }
.lead { overflow-wrap: anywhere; }
.lead-line, #hero .lead-line-combined, html[data-lang="zh"] .lead-line { white-space: normal; }

/* H1: one semantic page title. */
main h1, .viewer-stage__header h1 {
  font-family: var(--font-family-zh) !important;
  font-size: var(--type-h1-size) !important;
  font-weight: var(--type-h1-weight) !important;
  line-height: var(--type-h1-line-height) !important;
  letter-spacing: var(--type-h1-letter-spacing) !important;
  text-wrap: balance;
}
/* H2: primary section titles. */
main h2, .contact-panel h2 {
  font-family: var(--font-family-zh) !important;
  font-size: var(--type-h2-size) !important;
  font-weight: var(--type-h2-weight) !important;
  line-height: var(--type-h2-line-height) !important;
  letter-spacing: var(--type-h2-letter-spacing) !important;
  text-wrap: balance;
}
/* H3: cards, features, roadmap stages. */
main h3, .card strong, .founder-name, .endorsement-caption strong {
  font-family: var(--font-family-zh) !important;
  font-size: var(--type-h3-size) !important;
  font-weight: var(--type-h3-weight) !important;
  line-height: var(--type-h3-line-height) !important;
  letter-spacing: var(--type-h3-letter-spacing) !important;
  text-wrap: balance;
}
html[data-lang="en"] main h1,
html[data-lang="en"] main h2,
html[data-lang="en"] main h3,
html[data-lang="en"] main p,
html[data-lang="en"] .contact-panel h2,
html[data-lang="en"] .contact-panel p {
  font-family: var(--font-family-en) !important;
}
/* Body: Lead and Body Large are intentionally aliases of Body. */
main p, main li, main dd, .contact-panel p, .contact-note, .card p,
.footer-statement, .viewer-stage__description {
  font-family: var(--font-family-zh) !important;
  font-size: var(--type-body-size) !important;
  font-weight: var(--type-body-weight) !important;
  line-height: var(--type-body-line-height) !important;
  letter-spacing: var(--type-body-letter-spacing) !important;
}
.lead, .hero-copy, .section-lead, .section-body > p, .cta-band p,
.product-hero__lead, .product-outro .section-content > p { max-width: 42rem; }

/* Homepage product copy needs enough room for its first Chinese sentence.
 * Keep the two supporting sentences on clean, intentional lines instead of
 * leaving the final one or two characters stranded on a new line. */
html[data-lang="zh"] #product .lead {
  max-width: min(760px, 100%);
}
html[data-lang="zh"] #product .lead-line {
  overflow-wrap: normal;
  text-wrap: pretty;
}
.card p, .scene-carousel__captions p, .ability-carousel__captions p,
.creation-carousel__captions p, .founder-copy p, .footer-statement, .contact-note { max-width: 38em; }

/* UI Text: navigation, controls, forms and footer links. */
.nav, .detail-nav, .nav a, .detail-nav a, .button, .section-cta, .watch-hero__link,
.contact-submit, .outro-status, .language-toggle button, .contact-field,
.contact-form textarea, .detail-footer a, .footer-links a, .site-footer a,
.footer-email, label, input, textarea, select, button {
  font-family: var(--font-family-zh);
  font-size: var(--type-ui-size) !important;
  font-weight: var(--type-ui-weight) !important;
  line-height: var(--type-ui-line-height) !important;
  letter-spacing: var(--type-ui-letter-spacing) !important;
}
.language-toggle button,
html[data-lang="en"] .nav,
html[data-lang="en"] .detail-nav,
html[data-lang="en"] .button,
html[data-lang="en"] .section-cta,
html[data-lang="en"] .watch-hero__link,
html[data-lang="en"] .contact-submit,
html[data-lang="en"] .contact-field,
html[data-lang="en"] .contact-form textarea,
html[data-lang="en"] .detail-footer a,
html[data-lang="en"] .footer-links a,
html[data-lang="en"] .site-footer a,
html[data-lang="en"] .footer-email,
html[data-lang="en"] label,
html[data-lang="en"] input,
html[data-lang="en"] textarea,
html[data-lang="en"] select,
html[data-lang="en"] button { font-family: var(--font-family-en) !important; }

/* Meta: auxiliary information only. */
.eyebrow, .watch-kicker, .product-hero__eyebrow, .section-index, .section-label,
.slot-index, .roadmap-phase, .hero-meta, .status-label, [class*="kicker"],
[class*="eyebrow"], [class*="footnote"],
[class*="number"], [class*="index"], .detail-footer, .footer-copy,
.footer-heading, .endorsement-caption small, .founder-role,
.viewer-stage__header p, .viewer-stage__header span, .viewer-stage__hint,
.product-360__loading, .product-viewer__loading, .assembly-stage__status,
.media-placeholder span {
  font-family: var(--font-family-en);
  font-size: var(--type-meta-size) !important;
  font-weight: var(--type-meta-weight) !important;
  line-height: var(--type-meta-line-height) !important;
  letter-spacing: var(--type-meta-letter-spacing) !important;
}

/* Numbers use the Meta role; tabular figures keep stable alignment. */
.roadmap-index, .roadmap-year, .roadmap-number, [class*="display-number"] {
  font-family: var(--font-family-en);
  font-size: var(--type-meta-size) !important;
  font-weight: var(--type-meta-weight) !important;
  line-height: var(--type-meta-line-height) !important;
  letter-spacing: var(--type-meta-letter-spacing) !important;
  font-variant-numeric: lining-nums tabular-nums;
}
.roadmap-stage { overflow: hidden; }

/* Component-specific selectors still resolve to the same approved roles. */
.roadmap-stage-label,
.roadmap-stage-description,
.hero-meta span,
.product-hero__copy > p:not(.product-hero__eyebrow),
.section-lead,
.detail-hero .lead,
.card p,
.scene-carousel__captions p,
.ability-carousel__captions p,
.creation-carousel__captions p {
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-line-height) !important;
}
.roadmap-stage-label {
  font-size: var(--type-ui-size) !important;
  line-height: var(--type-ui-line-height) !important;
}
.hero-meta strong,
.detail-hero .eyebrow,
.product-hero__eyebrow,
.section-index,
#hero .copy::before,
#why .copy::before,
#product .copy::before,
#traction .copy::before,
#roadmap .roadmap-intro::before,
#contact .copy::before {
  font-size: var(--type-meta-size) !important;
  line-height: var(--type-meta-line-height) !important;
}
.card strong,
.scene-carousel__captions h3,
.ability-carousel__captions h3,
.creation-carousel__captions h3 {
  font-size: var(--type-h3-size) !important;
  line-height: var(--type-h3-line-height) !important;
}

@media (max-width: 767px) {
  :root {
    --type-h1-size: 40px;
    --type-h2-size: 32px;
    --type-h3-size: 20px;
    --type-body-size: 16px;
    --type-ui-size: 14px;
    --type-meta-size: 12px;
  }
  #hero .content, #hero .copy, #hero h1, #hero .lead { max-width: 100%; }
  .lead-line, #hero .lead-line-combined, html[data-lang="zh"] .lead-line { white-space: normal; overflow-wrap: anywhere; }
  main h1, main h2, main h3, .contact-panel h2, .viewer-stage__header h1 { overflow-wrap: anywhere; }

  /* Keep every prose variant on the single approved mobile Body role.
   * These selectors intentionally outrank legacy page-specific lead rules. */
  main p,
  main p.lead,
  main .lead,
  main .hero-copy,
  main .section-lead,
  main .section-body > p,
  main .cta-band p,
  main .product-hero__lead,
  main .product-outro .section-content > p,
  main .card p,
  main .scene-carousel__captions p,
  main .ability-carousel__captions p,
  main .creation-carousel__captions p,
  main .founder-copy p,
  .footer-statement,
  .contact-note,
  .contact-panel p {
    font-size: var(--type-body-size) !important;
    font-weight: var(--type-body-weight) !important;
    line-height: var(--type-body-line-height) !important;
    letter-spacing: var(--type-body-letter-spacing) !important;
  }

  /* Recommended mobile hit area without changing the approved UI font role. */
  .detail-footer a,
  .footer-links a,
  .site-footer a,
  .contact-close {
    min-height: 44px;
  }
  .detail-footer a, .footer-links a, .site-footer a {
    display: inline-flex;
    align-items: center;
  }
}

/* Approved phone compositions intentionally use tighter display/caption roles
 * so text does not obscure media or force extra rows in compact controls. */
@media (max-width: 620px) {
  .nav {
    font-size: 17px !important;
  }

  #hero h1 {
    font-size: 34px !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
  }

  #why h2,
  #product h2,
  #traction h2,
  #roadmap .roadmap-intro h2,
  #contact h2 {
    font-size: 34px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  #hero .lead,
  #why .lead,
  #product .lead,
  #traction .lead,
  #roadmap .lead,
  #contact .lead {
    font-size: 15px !important;
    line-height: 1.58 !important;
  }

  .roadmap-stage-index {
    font-size: 11px !important;
  }

  .roadmap-stage-label {
    font-size: 13px !important;
  }

  .watch-page .product-hero h1 {
    font-size: 36px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  .watch-page .section-content h2 {
    font-size: 34px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  .watch-page .product-hero__copy > p:not(.product-hero__eyebrow),
  .watch-page .section-lead {
    font-size: 15px !important;
    line-height: 1.58 !important;
  }

  .watch-page .scene-list h3 {
    font-size: 15px !important;
    line-height: 1.08 !important;
  }

  .watch-page .ability-grid h3,
  .watch-page .make-points h3 {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

  .watch-page .scene-carousel__captions h3,
  .watch-page .ability-carousel__captions h3,
  .watch-page .creation-carousel__captions h3 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .watch-page .scene-carousel__captions p,
  .watch-page .ability-carousel__captions p,
  .watch-page .creation-carousel__captions p {
    font-size: 12px !important;
    line-height: 1.38 !important;
  }

  html[data-lang="en"] .watch-page .ability-grid h3 {
    font-size: 10px !important;
  }

  html[data-lang="en"] .watch-page .make-points h3 {
    font-size: 10.5px !important;
    line-height: 1.15 !important;
  }

  html[data-lang="en"] .watch-page .scene-carousel__captions h3,
  html[data-lang="en"] .watch-page .ability-carousel__captions h3,
  html[data-lang="en"] .watch-page .creation-carousel__captions h3 {
    font-size: 17px !important;
  }

  html[data-lang="en"] .watch-page .scene-carousel__captions p,
  html[data-lang="en"] .watch-page .ability-carousel__captions p,
  html[data-lang="en"] .watch-page .creation-carousel__captions p {
    font-size: 10.5px !important;
    line-height: 1.32 !important;
  }
}