/* ============================================================
   Wanted Design System — Typography
   ──────────────────────────────────────────────────────────────
   Brand text face: Pretendard Variable — single variable font
   covering Korean and English, with Pretendard JP fallback for
   Japanese glyphs. 18-step scale (7 hierarchy levels), all
   spec'd from the Figma source: size / line-height / letter-spacing.

   Use as classes (.t-display-1, .t-body-1) or via CSS vars
   (font: var(--type-body-1)).
   ============================================================ */

/* ── Brand text face: Pretendard Variable ──────────────────
   Single variable font file covers weights 100–900 (45–920 axis).
   Falls back to Pretendard JP for Japanese glyph coverage.
   ─────────────────────────────────────────────────────────── */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-jp.css");

:root {
  /* Font families — Pretendard Variable first, JP CDN for Japanese fallback */
  --font-sans: "Pretendard Variable", "Pretendard JP", "Pretendard",
               -apple-system, BlinkMacSystemFont, system-ui,
               "Apple SD Gothic Neo", "Noto Sans KR", "Hiragino Sans",
               "Yu Gothic", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Menlo",
               "Roboto Mono", monospace;

  /* Weights */
  --w-thin:       100;
  --w-extralight: 200;
  --w-light:      300;
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;
  --w-extrabold:  800;
  --w-black:      900;

  /* ── 18-step type scale ────────────────────────────────────── */
  /* Display — landing pages, hero numbers (rare) */
  --type-display-1:    700 56px/72px var(--font-sans);   /* tracking -0.0319em */
  --type-display-2:    700 40px/52px var(--font-sans);   /* -0.0282em */
  --type-display-3:    700 36px/48px var(--font-sans);   /* -0.027em  */

  /* Title — page titles, section heroes */
  --type-title-1:      700 32px/44px var(--font-sans);   /* -0.0253em */
  --type-title-2:      700 28px/38px var(--font-sans);   /* -0.0236em */
  --type-title-3:      700 24px/32px var(--font-sans);   /* -0.023em  */

  /* Heading — section headers */
  --type-heading-1:    600 22px/30px var(--font-sans);   /* -0.0194em */
  --type-heading-2:    600 20px/28px var(--font-sans);   /* -0.012em  */

  /* Headline — card titles */
  --type-headline-1:   600 18px/26px var(--font-sans);   /* -0.002em */
  --type-headline-2:   600 17px/24px var(--font-sans);   /*  0em     */

  /* Body — paragraph copy, default UI text */
  --type-body-1:       500 16px/24px var(--font-sans);   /* +0.0057em (normal) */
  --type-body-1-read:  500 16px/26px var(--font-sans);   /* reading line-height */
  --type-body-2:       500 15px/22px var(--font-sans);   /* +0.0096em */
  --type-body-2-read:  500 15px/24px var(--font-sans);

  /* Label — buttons, dense UI */
  --type-label-1:      500 14px/20px var(--font-sans);   /* +0.0145em */
  --type-label-1-read: 500 14px/22px var(--font-sans);
  --type-label-2:      500 13px/18px var(--font-sans);   /* +0.0194em */

  /* Caption — meta, hints */
  --type-caption-1:    500 12px/16px var(--font-sans);   /* +0.0252em */
  --type-caption-2:    500 11px/14px var(--font-sans);   /* +0.0312em */
}

/* ── Utility classes ────────────────────────────────────────── */
.t-display-1   { font: var(--type-display-1);   letter-spacing: -0.0319em; }
.t-display-2   { font: var(--type-display-2);   letter-spacing: -0.0282em; }
.t-display-3   { font: var(--type-display-3);   letter-spacing: -0.027em; }

.t-title-1     { font: var(--type-title-1);     letter-spacing: -0.0253em; }
.t-title-2     { font: var(--type-title-2);     letter-spacing: -0.0236em; }
.t-title-3     { font: var(--type-title-3);     letter-spacing: -0.023em; }

.t-heading-1   { font: var(--type-heading-1);   letter-spacing: -0.0194em; }
.t-heading-2   { font: var(--type-heading-2);   letter-spacing: -0.012em; }

.t-headline-1  { font: var(--type-headline-1);  letter-spacing: -0.002em; }
.t-headline-2  { font: var(--type-headline-2);  letter-spacing: 0; }

.t-body-1      { font: var(--type-body-1);      letter-spacing: 0.0057em; }
.t-body-1-read { font: var(--type-body-1-read); letter-spacing: 0.0057em; }
.t-body-2      { font: var(--type-body-2);      letter-spacing: 0.0096em; }
.t-body-2-read { font: var(--type-body-2-read); letter-spacing: 0.0096em; }

.t-label-1     { font: var(--type-label-1);     letter-spacing: 0.0145em; }
.t-label-1-read{ font: var(--type-label-1-read);letter-spacing: 0.0145em; }
.t-label-2     { font: var(--type-label-2);     letter-spacing: 0.0194em; }

.t-caption-1   { font: var(--type-caption-1);   letter-spacing: 0.0252em; }
.t-caption-2   { font: var(--type-caption-2);   letter-spacing: 0.0312em; }