/* ==========================================================================
   Design System - Typography
   폰트 관련 변수들
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Pretendard Font Face - 한글 폰트
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------------------
     Font Family - 폰트 패밀리
     --------------------------------------------------------------------------- */
  --font-family-primary: 'DM Sans', 'Pretendard', ui-sans-serif, system-ui, sans-serif;

  /* ---------------------------------------------------------------------------
     Font Size - 폰트 크기
     --------------------------------------------------------------------------- */
  /* Micro */
  --font-size-3xs: 8px;     /* 아바타 xs 이니셜 */
  --font-size-2xs: 10px;    /* 아바타 sm 이니셜, 요일 라벨 */
  /* Text */
  --font-size-xs: 11px;     /* 라벨, 배지 */
  --font-size-sm: 13px;     /* 소제목, 부가 정보 */
  --font-size-md: 15px;     /* 본문 기본 */
  --font-size-xl: 17px;     /* 섹션/페이지 제목 */
  /* Display */
  --font-size-2xl: 20px;    /* 큰 제목 */
  --font-size-3xl: 22px;    /* 이모지 그리드 */
  --font-size-4xl: 24px;    /* 대형 제목 */
  --font-size-5xl: 28px;    /* 온보딩 제목 */
  --font-size-6xl: 32px;    /* 탭 제목 */
  --font-size-7xl: 48px;    /* 축하 이모지 */

  /* ---------------------------------------------------------------------------
     Font Weight - 폰트 두께
     --------------------------------------------------------------------------- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---------------------------------------------------------------------------
     Line Height - 행간
     --------------------------------------------------------------------------- */
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;

  /* ---------------------------------------------------------------------------
     Letter Spacing - 자간
     --------------------------------------------------------------------------- */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.01em;
}

/* ==========================================================================
   Typography Utility Classes
   ========================================================================== */

/* Font Sizes */
.text-3xs { font-size: var(--font-size-3xs); line-height: var(--line-height-normal); }
.text-2xs { font-size: var(--font-size-2xs); line-height: var(--line-height-normal); }
.text-xs { font-size: var(--font-size-xs); line-height: var(--line-height-normal); }
.text-sm { font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
.text-md { font-size: var(--font-size-md); line-height: var(--line-height-normal); }
.text-xl { font-size: var(--font-size-xl); line-height: var(--line-height-tight); }
.text-2xl { font-size: var(--font-size-2xl); line-height: var(--line-height-tight); }
.text-3xl { font-size: var(--font-size-3xl); line-height: var(--line-height-tight); }
.text-4xl { font-size: var(--font-size-4xl); line-height: var(--line-height-tight); }
.text-5xl { font-size: var(--font-size-5xl); line-height: var(--line-height-tight); }
.text-6xl { font-size: var(--font-size-6xl); line-height: var(--line-height-tight); }
.text-7xl { font-size: var(--font-size-7xl); line-height: 1; }

/* Font Weights */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }