/* =============================================================================
   tokens.css — 디자인 토큰 단일 출처 (모던 스포츠 에디토리얼 시스템)
   역할: 색·타이포 스케일·간격·전환 등 모든 시각 상수를 여기서만 정의한다.
   의존: base.css / components.css / pages/*.css 전부가 이 변수를 참조.
   주의: 다른 CSS 파일에 색상 hex나 px 간격을 직접 쓰면 안 된다.
         색을 바꿀 때는 이 파일의 기본 색만 수정하면 사이트 전체에 반영된다.
         변수명(--paper/--wine/--gold)은 초기 시안의 이름을 유지한다 — 값만 교체해
         전 파일 수정 없이 무드를 전환하기 위한 의도적 선택 (역할: 배경/주포인트/보조).
   ========================================================================== */

:root {
  /* ---- 기본 색 6개 — 모든 색은 여기서만 파생 ------------------------------
     웜 화이트 + 딥 틸 + 코럴: 참고 시안과 구별되는 독자 브랜드 무드.
     틸 = 경기의 격조·신뢰, 코럴 = 무대의 열기 — 두 색의 온도 대비가 아이덴티티다 */
  --paper:      #FDFCFA;  /* 기본 배경 (웜 화이트) */
  --paper-warm: #F2F0EA;  /* 섹션 구분용 웜 샌드 */
  --ink:        #182B31;  /* 본문 잉크(딥 페트롤 차콜) — 순수 #000 금지 */
  --ink-soft:   #5C6F76;  /* 보조 텍스트 */
  --wine:       #0F6E68;  /* 주 포인트 (딥 틸) */
  --gold:       #E85D3D;  /* 보조 포인트 (코럴) — 배지·숫자·열기 디테일 */

  /* ---- 파생 색 (rgba 조합만 허용) ---------------------------------------- */
  --wine-deep:    #0A4F4A;                     /* 호버·오버레이 하단 색 */
  --line:         rgba(24, 43, 49, 0.10);      /* 구분선 */
  --line-strong:  rgba(24, 43, 49, 0.22);      /* 입력 테두리 */
  --shadow-card:  0 8px 32px rgba(24, 43, 49, 0.08);
  --overlay-dim:  rgba(24, 43, 49, 0.64);      /* 라이트박스·모달 배경 */

  /* ---- 사진 오버레이 — 딥 페트롤 워시로 사진 톤 통일 ----------------------- */
  --duotone: linear-gradient(180deg, rgba(24, 43, 49, 0) 40%, rgba(24, 43, 49, 0.78) 100%);
  /* 틸 헤어라인 — 섹션 라벨 아래 좌측 기점 그라데이션 디테일 */
  --hairline-gold: linear-gradient(90deg, var(--wine), rgba(15, 110, 104, 0));
  /* 섹션 배경 워시 — paper→paper-warm 옅은 수직 그라데이션 */
  --wash: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);

  /* ---- 타이포 스케일 — 1.25 비율 7단계 (기준 16.5px) ----------------------
     헤드라인도 Pretendard 헤비웨이트 — 세리프 없는 단일 패밀리가 젊은 인상의 핵심 */
  --font-serif: 'Pretendard Variable', Pretendard, -apple-system, sans-serif; /* 헤드라인 800·900 */
  --font-sans:  'Pretendard Variable', Pretendard, -apple-system, sans-serif; /* 본문·UI */
  --font-accent: 'Space Grotesk', sans-serif;              /* 영문 포인트 (대문자·소량) */
  --fs-1: 0.8rem;      /* 13.2px — 캡션·메타 */
  --fs-2: 1rem;        /* 16.5px — 본문 기준 */
  --fs-3: 1.25rem;     /* 20.6px — 리드문·카드 제목 */
  --fs-4: 1.563rem;    /* 25.8px — 소제목 */
  --fs-5: 1.953rem;    /* 32.2px — 섹션 제목(모바일) */
  --fs-6: 2.441rem;    /* 40.3px — 섹션 제목 */
  --fs-7: 3.052rem;    /* 50.3px — 히어로 헤드라인 */
  --lh-body: 1.75;     /* 본문 행간 — 30·40·50대 가독 기준 */
  --lh-tight: 1.2;     /* 헤드라인 행간 — 헤비웨이트에 맞춰 타이트하게 */
  --tracking-tight: -0.025em; /* 헤드라인 자간 — 큰 굵은 한글의 필수 보정 */

  /* ---- 라벨 스타일 상수 (오버라인) ---------------------------------------- */
  --label-size: 0.758rem;      /* 12.5px */
  --label-spacing: 0.14em;

  /* ---- 8px 그리드 스페이싱 ------------------------------------------------ */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-9: 72px;   /* 모바일 섹션 상하 패딩 */
  --sp-12: 96px;
  --sp-15: 120px; /* 데스크톱 섹션 상하 패딩 최소값 */

  /* ---- 레이아웃 ---------------------------------------------------------- */
  --container: 1200px;
  --radius: 10px;         /* 카드·입력 공통 라운딩 — 컨템포러리 기준, 버튼만 pill */
  --touch-target: 44px;   /* 터치 영역 최소값 */

  /* ---- 모션 -------------------------------------------------------------- */
  --ease-reveal: cubic-bezier(0.65, 0, 0.35, 1); /* 시그니처 마스크 리빌 전용 */
  --dur-reveal: 0.9s;
  --dur-hover: 0.8s;      /* 이미지 호버 scale — 이보다 빠르면 값싸 보인다 */
  --dur-ui: 0.25s;        /* 버튼·링크 등 일반 UI 전환 */

  font-size: 103.125%;    /* 1rem = 16.5px — 본문 최소 크기 요구를 루트에서 해결 */
}