/* 포지 디자인 토큰 — 색·글꼴·간격의 단일 소스 (2026-09-20 표준화)
   모든 CSS 는 여기 변수만 쓴다. 새 색은 여기 먼저 넣고 docs/DESIGN.md 에 역할을 적는다.
   근거: 지역 랜딩(source.html) · 블로그 2종 · 계산기 · 채팅형 계산기에서 실제 쓰인 색을 모아 정리했다.
   로드 순서: tokens.css → site.css → header.css → footer.css → 페이지별. */

:root {
  /* ---- 브랜드 파랑 (주색) ---- */
  --pz-blue:       #2878c8;   /* 주색. 8월 리뉴얼 때 사용자가 고른 파랑(라이브 계산기 섹션 버튼·제목). 링크·아이콘·로고 심볼 */
  --pz-blue-deep:  #2f5d8c;   /* 옛 진파랑. 어두운 파란 면(띠·섹션 배경), 큰 제목의 진한 강조 */
  --pz-blue-mid:   #3971ad;   /* 옛 파랑. 히어로 그라데이션 등 넓은 면. 주색 버튼·링크와 맞닿는 작은 요소엔 쓰지 않는다 */
  --pz-blue-hover: #1f63ad;   /* 주색 버튼 hover */
  --pz-blue-dark:  #1e3d5c;   /* 파랑 계열 최암부. 어두운 파랑 섹션 배경 */
  --pz-sky:        #7fb5df;   /* 파랑 위 보조 글자·아이콘 (밝은 파랑) */
  --pz-blue-soft:  #edf4fa;   /* 연한 파랑 배경 (카드·강조 박스) */

  /* ---- 강조 (CTA 전용) ---- */
  --pz-lemon:      #D8F03A;   /* 주 CTA 버튼·강조 라벨. 페이지당 CTA 에만. 본문 장식에 쓰지 않는다 */
  --pz-lemon-hover:#c8e030;

  /* ---- 중립 ---- */
  --pz-ink:        #17212b;   /* 제목·본문 강조·흰 바 헤더 글자 */
  --pz-charcoal:   #28303c;   /* 어두운 섹션 배경(계산기 섹션), 히어로 오버레이 베이스 */
  --pz-footer:     #1a1c20;   /* 푸터 배경 (기존 The7 값) */
  --pz-body:       #4f5e6d;   /* 본문 글자 */
  --pz-muted:      #85868c;   /* 푸터 본문, 보조 설명 */
  --pz-line:       #dce5ed;   /* 구분선·테두리 */
  --pz-ivory:      #f6f7f4;   /* 옅은 배경 (섹션 교차) */
  --pz-white:      #ffffff;

  /* ---- 상태 ---- */
  --pz-danger:     #ff5252;   /* 폼 오류 */
  --pz-naver:      #03c75a;   /* 네이버 블로그 버튼만 */

  /* ---- 글꼴 ---- */
  --pz-font:       Pretendard, "Noto Sans KR", -apple-system, system-ui, sans-serif;
  --pz-font-logo:  'Godo', Pretendard, sans-serif;

  /* ---- 치수 ---- */
  --pz-content:    1200px;    /* 섹션 본문. 헤더·푸터는 1240 (가장자리 정렬용) */
  --pz-gutter:     40px;
  --pz-gutter-m:   20px;
  --pz-radius:     10px;      /* 버튼·카드. 알약(999px) 금지 */
  --pz-header-h:   72px;
  --pz-header-h-m: 56px;
}