/* ═══════════════════════════════════════════════════
   petbrandz AdOps — 디자인 시스템 토큰 v1
   페이지는 이 토큰만 참조한다. 색·서체·간격을 바꿀 땐 여기만 수정.
   ═══════════════════════════════════════════════════ */
:root{
  /* 잉크(글자) — 순검정 대신 살짝 눌린 잉크색 */
  --ink:      #131418;
  --ink-2:    #5a5e66;
  --ink-3:    #9b9fa8;
  --ink-ghost:#e3e3de;   /* 배경용 초대형 숫자 */

  /* 종이(배경) — 순백 대신 따뜻한 종이색 */
  --paper:    #fafaf7;
  --paper-2:  #f1f1ec;
  --line:     #e4e4de;   /* 헤어라인 */
  --line-strong:#131418; /* 표·섹션의 강한 괘선 */

  /* 포인트 — petbrandz 블루 계열, 넓은 면이 아니라 점·선·강조에만 */
  --accent:   #2257e0;
  --accent-2: #1a44b8;
  --accent-bg:#f2f5fe;

  /* 다크(반전) 섹션 */
  --dark:     #101114;
  --dark-2:   #1a1b20;
  --dark-line:#2a2b31;
  --inv:      #f5f5f2;
  --inv-2:    #a7abb5;

  /* 서체 */
  --font: "Pretendard Variable", Pretendard, -apple-system, "Noto Sans KR", sans-serif;

  /* 타입 스케일 — 대비를 크게 */
  --fs-xs:   13px;
  --fs-sm:   14.5px;
  --fs-base: 17px;
  --fs-lg:   20px;
  --fs-xl:   26px;
  --fs-2xl:  clamp(30px, 4.2vw, 44px);   /* 섹션 제목 */
  --fs-hero: clamp(42px, 7.2vw, 86px);   /* 히어로 */

  /* 간격 스케일(8pt) */
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:144px;

  /* 모서리 — 둥근 카드 대신 절제된 라운드 */
  --r:10px; --r-sm:6px;

  --max:1120px;

  /* 데이터 시각화 팔레트 — 색각이상·대비 검증 통과, 이 순서 고정(섞거나 순환 금지)
     주황·노랑 계열 사용 금지. 단일 라인 차트는 --viz-line(잉크). */
  --viz-1:#2257e0;   /* 블루 (브랜드 액센트와 동일) */
  --viz-2:#12a594;   /* 틸 */
  --viz-3:#8b5cf6;   /* 바이올렛 */
  --viz-4:#d6679f;   /* 로즈 */
  --viz-etc:#cbd3e1; /* '기타' 전용 중립색 */
  --viz-line:#131418;
  --viz-grid:#ecebe5;
  --viz-axis:#9b9fa8;

  /* 상태색 — 증감·판정 전용, 시각화 계열로 재사용 금지 */
  --ok:#177a41;   --ok-bg:#eaf6ee;
  --bad:#b42332;  --bad-bg:#fdf0f1;
  --warn:#946200; --warn-bg:#fdf6e6;
}