/* ============================================================
   디자인 토큰
   - 색상 + 타이포(크기/라인하잇/레터스페이싱/웨잇) 공통 변수
   - 단위 : rem (모바일 ≤767px 기준 1rem = 10px)
   - letter-spacing : (font-size × percent) 를 rem 으로 환산한 절대값
   ============================================================ */

:root {
    /* =========================================================
       Color — Brand
       ========================================================= */
    --color-primary:   #00AEFF;
    --color-secondary: #014D70;
    --color-success:   #0066FF;
    --color-error:     #FF4242;

    /* Background */
    --bg-light-1:     #E5F6FE;
    --bg-light-2:     #C4EBFE;
    --bg-gradient-1:  linear-gradient(90deg, #4DC7FF 0%, #9B76FF 100%);
    --bg:             #F2F3F5;

    /* Line */
    --line1:          #EFF2F4;
    --line2:          #EEEFF0;

    /* =========================================================
       Color — Gray
       ========================================================= */
    --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;

    /* =========================================================
       Font family / weight
       ========================================================= */
    --font-family-base: 'Pretendard', 'NanumSquareNeo', sans-serif;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* =========================================================
       Typography tokens
       각 토큰 : size / line / spacing / weight
       ========================================================= */

    /* Display 1 — Bold 38 / 40 / -2% */
    --font-display-1-size:    3.8rem;
    --font-display-1-line:    4rem;
    --font-display-1-spacing: -0.076rem;
    --font-display-1-weight:  var(--fw-bold);

    /* Display 2 — Bold 34 / 40 / -2% */
    --font-display-2-size:    3.4rem;
    --font-display-2-line:    4rem;
    --font-display-2-spacing: -0.068rem;
    --font-display-2-weight:  var(--fw-bold);

    /* Title 1 — SemiBold 26 / 32 / -2% */
    --font-title-1-size:    2.6rem;
    --font-title-1-line:    3.2rem;
    --font-title-1-spacing: -0.052rem;
    --font-title-1-weight:  var(--fw-semibold);

    /* Title 2 — SemiBold 22 / 30 / -2% */
    --font-title-2-size:    2.2rem;
    --font-title-2-line:    3rem;
    --font-title-2-spacing: -0.044rem;
    --font-title-2-weight:  var(--fw-semibold);

    /* Heading 1 — SemiBold 16 / 24 / -1% */
    --font-heading-1-size:    1.6rem;
    --font-heading-1-line:    2.4rem;
    --font-heading-1-spacing: -0.016rem;
    --font-heading-1-weight:  var(--fw-semibold);

    /* Heading 2 — SemiBold 15 / 23 / -1% */
    --font-heading-2-size:    1.5rem;
    --font-heading-2-line:    2.3rem;
    --font-heading-2-spacing: -0.015rem;
    --font-heading-2-weight:  var(--fw-semibold);

    /* Button — Bold 18 / 24 / -2% */
    --font-button-size:    1.8rem;
    --font-button-line:    2.4rem;
    --font-button-spacing: -0.036rem;
    --font-button-weight:  var(--fw-bold);

    /* Body 1 — Medium 16 / 24 / -1% */
    --font-body-1-size:    1.6rem;
    --font-body-1-line:    2.4rem;
    --font-body-1-spacing: -0.016rem;
    --font-body-1-weight:  var(--fw-medium);

    /* Body 2 — Regular 14 / 22 / -2% */
    --font-body-2-size:    1.4rem;
    --font-body-2-line:    2.2rem;
    --font-body-2-spacing: -0.028rem;
    --font-body-2-weight:  var(--fw-regular);

    /* Caption — Regular 12 / 18 / -4% */
    --font-caption-size:    1.2rem;
    --font-caption-line:    1.8rem;
    --font-caption-spacing: -0.048rem;
    --font-caption-weight:  var(--fw-regular);
}