/* Wanted Design System — Typography
   The Wanted type scale (Pretendard JP for UI/text; Wanted Sans for brand/display).
   Values transcribed verbatim from the Figma "Typography" page — do not snap to a grid.
   Each role exposes: --font-<role> shorthand-ish set via size/line-height/letter-spacing/weight tokens.
   Utility classes (.wds-display-1 …) apply a full role in one class. */

:root {
  /* Font families */
  --font-family-base: "Pretendard JP", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-brand: "Wanted Sans", "Pretendard JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weights (Pretendard JP ships 100–900; the DS uses these four) */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Type scale: size / line-height / letter-spacing ---- */
  --text-display-1-size: 56px;   --text-display-1-line: 72px;   --text-display-1-tracking: -0.0319em;
  --text-display-2-size: 40px;   --text-display-2-line: 52px;   --text-display-2-tracking: -0.0282em;
  --text-display-3-size: 36px;   --text-display-3-line: 48px;   --text-display-3-tracking: -0.027em;
  --text-title-1-size: 32px;     --text-title-1-line: 44px;     --text-title-1-tracking: -0.0253em;
  --text-title-2-size: 28px;     --text-title-2-line: 38px;     --text-title-2-tracking: -0.0236em;
  --text-title-3-size: 24px;     --text-title-3-line: 32px;     --text-title-3-tracking: -0.023em;
  --text-heading-1-size: 22px;   --text-heading-1-line: 30px;   --text-heading-1-tracking: -0.0194em;
  --text-heading-2-size: 20px;   --text-heading-2-line: 28px;   --text-heading-2-tracking: -0.012em;
  --text-headline-1-size: 18px;  --text-headline-1-line: 26px;  --text-headline-1-tracking: -0.002em;
  --text-headline-2-size: 17px;  --text-headline-2-line: 24px;  --text-headline-2-tracking: 0em;
  --text-body-1-size: 16px;      --text-body-1-line: 24px;      --text-body-1-tracking: 0.0057em;
  --text-body-1-reading-line: 26px;
  --text-body-2-size: 15px;      --text-body-2-line: 22px;      --text-body-2-tracking: 0.0096em;
  --text-body-2-reading-line: 24px;
  --text-label-1-size: 14px;     --text-label-1-line: 20px;     --text-label-1-tracking: 0.0145em;
  --text-label-1-reading-line: 22px;
  --text-label-2-size: 13px;     --text-label-2-line: 18px;     --text-label-2-tracking: 0.0194em;
  --text-caption-1-size: 12px;   --text-caption-1-line: 16px;   --text-caption-1-tracking: 0.0252em;
  --text-caption-2-size: 11px;   --text-caption-2-line: 14px;   --text-caption-2-tracking: 0.0311em;
}

/* ---- Role utility classes ---- */
.wds-display-1,.wds-display-2,.wds-display-3,.wds-title-1,.wds-title-2,.wds-title-3,
.wds-heading-1,.wds-heading-2,.wds-headline-1,.wds-headline-2,
.wds-body-1,.wds-body-1-reading,.wds-body-2,.wds-body-2-reading,
.wds-label-1,.wds-label-1-reading,.wds-label-2,.wds-caption-1,.wds-caption-2{font-family:var(--font-family-base);color:var(--label-normal);margin:0}

.wds-display-1{font-size:var(--text-display-1-size);line-height:var(--text-display-1-line);letter-spacing:var(--text-display-1-tracking);font-weight:var(--font-weight-bold)}
.wds-display-2{font-size:var(--text-display-2-size);line-height:var(--text-display-2-line);letter-spacing:var(--text-display-2-tracking);font-weight:var(--font-weight-bold)}
.wds-display-3{font-size:var(--text-display-3-size);line-height:var(--text-display-3-line);letter-spacing:var(--text-display-3-tracking);font-weight:var(--font-weight-bold)}
.wds-title-1{font-size:var(--text-title-1-size);line-height:var(--text-title-1-line);letter-spacing:var(--text-title-1-tracking);font-weight:var(--font-weight-bold)}
.wds-title-2{font-size:var(--text-title-2-size);line-height:var(--text-title-2-line);letter-spacing:var(--text-title-2-tracking);font-weight:var(--font-weight-bold)}
.wds-title-3{font-size:var(--text-title-3-size);line-height:var(--text-title-3-line);letter-spacing:var(--text-title-3-tracking);font-weight:var(--font-weight-bold)}
.wds-heading-1{font-size:var(--text-heading-1-size);line-height:var(--text-heading-1-line);letter-spacing:var(--text-heading-1-tracking);font-weight:var(--font-weight-bold)}
.wds-heading-2{font-size:var(--text-heading-2-size);line-height:var(--text-heading-2-line);letter-spacing:var(--text-heading-2-tracking);font-weight:var(--font-weight-semibold)}
.wds-headline-1{font-size:var(--text-headline-1-size);line-height:var(--text-headline-1-line);letter-spacing:var(--text-headline-1-tracking);font-weight:var(--font-weight-semibold)}
.wds-headline-2{font-size:var(--text-headline-2-size);line-height:var(--text-headline-2-line);letter-spacing:var(--text-headline-2-tracking);font-weight:var(--font-weight-semibold)}
.wds-body-1{font-size:var(--text-body-1-size);line-height:var(--text-body-1-line);letter-spacing:var(--text-body-1-tracking);font-weight:var(--font-weight-regular)}
.wds-body-1-reading{font-size:var(--text-body-1-size);line-height:var(--text-body-1-reading-line);letter-spacing:var(--text-body-1-tracking);font-weight:var(--font-weight-regular)}
.wds-body-2{font-size:var(--text-body-2-size);line-height:var(--text-body-2-line);letter-spacing:var(--text-body-2-tracking);font-weight:var(--font-weight-regular)}
.wds-body-2-reading{font-size:var(--text-body-2-size);line-height:var(--text-body-2-reading-line);letter-spacing:var(--text-body-2-tracking);font-weight:var(--font-weight-regular)}
.wds-label-1{font-size:var(--text-label-1-size);line-height:var(--text-label-1-line);letter-spacing:var(--text-label-1-tracking);font-weight:var(--font-weight-medium)}
.wds-label-1-reading{font-size:var(--text-label-1-size);line-height:var(--text-label-1-reading-line);letter-spacing:var(--text-label-1-tracking);font-weight:var(--font-weight-medium)}
.wds-label-2{font-size:var(--text-label-2-size);line-height:var(--text-label-2-line);letter-spacing:var(--text-label-2-tracking);font-weight:var(--font-weight-medium)}
.wds-caption-1{font-size:var(--text-caption-1-size);line-height:var(--text-caption-1-line);letter-spacing:var(--text-caption-1-tracking);font-weight:var(--font-weight-medium)}
.wds-caption-2{font-size:var(--text-caption-2-size);line-height:var(--text-caption-2-line);letter-spacing:var(--text-caption-2-tracking);font-weight:var(--font-weight-medium)}