/* Tokihana — Typography tokens
 *
 * Two families do all the work:
 *  - Shippori Mincho (しっぽり明朝) as the display serif. It appears wherever
 *    warmth + tradition matter: hero H1, section H2/H3, step numerals, big
 *    stat figures, and — set italic with wide tracking — the small English
 *    section eyebrow labels ("regrets", "3 supports", "book now" …).
 *  - Yu Gothic / Hiragino Kaku Gothic ProN as the body sans. Reserved for
 *    running Japanese copy, chips, and button labels.
 *
 * Sizes are tuned for a 402px-wide mobile canvas — dense but generous.
 */

:root {
  /* ---------- Families ---------- */
  --font-serif: "Shippori Mincho", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN", serif;
  --font-sans:  "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;

  --font-display: var(--font-serif);   /* h1-h3, big numerals */
  --font-body:    var(--font-sans);    /* running copy */
  --font-label:   var(--font-serif);   /* italic English eyebrow */

  /* ---------- Weights ---------- */
  --fw-regular:  400;   /* @kind font */
  --fw-medium:   500;   /* @kind font */
  --fw-bold:     700;   /* @kind font */

  /* ---------- Sizes (mobile canonical) ---------- */
  --fs-hero:     31px;   /* hero H1 */
  --fs-h2:       23px;   /* section H2 */
  --fs-h3:       21px;   /* pillar H3 */
  --fs-h3-sm:    19px;
  --fs-body-lg:  15px;   /* CTA label */
  --fs-body:     14px;   /* card body */
  --fs-body-sm:  13px;   /* checklist row */
  --fs-caption:  12px;   /* section blurb */
  --fs-meta:     11px;   /* meta, disclaimer */
  --fs-micro:    10.5px; /* chip */
  --fs-nano:     9px;    /* eyebrow, phone mock text */

  --fs-num-step:   25px;
  --fs-num-pillar: 46px;
  --fs-num-stat:   26px;

  /* ---------- Line heights ---------- */
  --lh-tight:    1.4;    /* @kind font */
  --lh-heading:  1.55;   /* @kind font */
  --lh-body:     1.8;    /* @kind font */
  --lh-loose:    2;      /* @kind font */

  /* ---------- Letter spacing ---------- */
  --tracking-tight:    .02em;   /* @kind font */
  --tracking-heading:  .03em;   /* @kind font */
  --tracking-eyebrow:  .14em;   /* @kind font */
  --tracking-eyebrow-lg: .2em;  /* @kind font */
  --tracking-caps:     .26em;   /* @kind font */

  /* ---------- Semantic aliases ---------- */
  --text-hero-family:    var(--font-display);
  --text-hero-size:      var(--fs-hero);
  --text-hero-weight:    var(--fw-bold);
  --text-hero-lh:        1.5;

  --text-h2-family:      var(--font-display);
  --text-h2-size:        var(--fs-h2);
  --text-h2-weight:      var(--fw-bold);

  --text-body-family:    var(--font-body);
  --text-body-size:      var(--fs-body);
  --text-body-lh:        var(--lh-body);

  --text-eyebrow-family: var(--font-label);
  --text-eyebrow-size:   var(--fs-caption);
  --text-eyebrow-style:  italic;
  --text-eyebrow-track:  var(--tracking-eyebrow-lg);

  /* ---------- Style aliases (compiler hints) ---------- */
  --text-eyebrow-style-italic: italic;   /* @kind other */
}

/* Utility helper classes — templates may bypass these and set styles inline,
 * but they're handy for cards + rapid prototyping. */
.tkh-h1  { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-hero); line-height: 1.5; letter-spacing: var(--tracking-heading); color: var(--text-heading); }
.tkh-h2  { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2);   line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: var(--text-heading); }
.tkh-h3  { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3);   line-height: 1.5; letter-spacing: var(--tracking-heading); color: var(--text-heading); }
.tkh-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.tkh-meta { font-family: var(--font-body); font-size: var(--fs-meta); color: var(--text-meta); }
.tkh-eyebrow {
  font-family: var(--font-label);
  font-style: italic;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-eyebrow-lg);
  color: var(--text-brand);
  text-transform: lowercase;
}