/* K-Beauty Pass Typography System */
/* Based on Figma Design System */

/* Font Family */
:root {
  --font-primary: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* Typography Scale */
.text-big-title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.17;
  letter-spacing: -1%;
}

.text-title-1 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.17;
  letter-spacing: 0%;
}

.text-title-2 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.17;
  letter-spacing: -1%;
}

.text-title-3 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.17;
  letter-spacing: -1%;
}

.text-subtitle-1 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.17;
  letter-spacing: 0%;
}

.text-subtitle-1-medium {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.17;
  letter-spacing: 0%;
}

.text-subtitle-2 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.17;
  letter-spacing: 0%;
}

.text-body {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.17;
  letter-spacing: 0%;
}

.text-caption {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.17;
  letter-spacing: -3%;
}

/* Responsive Typography */
@media (max-width: 375px) {
  .text-big-title {
    font-size: 26px;
  }

  .text-title-1 {
    font-size: 22px;
  }

  .text-title-2 {
    font-size: 20px;
  }

  .text-title-3 {
    font-size: 20px;
  }

  .text-subtitle-1 {
    font-size: 16px;
  }

  .text-subtitle-1-medium {
    font-size: 16px;
  }

  .text-subtitle-2 {
    font-size: 14px;
  }

  .text-body {
    font-size: 14px;
  }

  .text-caption {
    font-size: 12px;
  }
}

/* Utility Classes */
.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.font-regular {
  font-weight: 400;
}

/* Text Colors */
.text-primary {
  color: #000000;
}

.text-secondary {
  color: #6d6d6d;
}

.text-muted {
  color: #5e5e5e;
}