/* ============================================================
   Wanted Design System — Typography
   ------------------------------------------------------------
   Families:
     --font-display : Wanted Sans  — marketing / large headings
     --font-body    : Pretendard   — product UI, body, everything default
     --font-mono    : SF Mono / system mono — code, numerals in data
   Scale: 7 tiers / 18 sub-levels (Display → Caption). Each level pins
   size + line-height + letter-spacing exactly as defined in the source.
   Korean/CJK-first metrics: line-heights run generous, letter-spacing
   tightens as size grows and loosens at small sizes for legibility.
   ============================================================ */

:root {
  --font-display: "Wanted Sans Variable", "Wanted Sans", "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, "Wanted Sans Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

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

/* ---- Type utility classes ----------------------------------
   Set family + metrics. Weight defaults to a sensible role weight
   but can be overridden with --weight-* or font-weight inline.
   Display/Title classes use the Wanted Sans display family.        */

.ws-display-2, .ws-display-3, .ws-title-1, .ws-title-2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
}
.ws-display-2 { font-size: var(--display-2-size); line-height: var(--display-2-line); letter-spacing: var(--display-2-spacing); }
.ws-display-3 { font-size: var(--display-3-size); line-height: var(--display-3-line); letter-spacing: var(--display-3-spacing); }
.ws-title-1   { font-size: var(--title-1-size);   line-height: var(--title-1-line);   letter-spacing: var(--title-1-spacing); }
.ws-title-2   { font-size: var(--title-2-size);   line-height: var(--title-2-line);   letter-spacing: var(--title-2-spacing); }

.ws-title-3, .ws-heading-1, .ws-heading-2 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
}
.ws-title-3   { font-size: var(--title-3-size);   line-height: var(--title-3-line);   letter-spacing: var(--title-3-spacing); }
.ws-heading-1 { font-size: var(--heading-1-size); line-height: var(--heading-1-line); letter-spacing: var(--heading-1-spacing); }
.ws-heading-2 { font-size: var(--heading-2-size); line-height: var(--heading-2-line); letter-spacing: var(--heading-2-spacing); }

.ws-headline-1, .ws-headline-2 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
}
.ws-headline-1 { font-size: var(--headline-1-size); line-height: var(--headline-1-line); letter-spacing: var(--headline-1-spacing); }
.ws-headline-2 { font-size: var(--headline-2-size); line-height: var(--headline-2-line); letter-spacing: var(--headline-2-spacing); }

.ws-body-1, .ws-body-1-reading, .ws-body-2, .ws-body-2-reading,
.ws-label-1, .ws-label-1-reading, .ws-label-2, .ws-caption-1, .ws-caption-2 {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
}
.ws-body-1         { font-size: var(--body-1-size); line-height: var(--body-1-line);         letter-spacing: var(--body-1-spacing); }
.ws-body-1-reading { font-size: var(--body-1-size); line-height: var(--body-1-reading-line); letter-spacing: var(--body-1-spacing); }
.ws-body-2         { font-size: var(--body-2-size); line-height: var(--body-2-line);         letter-spacing: var(--body-2-spacing); }
.ws-body-2-reading { font-size: var(--body-2-size); line-height: var(--body-2-reading-line); letter-spacing: var(--body-2-spacing); }
.ws-label-1         { font-size: var(--label-1-size); line-height: var(--label-1-line);         letter-spacing: var(--label-1-spacing); }
.ws-label-1-reading { font-size: var(--label-1-size); line-height: var(--label-1-reading-line); letter-spacing: var(--label-1-spacing); }
.ws-label-2   { font-size: var(--label-2-size);   line-height: var(--label-2-line);   letter-spacing: var(--label-2-spacing); }
.ws-caption-1 { font-size: var(--caption-1-size); line-height: var(--caption-1-line); letter-spacing: var(--caption-1-spacing); }
.ws-caption-2 { font-size: var(--caption-2-size); line-height: var(--caption-2-line); letter-spacing: var(--caption-2-spacing); }