/* ============================================================
   TYPOGRAPHY — Noto Sans JP.  (--font-sans / --font-mono live in
   tokens/fonts.css — do NOT redeclare them here.)

   This system runs TWO type scales, on purpose:
   • THIS file = the COMPONENT / data scale (13–64px) — charts, tables,
     metric cards, panels, legends. Small type for embedded UI.
   • The SLIDE scale (--fs-slide-*, 16–132px) — sized for the
     1920×1080 slide canvas; consumed by slides/slides.css.
   Use these --fs-* tokens for components; use the slide classes for
   slide text. Don't cross the streams.
   ============================================================ */

:root {
  /* Weights — Noto Sans JP ships 400 / 500 / 700 */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* ---- Component / data type scale (px) — NOT slide text ---- */
  --fs-metric-xl: 64px;  /* hero stat in a metric card */
  --fs-metric-lg: 48px;  /* primary stat */
  --fs-metric-md: 36px;  /* secondary stat */
  --fs-h1:        32px;  /* panel / card title */
  --fs-h2:        24px;  /* block / column title */
  --fs-h3:        20px;  /* sub-block title */
  --fs-body:      16px;  /* default reading size */
  --fs-label:     14px;  /* axis labels, legends, table cells */
  --fs-caption:   13px;  /* meta, footnotes, timestamps */
  --fs-mono:      14px;  /* code / mono */

  /* ---- Slide type scale (px) — 1920×1080 canvas (see slides/slides.css) ---- */
  --fs-slide-kicker:    22px;  /* kicker / eyebrow */
  --fs-slide-title:     56px;  /* content-slide title */
  --fs-slide-title-lg:  96px;  /* cover / section-divider title */
  --fs-slide-lead:      28px;  /* intro / section lead sentence */
  --fs-slide-body:      34px;  /* bullet body */
  --fs-slide-sub:       26px;  /* bullet sub-line, stat label / note */
  --fs-slide-stat:     132px;  /* big stat number */
  --fs-slide-foot:      16px;  /* footer source / page */

  /* ---- Line heights ---- */
  --lh-tight:   1.15; /* @kind font */
  --lh-snug:    1.35; /* @kind font */
  --lh-normal:  1.7;  /* @kind font */
  --lh-data:    1.2;  /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight:  -0.01em; /* @kind font */
  --ls-normal:  0;      /* @kind font */
  --ls-wide:    0.02em; /* @kind font */
}

/* ---- Helper classes for the component/data scale. Specimens use these;
   components mostly read the tokens directly. ---- */
.ds-h1   { font: var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-sans); }
.ds-h2   { font: var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-sans); }
.ds-h3   { font: var(--fw-medium) var(--fs-h3)/var(--lh-snug) var(--font-sans); }
.ds-body { font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans); }
.ds-label{ font: var(--fw-medium) var(--fs-label)/var(--lh-data) var(--font-sans); }
.ds-caption { font: var(--fw-regular) var(--fs-caption)/var(--lh-data) var(--font-sans); color: var(--text-subtle); }