/* Typography tokens: the ONE source (Nam 15:34, finding E). Values are
   ~/handoff/AD/claude-ui-architect2/lanes/font-tokens.css verbatim: the :root variables, the
   <=640px block and the dark block. Every text role in the app reads these through var(); no
   sheet may restate a token value as a literal (guard: scripts/test-font-tokens.mjs, computed
   styles on real pages: scripts/test-font-tokens-e2e.mjs).

   Not carried: the source's "ÁP DỤNG" section (global h1/h2/h3/.meta/.caption/.kicker/.eyebrow/
   .lead selectors). Those class names already mean other things in this app, and a global h1 rule
   would restyle protected public pages; each app role consumes the variables in its own rule.

   Dark: the source keys dark on prefers-color-scheme only. The app's theme is an explicit
   choice on <html data-theme>, so the same values apply for data-theme="dark", and for the OS
   setting only when no theme is chosen. The variables are declared here once, outside every
   @scope, so a scoped sheet can never shadow them by accident. */

/* ============================================================
   DESIGN TOKENS — Body text & Heading
   Combo: Source Serif 4 (heading) + Anek Latin (body)
   Sinh từ prototype đã verify: ~/font-prototype.html
   CẬP NHẬT 2026-09-18: đồng bộ giá trị đã duyệt trên
   ~/NoteG-plus-prototype-v3.html (buổi tinh chỉnh tracking + line-height).
   ============================================================ */

:root {
  /* Received wb5 roles: preserve the approved values; each role consumes a token. */
  --wb5-serif-font-family: var(--serif);
  --wb5-heading-weight: 400;
  --wb5-body-weight: 300;
  --wb5-body-tracking: -.009em;
  --wb5-h1-tracking: -.032em;
  --wb5-h2-tracking: -.025em;
  --wb5-title-tracking: -.03em;
  --wb5-index-tracking: -.026em;
  --wb5-caption-tracking: 0;

  /* ---------------- FONT STACKS ---------------- */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Anek Latin', 'Segoe UI', system-ui, sans-serif;

  /* ============================================================
     BODY TEXT — Anek Latin
     ============================================================ */

  /* body chính (body copy, article text) */
  --body-font-family: var(--font-sans);
  --body-weight: 250;
  --body-size: 20px;              /* 19px nếu cột hẹp (<560px) */
  --body-line-height: 1.7;
  --body-tracking: -0.014em;      /* đừng âm hơn: dấu TV chạm chữ trên */
  --body-color: #1f1d19;
  --body-max-width: 34em;

  /* body display (lead paragraph, đoạn mở, text cỡ lớn) */
  --body-display-weight: 200;     /* chỉ dùng từ 28px trở lên */
  --body-display-size: 28px;
  --body-display-line-height: 1.6;
  --body-display-tracking: -0.018em;
  --body-display-color: #171511;

  /* body phụ (caption, byline, meta) — tách khỏi heading bằng weight 300 */
  --body-small-weight: 300;
  --body-small-size: 13px;
  --body-small-line-height: 1.6;
  --body-small-tracking: 0.01em;
  --body-small-color: #6b675e;

  /* ============================================================
     HEADING — Source Serif 4, weight thường (không bold)
     Tracking âm sâu hơn body; càng to càng khít
     [Duyệt 2026-09-18] — giá trị dưới là trạng thái CHÍNH THỨC
     sau buổi tinh chỉnh prototype, KHÔNG quay về giá trị cũ
     (trước đây: tracking -0.028/-0.024/-0.020em, lh 1.15/1.2/1.25)
     ============================================================ */

  /* Chất chỉnh chủ đạo: chữ DÀY KHÍT — letter-spacing sâu, dòng sát */
  --serif-tracking-step: -0.005em;  /* mỗi cấp cỡ chữ cộng thêm 0.005em âm */

  /* H1 — tiêu đề trang / bài viết */
  --h1-font-family: var(--font-serif);
  --h1-weight: 400;
  --h1-size: 44px;
  --h1-line-height: 0.80;          /* dòng sát — chủ đích editorial */
  --h1-tracking: -0.053em;         /* khít sâu — chất editorial */
  --h1-color: #171511;

  /* H2 — section */
  --h2-font-family: var(--font-serif);
  --h2-weight: 400;
  --h2-size: 32px;
  --h2-line-height: 0.86;
  --h2-tracking: -0.049em;
  --h2-color: #171511;

  /* H3 — subsection */
  --h3-font-family: var(--font-serif);
  --h3-weight: 400;
  --h3-size: 24px;
  --h3-line-height: 0.90;
  --h3-tracking: -0.045em;
  --h3-color: #171511;

  /* ============================================================
     DISPLAY SCALE — cỡ chữ lớn (hero/story/manifesto)
     Line-height TÍCH CỰC sát (0.72–0.86): floor thực dụng của CSS,
     xuống dưới nữa trình duyệt bỏ qua (âm tính học đã thử nghiệm 2026-09-18)
     ============================================================ */
  --display-tracking: -0.055em;
  --section-tracking: -0.053em;
  --serif-heading-tracking: -0.053em;
  --home-display: clamp(42px, 6.2vw, 96px);   /* hero home: đã hạ từ 8vw/124px */
  --page-display: clamp(44px, 5.6vw, 80px);
  --section-display: clamp(36px, 4vw, 56px);
  --crew-display: clamp(38px, 4.25vw, 68px);

  /* Ngoại lệ đã duyệt:
     - Hero home h1: line-height 0.90 + tracking -0.070em (riêng, cùng "Together." sát dòng trên)
     - Section-intro h2: cỡ riêng clamp(32px,3.4vw,46px), lh 0.90, max-width none (đúng 2 dòng)
     - Story-teaser: khối dọc căn giữa + panel G+ xuống dưới (không phải grid 2 cột nữa) */

  /* Kicker / eyebrow — nhỏ, uppercase, sans, giãn dương */
  --kicker-font-family: var(--font-sans);
  --kicker-weight: 600;
  --kicker-size: 12px;
  --kicker-tracking: 0.14em;
  --kicker-transform: uppercase;
  --kicker-color: #9a5f3c;
}

/* ============================================================
   RESPONSIVE — mobile: giảm cỡ, giữ tracking
   ============================================================ */
@media (max-width: 640px) {
  :root {
    --h1-size: 34px;
    --h2-size: 26px;
    --h3-size: 21px;
    --body-size: 18px;
    --body-display-size: 23px;
  }
}

/* ============================================================
   DARK MODE (source block, values verbatim)
   ============================================================ */
:root[data-theme="dark"] {
  --body-weight: 275;           /* 250 quá mảnh trên nền tối */
  --body-display-weight: 225;
  --body-color: #d8d4cc;
  --body-display-color: #e8e4dc;
  --h1-color: #f0ece4;
  --h2-color: #f0ece4;
  --h3-color: #f0ece4;
  --body-small-color: #8a857a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --body-weight: 275;           /* 250 quá mảnh trên nền tối */
    --body-display-weight: 225;
    --body-color: #d8d4cc;
    --body-display-color: #e8e4dc;
    --h1-color: #f0ece4;
    --h2-color: #f0ece4;
    --h3-color: #f0ece4;
    --body-small-color: #8a857a;
  }
}