/* Typography — Hiragino Sans for Japanese text, SF Pro for numerals.
 * Hiragino weight names map to CSS weights: W3=300 W4=400 W5=500 W6=600 W7=700. */
:root{
  --font-jp: "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Pro", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --fw-light: 300; /* @kind font */   /* W3 — body copy, captions, "有効期限:" labels */
  --fw-regular: 400; /* @kind font */ /* W4 */
  --fw-medium: 500; /* @kind font */  /* W5 — card meta, tab-bar labels, 9px legends */
  --fw-semibold: 600; /* @kind font *//* W6 — app-bar titles, button labels, field values */
  --fw-bold: 700; /* @kind font */    /* W7 — card CTA, screen headlines */

  /* Documented scale (Theme/Typography frame) */
  --size-headline-1: 28px;
  --size-headline-2: 20px;
  --size-headline-3: 16px;
  --size-headline-4: 14px;

  /* Sizes as actually used across the app screens */
  --size-9: 9px;    /* card legend, tab-bar label, "更新する" */
  --size-10: 10px;  /* card expiry label */
  --size-12: 12px;  /* helper text, tabs, 円 unit */
  --size-13: 13px;  /* card number */
  --size-14: 14px;  /* body, card CTA, form label */
  --size-15: 15px;  /* app-bar title (compact) */
  --size-16: 16px;  /* button label, section heading */
  --size-18: 18px;  /* text-field value */
  --size-19: 19px;  /* app-bar title (large), card expiry date */
  --size-20: 20px;  /* card expiry date (payment) */
  --size-24: 24px;  /* badge numeral */
  --size-28: 28px;  /* walkthrough headline */
  --size-36: 36px;  /* card amount */

  --lh-tight: 100%; /* @kind other */
  --lh-snug: 1.2; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-loose: 1.75; /* @kind other */

  --ls-tight: 0.020em; /* @kind other */ /* app-bar titles, dates */
  --ls-wide: 0.040em; /* @kind other */  /* button labels, headings */
}