/* 자동 복사본: design/에서 고치고 node scripts/sync-design.mjs를 실행한다. */
/*
 * mvp-lab 공통 디자인 토큰 (크기, 간격, 글꼴). 원본은 design/tokens.css 한 곳이다.
 * 앱에는 scripts/sync-design.mjs가 복사한다. 앱 안의 복사본을 직접 고치지 않는다.
 * 색은 여기 두지 않는다. 각 앱의 theme.css가 아래 '색 역할'을 밝은 화면과 어두운 화면 두 벌로 채운다.
 *   필수 색 역할: --bg --surface --ink --ink-soft --rule --control-bg
 *                --primary-bg --on-primary --accent --on-accent --accent-soft
 *                --danger --danger-soft --focus --shadow
 * 첫잔(GlazedBream/cheotjan) 토큰을 바탕으로 했다.
 */
:root {
  /* 글꼴: Pretendard (SIL OFL 1.1). 한글, 영문, 베트남어 성조 글자까지 담는다.
     lang="ja"인 곳은 Pretendard JP(base.css). Pretendard에 없는 문자(태국어, 간체 중국어 등)는
     --font-intl의 기기 글꼴로 넘긴다. 순서를 정해 두지 않으면 기기가 아무 글꼴이나 고른다. */
  --font-intl: "Noto Sans Thai", Thonburi, "Leelawadee UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei";
  --font-body: "Pretendard Variable", Pretendard, "Pretendard JP Variable", -apple-system, "Apple SD Gothic Neo",
    "Hiragino Sans", var(--font-intl), system-ui, sans-serif;
  --font-body-ja: "Pretendard JP Variable", "Pretendard Variable", Pretendard, -apple-system, "Hiragino Sans",
    var(--font-intl), system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* 글자 크기: 2xs는 좁은 칸 안 배지와 숫자에만 */
  --fs-2xs: 11px;
  --fs-xs: 13px; /* 보조 정보, 칩, 날짜 */
  --fs-sm: 14px; /* 안내문, 작은 버튼 */
  --fs-md: 16px; /* 본문, 버튼 */
  --fs-lg: 18px; /* 카드 이름, 작은 제목 */
  --fs-xl: 21px; /* 섹션 제목 */
  --fs-2xl: 30px; /* 큰 제목 */

  /* 굵기: 네 단계만(600은 쓰지 않는다) */
  --fw-regular: 400; /* 본문 */
  --fw-medium: 500; /* 강조 */
  --fw-bold: 700; /* 버튼, 이름 */
  --fw-heavy: 800; /* 제목 */

  /* 줄 간격(일본어 화면은 아래에서 본문만 넓힌다) */
  --lh-tight: 1.2; /* 제목 */
  --lh-body: 1.55; /* 본문 */
  --lh-loose: 1.6; /* 긴 안내문 */

  /* 간격: 4의 배수 단계만 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px; /* 카드 안 줄 사이 */
  --sp-4: 16px; /* 카드 안쪽, 화면 양옆 */
  --sp-6: 24px;
  --sp-8: 32px; /* 섹션 사이 */
  --sp-12: 48px;
  --sp-16: 64px; /* 화면 위아래 큰 여백 */

  /* 모서리 */
  --r-control: 8px; /* 버튼, 입력칸, 탭 */
  --r-card: 12px; /* 카드, 시트, 배너 */
  --r-pill: 999px; /* 칩, 배지 */

  /* 버튼과 입력칸 높이 */
  --h-lg: 52px; /* 큰 주 버튼(한 화면에 하나) */
  --h-md: 44px; /* 기본 */
  --h-sm: 36px; /* 관리, 작은 버튼 */

  /* 선과 그림자: 평평하게, 떠 있는 것만 그림자 */
  --line: 1px;
  --line-strong: 1.5px;
  --shadow-float: 0 6px 18px var(--shadow);

  /* 화면 틀 */
  --page-max: 640px; /* 본문 최대 너비 */
  --gutter: var(--sp-4); /* 화면 양옆 */
}

/* 언어별 조판: 글자 크기 단계는 모든 언어가 같고, 일본어 본문만 줄 간격을 넓힌다.
   한자와 가나가 빽빽해 1.55에서는 줄이 붙어 보인다. 제목(--lh-tight)은 그대로. */
:root:lang(ja) {
  --lh-body: 1.7;
  --lh-loose: 1.8;
}