/*
 * Docpane 디자인 토큰 — 단일 기준. 앱(app.docpane.com)과 소개 사이트(docpane.com)가 함께 쓴다.
 *
 * 원본은 이 파일(packages/assets/tokens.css)이다. `npm run assets:build`가 내용 해시를 붙인 이름(tokens.<해시>.css)으로
 * packages/assets/out에 내고, 양쪽은 assetUrl('tokens.css')로 가리킨다(packages/assets/README.md).
 * 각자의 CSS(앱의 globals.css · chrome.css, 소개 사이트의 landing.css)는 여기 값을 '참조만' 한다. 값을 바꿀 일이 생기면 이 파일만 고친다.
 *
 * 타이포 근거: docs/design/typography.md
 */

:root {
  /* ── 글꼴 ─────────────────────────────────────────────
     Pretendard — 한글은 Source Han Sans 계열, 라틴은 Inter 기반.
     기술 문서에는 ledger_account_code 같은 식별자가 본문에 섞여 있어
     라틴 판독성이 중요하다. 자체 호스팅(assets의 fonts/pretendard.css), 남의 CDN 미사용. */
  --docpane-font-family: 'Pretendard Variable', Pretendard, -apple-system,
    BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --docpane-font-system: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Malgun Gothic', sans-serif;
  --docpane-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ── 본문 타이포 ───────────────────────────────────── */

  /* 16px — 브라우저 기본값. 폭을 em으로 잡았기 때문에 크기를 바꿔도
     한 줄 글자 수가 유지된다(글자와 폭이 함께 비례한다). */
  --docpane-font-size-base: 16px;

  /* 1.7 — WCAG 1.4.12 최소 1.5. 한글은 라틴보다 넓게 필요하다. */
  --docpane-line-height: 1.7;

  /*
   * 본문 최대 폭. 기본은 `none` — 상자가 칼럼 폭을 다 쓴다 (GitHub 파일 뷰).
   * 좁혀 읽고 싶은 사람을 위해 읽기 설정에 단계를 남겨 뒀다.
   * em이라서 글자 크기를 바꿔도 한 줄 글자 수가 유지된다.
   */
  --docpane-measure: none;

  /* 0 — 한 문단에 한글과 라틴이 섞여 있어 스크립트별로 나눌 수 없다.
     왜곡 없는 0을 기본으로 두고 사용자가 조절한다. */
  --docpane-letter-spacing: 0em;

  --docpane-para-gap: 0.85em;

  /* 제목 위계 — 단계마다 최소 1.25배 차이를 둔다.
     이전에 h2(1.3)와 h3(1.08)이 20%밖에 안 벌어져 위계가 읽히지 않았다. */
  --docpane-h1-size: 1.9em;
  --docpane-h1-weight: 700;
  --docpane-h2-size: 1.45em;
  --docpane-h2-weight: 700;
  --docpane-h3-size: 1.13em;
  --docpane-h3-weight: 600;

  /* ── 레이아웃 ───────────────────────────────────────── */
  /*
   * Files 사이드바. 넓은 화면에서 오른쪽 경계선을 끌어 바꾼다 — 고른 폭은 <html>의 --panel-pref(px)이고, 앱의 layout.tsx가
   * 첫 화면 전에 얹는다. 범위 16 ~ 32rem, 본문 칸은 56rem 밑으로 줄지 않는다(1280px 화면이면 24rem까지). 창을 줄이면
   * 여기서 저절로 좁아지고 고른 값은 그대로다. ⚠️ 앱의 apps/web/src/components/shell/panelWidth.ts와 같은 수여야 한다 (TASK-34)
   */
  --panel-w: clamp(16rem, var(--panel-pref, 18rem), min(32rem, 100vw - 56rem));
  --drawer-w: 24rem;  /* ☰ 서랍의 최대 폭 — 태블릿·PC·집중 모드 */
  --aside-w: 15rem;   /* 우측 목차 상자 */
  --page-pad: 1.25rem;
  /*
   * 손가락 화면의 입력칸 글자 크기 하한 — iOS Safari는 16px보다 작은 입력칸에 초점이 가면 화면을 확대하고, 검색한 뒤에도
   * 그대로 둔다 (2026-09-29 소유자 "폰에서 검색 필드를 선택하면 줌인되고"). 확대 금지(maximum-scale)는 쓰지 않는다 — 핀치 확대까지 막는다
   */
  --touch-input-size: 16px;

  /*
   * 세 줄의 높이. ⚠️ 이 이름을 바꿀 때는 chrome.css를 반드시 grep한다 —
   * 정의가 없는 var()는 에러 없이 **선언 전체가 버려진다**. 예전에
   * --topbar-h를 --mainhead-h로 개명하면서 참조를 놓쳐 상단바가
   * 내용 높이(37px)로 쪼그라들었고, 버튼이 꽉 껴 보였다.
   */
  --topbar-h: 3rem;    /* 전역 메뉴바 */
  --mainhead-h: 3rem;  /* 파일 헤더 첫 줄 — 경로 */
  --doctool-h: 3rem;   /* 상자 머리글 (도구 줄 · 목차 캡션). 둘이 같아야 나란히 보인다 */

  /* 칼럼·상자 사이 간격. 한 값으로 통일한다 — 자리마다 다르면 눈에 띈다 */
  --gap: 1rem;

  /* 소개 페이지(/) — 읽기 화면보다 넓게 잡는다. 읽는 글이 아니라 훑는 면이다 */
  --lp-measure: 72rem;
  --lp-pad: 1.25rem;

  /*
   * 도구 버튼(팝오버 트리거 · 집중) 크기. 자리마다 특이도로 덮어쓰지 않고
   * **변수로 내려보낸다** — 상단바는 `.topbar__tools`에서 이 값만 줄인다.
   * 예전에는 `.topbar__tools .pop__btn`이 600줄 밖의 컴포넌트 기본 규칙을
   * 특이도로 덮어써서, 어느 값이 이기는지 읽을 수 없었다. 실측 결과 상단바
   * 두 버튼이 27.7px / 32.6px로 갈라져 있었고 주석이 밝힌 의도(0.78rem)는
   * 정작 지지 않아야 할 쪽에서 졌다.
   */
  --tool-font-size: 0.8rem;
  --tool-pad-y: 0.32rem;
  --tool-pad-x: 0.7rem;
  /* 높이는 auto가 기본 — 팝오버가 본문 안에 있을 때는 내용이 정한다.
     상단바에서만 한 값으로 묶는다. 안 묶으면 아바타가 든 버튼만 커진다
     (실측: 32.6px vs 25.3px) */
  --tool-h: auto;
  --avatar-size: 1.6rem;

  --docpane-radius: 10px;

  /* ── 의미 색상 ───────────────────────────────────────
     테마마다 아래에서 다시 정의한다.
     ⚠️ chrome.css에 색상 리터럴을 두지 않는다 (agents/rules/css.md). 예전에 #fff·#e0a01a·
        diff의 +/− 색이 chrome.css에 흩어져 있어 세피아에서 대비가 무너졌다. */
  --docpane-color-star: #e0a01a; /* 즐겨찾기 */
  /* 핀에서 열고 들어왔을 때 선택했던 글자를 잠깐 비추는 바탕 — 형광펜(mark-soft)과 같다 */
  --docpane-color-pin-flash: var(--docpane-color-mark-soft);
  --docpane-color-add: #1f7a42;  /* 추가된 줄 */
  --docpane-color-del: #d23b3b;  /* 삭제된 줄 */
  --docpane-color-pending: #d9a514; /* 초대됐지만 아직 안 들어온 계정 */

  /*
   * ── 브랜드 — 라임과 잉크 (로고 그림) ───────────────────
   * 로고 · 파비콘 · 공유 카드의 색이다(packages/assets/brand/mark.ts, mark.test.ts가 맞춰 본다). 화면의 색은 아래 역할 토큰을 쓴다.
   *
   * ── 색의 역할 — **라임은 잉크 옆에만** (2026-09-29 소유자 "흰색에 라임은 보기 불편함" → 시안 A '잉크와 라임') ──
   * 예전에는 라이트의 채움이 라임 #7ab317(흰색과 2.53:1)과 올리브 #4d7c0f 둘이었다. 고른 버튼 · 토글 · 기본 버튼이
   * 모두 초록 덩어리라 화면이 군복색으로 읽혔다. 이제 로고처럼 라임과 잉크를 짝으로만 쓴다 — 흰 바탕에 라임 면이 닿지 않는다.
   *
   *   --docpane-color-point    고른 것 · 기본 버튼의 **채움** (라이트 잉크, 다크 라임, 세피아 먹갈색). 위 글자는 --docpane-on-point
   *   --docpane-color-accent   바탕 위의 **글자** — 링크 · 초점 · 강조 글자 · 올렸을 때의 테두리
   *   --docpane-color-mark     보조(알리는 것)의 **라임 채움** — 토글 켬 · 아이콘 타일. 위 글자는 --docpane-on-mark(잉크)
   *   --docpane-color-mark-bg/-fg  알림 알약(업데이트됨 · owner · 새 문의) — 라이트는 잉크 알약에 라임 글자
   *   --docpane-color-mark-soft    형광펜 — 검색어 · 핀 비춤 · 링크 대기 줄
   */
  --brand: #a3e635;
  --brand-ink: #14200a;
  --docpane-on-mark: #14200a;  /* 라임 위의 잉크 — 테마와 상관없다 (#a3e635와 11.23) */

  /*
   * ── 층 — 위로 뜰수록 밝다 ─────────────────────────────
   *   --docpane-color-canvas   앱 바탕 — 상단 바 · 패널 · 경로 줄 · 넓은 화면의 문서 둘레
   *   --docpane-color-bg       종이 — 문서 상자 · 목차 · 설정 카드 · 입력칸. 좁은 화면의 본문 바탕
   *   --docpane-color-surface  채움 — 칩 · 코드 · 올렸을 때 · 탭 바닥
   *   --docpane-color-layer    떠 있는 창 — 팝오버 · 확인 창 · 표 확대 · 검색 힌트 · 핀 버튼 · 끄는 줄. 테두리 · 그림자와 한 벌
   * 예전에는 창이 모두 --docpane-color-bg라 다크에서 바탕 · 패널 · 문서 상자 · 팝오버가 한 색(#14171a, 1.00:1)이었고,
   * 그림자 22%는 어두운 바탕에서 보이지 않았다. 다크는 밝기가 층을 가르고(창과 종이 1.23:1), 라이트는 창도 종이도 흰색에
   * 가까워(1.03:1) 두 겹 그림자와 진한 테두리가 가른다. 창 안에서는 bg · surface · border를 창의 값으로 다시 가리킨다
   * (chrome.css `.pop__panel` 등) — 아래 둘이 그 값이다. 테마 블록이 fg · layer를 바꾸면 따라 바뀐다(같은 <html>에서 계산).
   */
  /* 넓은 면의 채움 — 코드 블록 · 홈의 폴더 카드. 채움(surface)은 앱 바탕 위의 올렸을 때도 보여야 해서 진하다(종이와 1.15) —
     넓은 면에 그대로 깔면 무겁다. 종이 쪽으로 40% 당겨 예전의 무게(1.08)로 둔다 */
  --docpane-color-subtle: color-mix(in srgb, var(--docpane-color-surface) 60%, var(--docpane-color-bg));
  --docpane-color-layer-surface: color-mix(in srgb, var(--docpane-color-fg) 7%, var(--docpane-color-layer));
  --docpane-color-layer-line: color-mix(in srgb, var(--docpane-color-fg) 14%, var(--docpane-color-layer));
  /* 파괴적 동작(삭제 등)의 글자색. --docpane-color-del과 나눠 둔다 —
     del은 diff 행 배경 위 기준이고, 이쪽은 surface 위 기준이라 값이 다르다 */
  --docpane-color-danger: #c62828;
}

/* ── 읽기 모드 ───────────────────────────────────────────
 * 값의 근거: 시안 A '잉크와 라임' (2026-09-29). 중성색은 라임 쪽(녹색)으로 아주 조금 기울였다 — 순회색은 무심해 보인다.
 * 대비는 모두 실측: 글자는 종이 위, 흐린 글자는 가장 어두운 바탕(채움) 위 기준.
 */
:root,
[data-theme='light'] {
  color-scheme: light;
  --docpane-color-canvas: #f2f3ee;   /* 종이와 1.09 */
  --docpane-color-bg: #fcfcfa;       /* 순백을 살짝 누른 종이 */
  --docpane-color-surface: #ebede6;  /* 앱 바탕과 1.06 · 종이와 1.15 */
  --docpane-color-layer: #ffffff;
  --docpane-color-fg: #181b15;       /* 종이 위 16.95 */
  --docpane-color-muted: #5b6255;    /* 종이 6.15 · 채움 5.30 */
  --docpane-color-border: #dcdfd5;
  /* 인라인 코드는 작은 면이므로 넓은 코드 블록(subtle)보다 선명하게 구분한다 (TASK-81). */
  --docpane-color-code-bg: #e2e8d9;
  --docpane-color-code-fg: #243219;
  --docpane-color-code-border: #9aa88c;
  --docpane-color-diagram-bg: #eef1e8;
  --docpane-color-diagram-border: #68775a;
  --docpane-color-layer-border: #c6cabd;  /* 창과 1.67 */
  --docpane-shadow-layer: 0 1px 2px rgb(24 27 21 / 0.08), 0 12px 32px rgb(24 27 21 / 0.16);
  --docpane-color-scrim: rgb(20 24 16 / 0.38);
  --docpane-color-point: #1f2a16;    /* 잉크 — 위의 흰 글자 14.99 */
  --docpane-on-point: #ffffff;
  --docpane-color-accent: #2f5a10;   /* 종이 7.89 · 채움 6.80 */
  --docpane-color-mark: #a3e635;
  --docpane-color-mark-bg: #1f2a16;
  --docpane-color-mark-fg: #c5f06a;  /* 잉크 알약 위 11.45 */
  --docpane-color-mark-soft: rgb(163 230 53 / 0.4);
  /* 알림 상자 > [!NOTE] … (TASK-38) — GitHub의 다섯 색. 흰 배경에서 모두 4.5:1 이상 */
  --docpane-color-alert-note: #0969da;
  --docpane-color-alert-tip: #1a7f37;
  --docpane-color-alert-important: #8250df;
  --docpane-color-alert-warning: #9a6700;
  --docpane-color-alert-caution: #d1242f;
}

[data-theme='dark'] {
  color-scheme: dark;
  --docpane-color-canvas: #0f110f;
  --docpane-color-bg: #161916;
  --docpane-color-surface: #1f231e;
  --docpane-color-layer: #262b25;    /* 종이와 1.23 */
  --docpane-color-fg: #e6e9e2;       /* 종이 14.45 · 창 11.77 */
  --docpane-color-muted: #a0a898;    /* 종이 7.22 · 창 5.88 */
  --docpane-color-border: #2f352c;
  --docpane-color-code-bg: #41493a;
  --docpane-color-code-fg: #f1f5ed;
  --docpane-color-code-border: #69765c;
  --docpane-color-diagram-bg: #272d23;
  --docpane-color-diagram-border: #8a947f;
  --docpane-color-layer-border: #3e4539;
  /* 검은 1px 테두리 + 짙은 그림자 — 22%는 어두운 바탕에서 보이지 않았다 */
  --docpane-shadow-layer: 0 0 0 1px rgb(0 0 0 / 0.5), 0 18px 44px rgb(0 0 0 / 0.6);
  --docpane-color-scrim: rgb(0 0 0 / 0.62);
  --docpane-color-point: #a3e635;    /* 위의 잉크 11.23 */
  --docpane-on-point: #14200a;
  --docpane-color-accent: #b5ec55;   /* 종이 12.74 · 창 10.38 */
  --docpane-color-mark: #a3e635;
  --docpane-color-mark-bg: #2a3818;
  --docpane-color-mark-fg: #c5f06a;  /* 9.57 */
  --docpane-color-mark-soft: rgb(163 230 53 / 0.26);
  /* 어두운 배경에서는 밝게 — 기본값은 4.5:1에 못 미친다 (실측 3.79) */
  --docpane-color-add: #56d68a;
  --docpane-color-del: #ff8a85;
  --docpane-color-danger: #ff9b96;
  /* 알림 상자 — 어두운 배경에서는 밝은 쪽 */
  --docpane-color-alert-note: #4493f8;
  --docpane-color-alert-tip: #3fb950;
  --docpane-color-alert-important: #ab7df8;
  --docpane-color-alert-warning: #d29922;
  --docpane-color-alert-caution: #f85149;
}

[data-theme='sepia'] {
  color-scheme: light;
  --docpane-color-canvas: #efe7d6;   /* 종이와 1.09 */
  --docpane-color-bg: #f7f1e3;
  --docpane-color-surface: #e9e0cb;
  --docpane-color-layer: #fffcf4;
  --docpane-color-fg: #33291c;       /* 12.64 */
  --docpane-color-muted: #6a5c47;    /* 종이 5.76 · 채움 4.9 */
  --docpane-color-border: #dccfb3;
  --docpane-color-code-bg: #e4d8bc;
  --docpane-color-code-fg: #44351e;
  --docpane-color-code-border: #a9936d;
  --docpane-color-diagram-bg: #ede4d0;
  --docpane-color-diagram-border: #8a7859;
  --docpane-color-layer-border: #c8b893;
  --docpane-shadow-layer: 0 1px 2px rgb(70 50 20 / 0.1), 0 12px 32px rgb(70 50 20 / 0.18);
  --docpane-color-scrim: rgb(50 36 16 / 0.38);
  --docpane-color-point: #2e2618;    /* 먹갈색 — 위 글자 14.35 */
  --docpane-on-point: #fffaf0;
  --docpane-color-accent: #4a5a12;   /* 6.75 */
  --docpane-color-mark: #9cc43a;
  --docpane-color-mark-bg: #2e2618;
  --docpane-color-mark-fg: #d2e98a;  /* 11.21 */
  --docpane-color-mark-soft: rgb(170 200 50 / 0.36);
  /* 밝은 종이색 배경에서는 더 어둡게 (실측 3.04) */
  --docpane-color-add: #1c6b39;
  --docpane-color-del: #a52822;
  --docpane-color-danger: #9c2b23;
  /* 알림 상자 — 종이색 배경에서는 한 단계 어둡게 */
  --docpane-color-alert-note: #0a5bb5;
  --docpane-color-alert-tip: #1c6b39;
  --docpane-color-alert-important: #6b3fc0;
  --docpane-color-alert-warning: #7d5400;
  --docpane-color-alert-caution: #a52822;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --docpane-color-canvas: #0f110f;
    --docpane-color-bg: #161916;
    --docpane-color-surface: #1f231e;
    --docpane-color-layer: #262b25;
    --docpane-color-fg: #e6e9e2;
    --docpane-color-muted: #a0a898;
    --docpane-color-border: #2f352c;
    --docpane-color-code-bg: #41493a;
    --docpane-color-code-fg: #f1f5ed;
    --docpane-color-code-border: #69765c;
    --docpane-color-diagram-bg: #272d23;
    --docpane-color-diagram-border: #8a947f;
    --docpane-color-layer-border: #3e4539;
    --docpane-shadow-layer: 0 0 0 1px rgb(0 0 0 / 0.5), 0 18px 44px rgb(0 0 0 / 0.6);
    --docpane-color-scrim: rgb(0 0 0 / 0.62);
    --docpane-color-point: #a3e635;
    --docpane-on-point: #14200a;
    --docpane-color-accent: #b5ec55;
    --docpane-color-mark: #a3e635;
    --docpane-color-mark-bg: #2a3818;
    --docpane-color-mark-fg: #c5f06a;
    --docpane-color-mark-soft: rgb(163 230 53 / 0.26);
    --docpane-color-add: #56d68a;
    --docpane-color-del: #ff8a85;
    --docpane-color-danger: #ff9b96;
    --docpane-color-alert-note: #4493f8;
    --docpane-color-alert-tip: #3fb950;
    --docpane-color-alert-important: #ab7df8;
    --docpane-color-alert-warning: #d29922;
    --docpane-color-alert-caution: #f85149;
  }
}

/* ── 사용자 조절 단계 ──────────────────────────────────── */
[data-size='xs'] { --docpane-font-size-base: 14px; }
[data-size='s']  { --docpane-font-size-base: 15px; }
[data-size='m']  { --docpane-font-size-base: 16px; }  /* 기본 */
[data-size='l']  { --docpane-font-size-base: 18px; }
[data-size='xl'] { --docpane-font-size-base: 20px; }

[data-leading='tight']   { --docpane-line-height: 1.5; }  /* WCAG 최소 */
[data-leading='normal']  { --docpane-line-height: 1.7; }
[data-leading='relaxed'] { --docpane-line-height: 2; }

[data-width='narrow'] { --docpane-measure: 38em; }    /* 608px · 혼합 60자 */
[data-width='normal'] { --docpane-measure: 47.5em; }  /* 760px · 혼합 75자 */
[data-width='wide']   { --docpane-measure: 57em; }    /* 912px · 혼합 90자 */
[data-width='full']   { --docpane-measure: none; }    /* 상자 폭 전부 — 기본 */

[data-tracking='tight']  { --docpane-letter-spacing: -0.02em; }
[data-tracking='normal'] { --docpane-letter-spacing: 0em; }
[data-tracking='loose']  { --docpane-letter-spacing: 0.02em; }
[data-tracking='wide']   { --docpane-letter-spacing: 0.06em; }

[data-font='system'] { --docpane-font-family: var(--docpane-font-system); }

/* 코드 줄바꿈 — 긴 줄을 접을지, 가로 스크롤할지 */
[data-codewrap='on'] { --docpane-code-wrap: pre-wrap; }

/* 좁은 화면에서는 여백을 줄여 읽을 폭을 확보한다 */
@media (min-width: 48rem) {
  :root { --page-pad: 2rem; --lp-pad: 2rem; }
}
@media (min-width: 72rem) {
  :root { --lp-pad: 2.5rem; }
}

/* 집중 모드 — 좌측 목록과 우측 목차를 접어 본문만 남긴다 */
[data-focus='on'] {
  --panel-w: 0rem;
  --aside-w: 0rem;
}