/* ==========================================================================
   01-tokens.css — 디자인 토큰 (Global Design Tokens)
   --------------------------------------------------------------------------
   toss.tech 레이아웃/컬러/타이포 측정값을 기반으로 한 전역 토큰.
   모든 컴포넌트 CSS는 이 변수만 참조하므로, 여기값만 바꿔도 사이트 전체가 변경됨.

   ▶ WordPress 이관 시 (docs/wordpress-mapping.md 참고)
     - --color-*         → GeneratePress [외모 > 사용자 정의 > 색상] 글로벌 컬러
     - --font-* / --fs-* → GeneratePress 타이포그래피 설정
     - --space-*         → GenerateBlocks 간격(Spacing) 프리셋
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. 컬러 (Colors)
     ------------------------------------------------------------------ */
  /* 브랜드 */
  --color-primary:            #3182f6;   /* 토스 블루 — 링크/버튼/포인트 */
  --color-primary-hover:      #2272eb;   /* 버튼 hover */
  --color-primary-active:     #1b64da;   /* 버튼 active */
  --color-primary-bg:         #e8f3ff;   /* 블루 배경 (활성 탭/배지) */
  --color-primary-bg-hover:   #90c2ff;

  /* 텍스트 (TDS grey 스케일) */
  --text-heading:             #191f28;   /* grey900 — 대제목 */
  --text-strong:              #333d4b;   /* grey800 — 본문 강조/제목 */
  --text-body:                #4e5968;   /* grey700 — 본문 보조 */
  --text-secondary:           #6b7684;   /* grey600 — 설명문 */
  --text-tertiary:            #8b95a1;   /* grey500 — 메타/날짜 */
  --text-disabled:            #b0b8c1;   /* grey400 — 비활성 */

  /* 배경 */
  --bg-default:               #ffffff;
  --bg-subtle:                #f9fafb;   /* grey50 — 뉴스레터/댓글/푸터 */
  --bg-muted:                 #f2f4f6;   /* grey100 — 카드/사이드바/버튼 */

  /* 보더 */
  --border-light:             #e5e8eb;   /* grey200 */
  --border-medium:            #d1d6db;   /* grey300 */

  /* 상태/강조 */
  --color-danger:             #f04452;
  --color-danger-text:        #e42939;
  --color-header-text:        rgba(3, 18, 40, 0.7);       /* GNB 기본 글자 */
  --color-header-hover-bg:    rgba(0, 23, 51, 0.02);
  --color-header-muted-bg:    rgba(2, 32, 71, 0.05);      /* 채용 바로가기 배경 */
  --shadow-card-hover: 0 16px 22.4px 4.8px rgba(0, 0, 33, 0.07),
                       0 3.2px 16px 0 rgba(0, 0, 33, 0.05),
                       0 0 1px 0 rgba(0, 0, 33, 0.07);
  --shadow-popup: 0 2px 30px 0 rgba(0, 27, 55, 0.1);

  /* ------------------------------------------------------------------
     2. 타이포그래피 (Typography)
     ------------------------------------------------------------------ */
  --font-family: 'Pretendard Variable', Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, 'Apple SD Gothic Neo',
    'Noto Sans KR', 'Malgun Gothic', 'Helvetica Neue', Arial, sans-serif;

  /* 타입 스케일 (원본 측정값, PC / 모바일은 05-pages 미디어쿼리에서 축소) */
  --fs-hero-title:   36px;    /* 히어로 제목, line-height 135% */
  --fs-page-title:   48px;    /* 아티클 상단 제목, line-height 125% */
  --fs-archive-title:36px;    /* 카테고리 페이지 제목, line-height 135% */
  --fs-section-title:32px;    /* 섹션 제목(전체 아티클/시리즈), line-height 140% */
  --fs-card-title:   20px;    /* 목록 카드 제목, line-height 145% */
  --fs-body-lg:      17px;    /* 본문(상세페이지)/설명, line-height 160% */
  --fs-body:         16px;    /* 기본 본문 */
  --fs-meta:         15px;    /* GNB/메타/작성자 */
  --fs-meta-sm:      14px;    /* 날짜/댓글 */
  --fs-caption:      13px;    /* 배지/약관 */
  --fs-micro:        12px;    /* 최소 텍스트 */

  --lh-tight: 1.25;
  --lh-snug:  1.35;
  --lh-normal:1.45;
  --lh-loose: 1.6;

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

  /* ------------------------------------------------------------------
     3. 레이아웃 (Layout)
     ------------------------------------------------------------------ */
  --header-height: 60px;

  --container-main:   1024px;  /* 헤더/본문 목록/히어로 공통 컨테이너 */
  --container-article:740px;   /* 아티클 상세 본문 컬럼 (내부 700px) */
  --container-footer: 1064px;  /* 푸터 컨테이너 */
  --sidebar-width:    300px;   /* 우측 사이드바 폭 */

  --gutter-page: 60px;         /* 페이지 좌우 패딩 (태블릿 40 / 모바일 24) */
  --gutter-section: 76px;      /* 섹션 간 세로 간격 */

  /* ------------------------------------------------------------------
     4. 모서리/간격/모션 (Radius · Spacing · Motion)
     ------------------------------------------------------------------ */
  --radius-xs:   6px;
  --radius-sm:   8px;          /* 버튼/배지 */
  --radius-md:   12px;         /* 썸네일 */
  --radius-lg:   16px;         /* 히어로 이미지 */
  --radius-xl:   20px;         /* 뉴스레터/댓글 박스 */
  --radius-2xl:  24px;         /* 시리즈/사이드바 카드 */
  --radius-full: 999px;        /* 필/원형 */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  54px;            /* 목록 아이템 간격(태블릿 32) */
  --space-9:  64px;            /* 아이템 텍스트-썸네일 간격 */
  --space-10: 76px;

  --ease-out: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.2s ease;
  --transition-media: 0.3s ease;

  /* 반응형 브레이크포인트 (미디어쿼리에서 사용) */
  --bp-tablet: 1024px;
  --bp-mobile: 768px;
}