/* Typo Kit v1: Japanese type pair presets, dependency-free */

:root {
  --tk-display: "Noto Serif JP", serif;
  --tk-body: "Noto Sans JP", sans-serif;
  --tk-display-weight: 700;
  --tk-body-weight: 400;
  --tk-letter: 0.04em;
  --tk-leading: 1.8;
  --tk-jump: 3;
}

.tk-wamodern {
  --tk-display: "Shippori Mincho", serif;
  --tk-body: "Zen Kaku Gothic New", sans-serif;
  --tk-display-weight: 600;
  --tk-body-weight: 400;
  --tk-letter: 0.07em;
  --tk-leading: 1.95;
  --tk-jump: 3.2;
}

.tk-luxury {
  --tk-display: "Noto Serif JP", serif;
  --tk-body: "Noto Sans JP", sans-serif;
  --tk-display-weight: 500;
  --tk-body-weight: 400;
  --tk-letter: 0.09em;
  --tk-leading: 2;
  --tk-jump: 3.6;
}

.tk-cleanpro {
  --tk-display: "Zen Kaku Gothic New", sans-serif;
  --tk-body: "Zen Kaku Gothic New", sans-serif;
  --tk-display-weight: 700;
  --tk-body-weight: 400;
  --tk-letter: 0.02em;
  --tk-leading: 1.7;
  --tk-jump: 2.8;
}

.tk-retro {
  --tk-display: "Kaisei Decol", serif;
  --tk-body: "Zen Maru Gothic", sans-serif;
  --tk-display-weight: 700;
  --tk-body-weight: 400;
  --tk-letter: 0.03em;
  --tk-leading: 1.85;
  --tk-jump: 3;
}

.tk-street {
  --tk-display: "Dela Gothic One", sans-serif;
  --tk-body: "Noto Sans JP", sans-serif;
  --tk-display-weight: 400;
  --tk-body-weight: 400;
  --tk-letter: 0.01em;
  --tk-leading: 1.7;
  --tk-jump: 3.2;
}

:where(.tk-wamodern, .tk-luxury, .tk-cleanpro, .tk-retro, .tk-street) {
  font-family: var(--tk-body);
  font-weight: var(--tk-body-weight);
  letter-spacing: var(--tk-letter);
  line-height: var(--tk-leading);
}

:where(.tk-wamodern, .tk-luxury, .tk-cleanpro, .tk-retro, .tk-street) :where(h1, h2, h3) {
  margin-block: 0 0.6em;
  font-family: var(--tk-display);
  font-weight: var(--tk-display-weight);
  line-height: 1.25;
  letter-spacing: var(--tk-letter);
}

:where(.tk-wamodern, .tk-luxury, .tk-cleanpro, .tk-retro, .tk-street) h1 {
  font-size: clamp(2rem, calc(1rem + var(--tk-jump) * 1vw), 4.5rem);
}

:where(.tk-wamodern, .tk-luxury, .tk-cleanpro, .tk-retro, .tk-street) h2 {
  font-size: clamp(1.6rem, calc(1rem + var(--tk-jump) * 0.65vw), 3rem);
}

:where(.tk-wamodern, .tk-luxury, .tk-cleanpro, .tk-retro, .tk-street) h3 {
  font-size: clamp(1.25rem, calc(1rem + var(--tk-jump) * 0.35vw), 2rem);
}

:where(.tk-wamodern, .tk-luxury, .tk-cleanpro, .tk-retro, .tk-street) :where(.tk-lead, .tk-body, p) {
  font-family: var(--tk-body);
  font-weight: var(--tk-body-weight);
  line-height: var(--tk-leading);
}

:where(.tk-wamodern, .tk-luxury, .tk-cleanpro, .tk-retro, .tk-street) .tk-lead {
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.35rem);
}