@charset "UTF-8";

/* =========================================================
  Design Tokens
  - Font: Pretendard
  - Color / Typography tokens extracted from the provided design spec
========================================================= */

:root {
  /* Font family */
  --font-kr: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

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

  /* Brand */
  --color-primary: #FF4600;

  /* Grayscale */
  --gray-900: #060B11;
  --gray-800: #2E3338;
  --gray-700: #555D65;
  --gray-600: #606A74;
  --gray-500: #707C87;
  --gray-400: #B2BAC2;
  --gray-300: #CED4DA;
  --gray-200: #E3E8EC;
  --gray-50: #F8F9FA;
  --bg: #F2F3F5;
  --line: #EEEFF0;

  /* Typography - size */
  --fs-display-1: 40px;
  --fs-title-1: 24px;
  --fs-title-2: 20px;
  --fs-heading-1: 16px;
  --fs-heading-2: 15px;
  --fs-button: 18px;
  --fs-body-1: 16px;
  --fs-body-2: 15px;
  --fs-body-3: 14px;
  --fs-body-4: 14px;
  --fs-caption: 12px;

  /* Typography - line height */
  --line-height-display-1: 48px;
  --line-height-title-1: 30px;
  --line-height-title-2: 28px;
  --line-height-heading-1: 20px;
  --line-height-heading-2: 20px;
  --line-height-button: 20px;
  --line-height-body-1: 20px;
  --line-height-body-2: 20px;
  --line-height-body-3: 18px;
  --line-height-body-4: 20px;
  --line-height-caption: 14px;

  /* Typography - letter spacing
    Figma % spacing converted to em.
    -1% = -0.01em, -2% = -0.02em, -3% = -0.03em, -4% = -0.04em
  */
  --letter-spacing-display-1: -0.02em;
  --letter-spacing-title-1: -0.03em;
  --letter-spacing-title-2: -0.02em;
  --letter-spacing-heading-1: -0.01em;
  --letter-spacing-heading-2: -0.01em;
  --letter-spacing-button: -0.02em;
  --letter-spacing-body-1: -0.01em;
  --letter-spacing-body-2: -0.02em;
  --letter-spacing-body-3: -0.01em;
  --letter-spacing-body-4: -0.04em;
  --letter-spacing-caption: -0.01em;
}

/* Typography utility classes */
.typo-display-1 {
  font-family: var(--font-kr);
  font-size: var(--fs-display-1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-display-1);
  letter-spacing: var(--letter-spacing-display-1);
}

.typo-title-1 {
  font-family: var(--font-kr);
  font-size: var(--fs-title-1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-title-1);
  letter-spacing: var(--letter-spacing-title-1);
}

.typo-title-2 {
  font-family: var(--font-kr);
  font-size: var(--fs-title-2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-title-2);
  letter-spacing: var(--letter-spacing-title-2);
}

.typo-heading-1 {
  font-family: var(--font-kr);
  font-size: var(--fs-heading-1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading-1);
  letter-spacing: var(--letter-spacing-heading-1);
}

.typo-heading-2 {
  font-family: var(--font-kr);
  font-size: var(--fs-heading-2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading-2);
  letter-spacing: var(--letter-spacing-heading-2);
}

.typo-button {
  font-family: var(--font-kr);
  font-size: var(--fs-button);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-button);
}

.typo-body-1 {
  font-family: var(--font-kr);
  font-size: var(--fs-body-1);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body-1);
  letter-spacing: var(--letter-spacing-body-1);
}

.typo-body-2 {
  font-family: var(--font-kr);
  font-size: var(--fs-body-2);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body-2);
  letter-spacing: var(--letter-spacing-body-2);
}

.typo-body-3 {
  font-family: var(--font-kr);
  font-size: var(--fs-body-3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body-3);
  letter-spacing: var(--letter-spacing-body-3);
}

.typo-body-4 {
  font-family: var(--font-kr);
  font-size: var(--fs-body-4);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-4);
  letter-spacing: var(--letter-spacing-body-4);
}

.typo-caption {
  font-family: var(--font-kr);
  font-size: var(--fs-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
}