/*
  Global design tokens.
  Values transcribed from the Owner-approved Pencil desktop reference
  (`01 Scoring Criteria Overview.pen`, "Continuous Page — Part 1 through 4"),
  per docs/features/scoring-criteria/UI_SPEC.md's designation of that
  exploration as the authoritative visual reference. UI_SPEC / DESIGN_SYSTEM
  fill in principles Pencil doesn't fix (e.g. exact mobile behavior).
*/

:root {
  /* Color */
  --color-bg: #f7f4ee;
  --color-surface: #ffffff;
  --color-text: #23201b;
  --color-text-secondary: #4a4438;
  --color-text-muted: #6e6659;
  --color-text-faint: #756a5c; /* was #b3a996 (2.12:1 vs --color-bg,
    fails WCAG AA). New value ≈4.8:1 vs --color-bg / ≈5.3:1 vs
    --color-surface — passes AA for the small (12–15px) body-scale text
    this token is used on (image captions, worked-example labels, anchor
    nav), while staying lighter than --color-text-muted (5.16:1) so the
    two tiers remain visually distinct. */
  --color-border: #e7e1d5;
  --color-accent: #2f5d53;
  --color-accent-tint: #2f5d531f;
  --color-accent-vivid: #12855f;

  /* Card depth — warm-toned (ink, not black) so surfaces read as resting
     objects rather than outlined shapes. Owner review 2026-08-16. */
  --shadow-soft: 0 1px 2px rgba(35, 32, 27, 0.05), 0 10px 24px rgba(35, 32, 27, 0.07);

  /* Typography — two-family system, transcribed from Pencil */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --font-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  --fs-page-title: 2.375rem; /* 38px */
  --fs-unit-title: 1.5rem; /* 24px */
  --fs-why-heading: 1.25rem; /* 20px */
  --fs-section-heading: 1.125rem; /* 18px, was 17px — DESIGN_SYSTEM §5 2026-08-16 */
  --fs-what-definition: 1.1875rem; /* 19px, was 18px */
  --fs-body: 1.0625rem; /* 17px, was 15.5px */
  --fs-target-title: 1.0625rem; /* 17px, was 16px */
  --fs-target-desc: 1.03125rem; /* 16.5px, was 15px */
  --fs-emphasis-note: 1rem; /* 16px, was 14.5px */
  --fs-nested: 0.9375rem; /* 15px, was 14px */
  --fs-kicker: 0.71875rem; /* 11.5px — unchanged; still used for genuinely
    secondary eyebrow labels (module kicker, "推荐下一步"). Learning Unit
    stage labels use --fs-stage-label instead, see below. */
  --fs-stage-label: 1.125rem; /* 18px — heading-weight stage label
    (WHAT / WHAT MATTERS / HOW / AVOID), scoring-criteria UI_SPEC §6
    amendment 2026-08-16. Distinct role from --fs-kicker above. */
  --fs-pair-caption: 0.78125rem; /* 12.5px */
  --fs-code: 1.625rem; /* 26px */
  --fs-transition: 0.84375rem; /* 13.5px */
  --fs-nav: 1rem; /* 16px — persistent navigation should match the body reading scale */
  --fs-wordmark: 0.9375rem; /* 15px */
  --fs-anchor: 0.8125rem; /* 13px */
  --fs-anchor-active: 0.90625rem; /* 14.5px */
  --fs-topic-title: 2rem; /* 32px */
  --fs-eyebrow: 0.75rem; /* 12px */

  --lh-body: 1.6; /* was 1.75 — DESIGN_SYSTEM §5 2026-08-16: line height
    should not be the primary consumer of vertical space on top of a
    larger font size */
  --lh-relaxed: 1.55; /* was 1.65 */
  --lh-snug: 1.5; /* was 1.6 */
  --lh-heading: 1.35;

  /* Spacing rhythm (Pencil gap values) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.75rem;
  --space-7: 2rem;
  --space-8: 3rem;
  --space-9: 5rem;

  /* Layout */
  /* Shared learning shell: wider than a conventional article column so
     long-form lessons expose more of each section per viewport while the
     text measure remains bounded for comfortable reading. */
  --content-shell-width: 1180px;
  --reading-column-width: 800px;
  --anchor-width: 140px;
  --header-height: 64px;
}