/* PawsLetter — Typography tokens
   Two families, two jobs. Emphasis comes from serif or rose colour — never from bolding body.
   Body weight stays light (300); line-height runs tall (1.7–1.9) so prose breathes. */

:root {
  /* ---- Families ---- */
  --font-display: 'Playfair Display', Georgia, 'Songti TC', serif;
  --font-sans: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'PingFang TC', 'Microsoft JhengHei', sans-serif;

  /* ---- Weights ---- */
  --fw-light: 300;    /* @kind font */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */

  /* ---- Type scale: size / line-height / tracking ---- */
  /* display-xl — the single hero headline. Mobile clamps to 30px. */
  --t-display-xl-size: clamp(30px, 6vw, 44px); /* @kind font */
  --t-display-xl-lh: 1.15;  /* @kind font */
  --t-display-xl-ls: -0.5px; /* @kind font */

  /* display-lg — section openers. Mobile clamps to 26px. */
  --t-display-lg-size: clamp(26px, 4.5vw, 34px); /* @kind font */
  --t-display-lg-lh: 1.2;  /* @kind font */
  --t-display-lg-ls: -0.3px; /* @kind font */

  /* display-md — sub-section titles, feature headings. */
  --t-display-md-size: clamp(22px, 3.2vw, 26px); /* @kind font */
  --t-display-md-lh: 1.3;  /* @kind font */
  --t-display-md-ls: -0.2px; /* @kind font */

  /* display-italic — the "letter voice". */
  --t-display-italic-size: 20px; /* @kind font */
  --t-display-italic-lh: 1.5;  /* @kind font */
  --t-display-italic-ls: 0; /* @kind font */

  --t-heading-sm-size: 18px;   --t-heading-sm-lh: 1.5;  /* @kind font */
  --t-subtitle-size: 16px;     --t-subtitle-lh: 1.7;  /* @kind font */
  --t-body-lg-size: 16px;      --t-body-lg-lh: 1.9;  /* @kind font */
  --t-body-md-size: 14.5px;    --t-body-md-lh: 1.85;  /* @kind font */
  --t-body-sm-size: 13px;      --t-body-sm-lh: 1.7;  /* @kind font */
  --t-button-size: 15px;       --t-button-lh: 1.0; /* @kind font */  --t-button-ls: 0.02em;
  --t-caption-size: 12px;      --t-caption-lh: 1.6; /* @kind font */  --t-caption-ls: 0.02em;
}

/* ---- Type utility classes (use these or the raw vars) ---- */
.t-display-xl {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--t-display-xl-size); line-height: var(--t-display-xl-lh);
  letter-spacing: var(--t-display-xl-ls); color: var(--ink);
}
.t-display-lg {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--t-display-lg-size); line-height: var(--t-display-lg-lh);
  letter-spacing: var(--t-display-lg-ls); color: var(--ink);
}
.t-display-md {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--t-display-md-size); line-height: var(--t-display-md-lh);
  letter-spacing: var(--t-display-md-ls); color: var(--ink);
}
.t-display-italic {
  font-family: var(--font-display); font-weight: var(--fw-regular);
  font-style: italic; font-size: var(--t-display-italic-size);
  line-height: var(--t-display-italic-lh); color: var(--ink);
}
.t-heading-sm {
  font-family: var(--font-sans); font-weight: var(--fw-medium);
  font-size: var(--t-heading-sm-size); line-height: var(--t-heading-sm-lh); color: var(--ink);
}
.t-subtitle {
  font-family: var(--font-sans); font-weight: var(--fw-regular);
  font-size: var(--t-subtitle-size); line-height: var(--t-subtitle-lh); color: var(--body);
}
.t-body-lg {
  font-family: var(--font-sans); font-weight: var(--fw-light);
  font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); color: var(--body);
}
.t-body-md {
  font-family: var(--font-sans); font-weight: var(--fw-light);
  font-size: var(--t-body-md-size); line-height: var(--t-body-md-lh); color: var(--body);
}
.t-body-sm {
  font-family: var(--font-sans); font-weight: var(--fw-light);
  font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); color: var(--body);
}
.t-button {
  font-family: var(--font-sans); font-weight: var(--fw-medium);
  font-size: var(--t-button-size); line-height: var(--t-button-lh);
  letter-spacing: var(--t-button-ls);
}
.t-caption {
  font-family: var(--font-sans); font-weight: var(--fw-light);
  font-size: var(--t-caption-size); line-height: var(--t-caption-lh);
  letter-spacing: var(--t-caption-ls); color: var(--muted);
}