/* ============================================================
   brief.css — type scale + locale-specific tuning
   Layered on top of colors_and_type.css + tokens.css.
   The EN-parity pass lives in this file.
   ============================================================ */

/* ZH (default) — tighter leading, denser */
:root {
  --cc-zh-h1: clamp(1.9rem, 4vw, 2.8rem);
  --cc-zh-h2: clamp(1.4rem, 3vw, 2rem);
  --cc-zh-h3: 1.25rem;
  --cc-zh-h4: 1.0625rem;
  --cc-zh-body: 0.9375rem;
  --cc-zh-body-lg: 1.0625rem;
  --cc-zh-meta: 0.8125rem;

  --cc-zh-lh-display: 1.25;
  --cc-zh-lh-h: 1.35;
  --cc-zh-lh-body: 1.7;
}

/* EN parity — +1 step display, looser leading, heavier tracked eyebrows */
:root {
  --cc-en-h1: clamp(2.125rem, 4.4vw, 3.25rem);
  --cc-en-h2: clamp(1.625rem, 3.3vw, 2.375rem);
  --cc-en-h3: 1.375rem;
  --cc-en-h4: 1.125rem;
  --cc-en-body: 1rem;
  --cc-en-body-lg: 1.125rem;
  --cc-en-meta: 0.8125rem;

  --cc-en-lh-display: 1.12;
  --cc-en-lh-h: 1.25;
  --cc-en-lh-body: 1.65;

  --cc-en-tracking-display: -0.01em;
  --cc-en-tracking-eyebrow: 0.2em;
  --cc-en-tracking-nav: 0.08em;
}

/* Default — ZH ramp */
.cc-h1 {
  font-size: var(--cc-zh-h1);
  line-height: var(--cc-zh-lh-h);
}
.cc-h2 {
  font-size: var(--cc-zh-h2);
  line-height: var(--cc-zh-lh-h);
}
.cc-h3 {
  font-size: var(--cc-zh-h3);
  line-height: var(--cc-zh-lh-h);
}
.cc-h4 {
  font-size: var(--cc-zh-h4);
  line-height: var(--cc-zh-lh-h);
}
.cc-body {
  font-size: var(--cc-zh-body);
  line-height: var(--cc-zh-lh-body);
}
.cc-body-lg {
  font-size: var(--cc-zh-body-lg);
  line-height: var(--cc-zh-lh-body);
}

/* EN overrides — apply automatically when :lang(en) wraps the surface */
:lang(en) .cc-h1,
:lang(en).cc-h1 {
  font-size: var(--cc-en-h1);
  line-height: var(--cc-en-lh-h);
  letter-spacing: var(--cc-en-tracking-display);
  font-family: var(--cc-font-display);
  font-weight: 500;
}
:lang(en) .cc-h2,
:lang(en).cc-h2 {
  font-size: var(--cc-en-h2);
  line-height: var(--cc-en-lh-h);
  letter-spacing: -0.005em;
}
:lang(en) .cc-h3,
:lang(en).cc-h3 {
  font-size: var(--cc-en-h3);
  line-height: var(--cc-en-lh-h);
}
:lang(en) .cc-h4,
:lang(en).cc-h4 {
  font-size: var(--cc-en-h4);
  line-height: 1.4;
}
:lang(en) .cc-body,
:lang(en).cc-body {
  font-size: var(--cc-en-body);
  line-height: var(--cc-en-lh-body);
}
:lang(en) .cc-body-lg,
:lang(en).cc-body-lg {
  font-size: var(--cc-en-body-lg);
  line-height: var(--cc-en-lh-body);
}

:lang(en) .cc-eyebrow,
:lang(en).cc-eyebrow {
  letter-spacing: var(--cc-en-tracking-eyebrow);
  font-size: 0.78rem;
}
:lang(en) .cc-nav-item {
  letter-spacing: var(--cc-en-tracking-nav);
}

/* Quotation marks — strip Chinese full-width inside EN surfaces */
:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(zh-Hant),
:lang(zh) {
  quotes: "「" "」" "『" "』";
}

/* EN-only display utility — bumps Cormorant Garamond hero text */
.cc-display-en {
  font-family: var(--cc-font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 6.4vw, 4.5rem);
  line-height: var(--cc-en-lh-display);
  letter-spacing: var(--cc-en-tracking-display);
  color: var(--cc-fg-strong);
}

/* Fallback badge for untranslated content on EN locale */
.cc-zh-fallback::after {
  content: "[ZH]";
  margin-left: 0.5em;
  font-size: 0.7em;
  letter-spacing: 0.12em;
  padding: 1px 5px;
  background: var(--cc-surface-warm);
  color: var(--cc-fg-quiet);
  border-radius: 2px;
  vertical-align: 2px;
}

/* Section eyebrow rule — keep blue across both locales */
.cc-eyebrow::after {
  background: var(--cc-primary);
}

/* Brand line — bilingual, full factory story */
.cc-brandline {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cc-fg-muted);
  font-weight: 500;
}
:lang(en) .cc-brandline {
  letter-spacing: 0.22em;
  font-size: 0.75rem;
}