/* ==========================================================================
   Travel Log v2 — design tokens
   스타일: taste-skill "achromatic-ledger" (크롬은 무채색, 색은 데이터에만)
   얼굴(face): 웜크림 종이 바탕 + 한 가지 색(기본 세이지 그린)이 '칠한 지도'에만 쓰인다.
   모든 컴포넌트는 이 파일의 변수만 참조한다. 색·크기를 바꿀 땐 여기만 고친다.
   ========================================================================== */

:root {
  /* ---- 바탕 · 표면 (라이트: 미색 종이) ---- */
  --paper: #F9F8F6;          /* 앱 바탕 (브리프 지정) */
  --surface: #FFFFFF;        /* 카드 · 시트 */
  --raised: #F3F1EC;         /* 한 단계 들어간 면: 세그먼트 트랙, 썸네일 바탕 */
  --active: #ECE9E3;         /* 선택된 행 · 눌림 */

  /* ---- 선 (3단계) ---- */
  --border: #E6E2DA;         /* 카드 테두리 */
  --rule: #EFECE6;           /* 행 구분선 */
  --control: #CFCAC0;        /* 입력칸 테두리 */

  /* ---- 글자 (3단계, 모두 바탕 대비 4.5:1 이상) ---- */
  --ink: #22241F;
  --muted: #5E615A;
  --faint: #6A6D66;

  /* ---- 주 버튼: 근흑색 (브랜드 색을 버튼에 쓰지 않는다) ---- */
  --primary: #22241F;
  --on-primary: #F9F8F6;
  --negative: #A8322B;

  /* ---- 지도 ---- */
  --land: #EEEBE5;           /* 안 가본 땅 */
  --land-line: #BDB8AD;      /* 0.5px 윤곽선 */
  --border-line: #A39E93;    /* 해외 지도의 국경선 */
  --map-focus: #22241F;      /* 선택한 지역 테두리 */

  /* ---- 칠하는 색(테마): 화면의 유일한 색. 데이터(칠한 지역, 올해 막대)에만 ----
     기본은 세이지 그린. 설정의 테마 선택이 html 요소에 --accent-rgb 를 덮어쓴다 (js/lib/theme.js) */
  --accent-rgb: 86 118 92;     /* #56765C 세이지 */
  --accent: rgb(var(--accent-rgb));
  --grid: #E6E2DA;           /* 차트 눈금선 */
  --bar-past: #C8C3B8;       /* 비교 대상(지난 해) 막대 */

  /* 방문 횟수 10단계 알파 라이브러리 (1회 → 10회 이상) */
  --visit-1: rgb(var(--accent-rgb) / 0.22);
  --visit-2: rgb(var(--accent-rgb) / 0.30);
  --visit-3: rgb(var(--accent-rgb) / 0.38);
  --visit-4: rgb(var(--accent-rgb) / 0.46);
  --visit-5: rgb(var(--accent-rgb) / 0.54);
  --visit-6: rgb(var(--accent-rgb) / 0.62);
  --visit-7: rgb(var(--accent-rgb) / 0.70);
  --visit-8: rgb(var(--accent-rgb) / 0.79);
  --visit-9: rgb(var(--accent-rgb) / 0.89);
  --visit-10: rgb(var(--accent-rgb) / 1);

  /* ---- 타이포그래피: 한글 Pretendard, 숫자 Newsreader ---- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-num: "Newsreader", "Newsreader Variable", Georgia, "Times New Roman", serif;

  --fs-title: 24px;          /* 화면 제목 h1 */
  --fs-section: 16px;        /* 카드 제목 */
  --fs-kpi: 30px;            /* 핵심 숫자 */
  --fs-body: 14px;
  --fs-small: 12px;
  --lh-body: 1.5;

  /* ---- 모양 · 간격 (tight 반경 쌍: 8 / 6) ---- */
  --r-card: 8px;
  --r-control: 6px;
  --r-sheet: 16px;
  --r-pill: 999px;
  --gap: 16px;
  --pad: 20px;
  --margin: 16px;
  --control-h: 40px;
  --nav-h: 64px;

  /* ---- 움직임: 사용자의 동작에 답하는 것만 ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 280ms;

  /* 떠 있는 것(시트, 토스트)만 그림자를 갖는다 */
  --shadow-float: 0 -8px 28px rgb(34 36 31 / 0.10);
  --shadow-toast: 0 6px 20px rgb(34 36 31 / 0.18);

  color-scheme: light;
}