/* 시요일 — Typography.
   Two families do the work: KoPub Batang (serif) for poems + editorial display,
   KoPubDotum (sans) for all UI. SUIT is the alternate UI sans used in bottom-nav labels.
   Sizes / line-heights transcribed verbatim from the source. */

:root {
  /* Families */
  --font-serif: "KoPub Batang", "KoPubBatang", Georgia, "Nanum Myeongjo", serif;
  --font-sans: "KoPubDotum", "KoPub Dotum", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-nav: "SUIT", "KoPubDotum", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Weights (KoPub ships 300/400/700) */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Type scale (px) */
  --fs-micro: 11px;
  --fs-caption: 12px;
  --fs-body: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-title: 20px;
  --fs-xl: 22px;
  --fs-display-sm: 26px;
  --fs-display: 28px;
  --fs-display-lg: 30px;

  /* Line heights */
  --lh-micro: 16px;
  --lh-caption: 16px;
  --lh-body: 20px;
  --lh-base: 24px;
  --lh-poem: 26px;   /* KoPub Batang body inside poem cards */
  --lh-title: 30px;
  --lh-display: 38px;

  --tracking-nav: -0.02em; /* SUIT nav labels */
}

/* ── Role classes — apply directly or copy the declarations ── */
.siy-display   { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-display); color: var(--text-primary); }
.siy-poem-title{ font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-title); line-height: var(--lh-title); color: var(--text-primary); }
.siy-poem-body { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-base); line-height: var(--lh-poem); color: var(--text-primary); }
.siy-quote     { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-lg); line-height: 30px; color: var(--text-secondary); }

.siy-heading   { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-title); line-height: var(--lh-title); color: var(--text-primary); }
.siy-title     { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text-primary); }
.siy-body      { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }
.siy-label     { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-label); }
.siy-caption   { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-tertiary); }
.siy-micro     { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--text-tertiary); }
.siy-nav       { font-family: var(--font-nav); font-weight: 600; font-size: 10px; line-height: 1.4; letter-spacing: var(--tracking-nav); }