/* tokens.css — Design.md §2~§5 의 유일한 코드 표현.
 *
 * 이 파일 밖에서는 색·크기·시간 리터럴을 쓰지 않는다.
 * `#C44536` 이 다른 파일에 등장하면 잘못된 것이다 (CLAUDE.md §8.1).
 */

/* 부크크명조 — 리더 본문 전용(§3.2 밖). 인쇄용으로 만들어진 명조체를 써서
 * "책을 펼쳤을 때 진짜 인쇄된 것처럼" 보이게 한다. Design.md §3.2 의 Reading
 * 역할(Noto Serif KR/Newsreader)은 그대로 두고, 리더 본문(.read-body)만
 * --font-print 로 갈아 낀다 — 카드·목록 등 다른 화면은 건드리지 않는다. */
@font-face {
  font-family: 'Bookk Myungjo';
  src: url('/fonts/BookkMyungjo-Light.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bookk Myungjo';
  src: url('/fonts/BookkMyungjo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── §2.1 팔레트 (확정 5색, 변경 불가) ───────────────────── */
  --paper: #eddDd4;
  --ink: #283d3b;
  --wine: #772e25;
  --flame: #c44536;
  --tide: #197278;

  /* ── §2.2 파생 토큰 (5색에서만 유도) ─────────────────────── */
  --paper-hi: #f7efe9;
  --paper-lo: #e2d3c8;
  --rule: rgba(40, 61, 59, 0.22);
  --rule-dash: rgba(40, 61, 59, 0.35);
  /* 이름의 숫자는 처음 값이다. 실제 사이트(2026-10)에서 재 보니 0.70 은 종이 위
   * 4.05:1, 0.45 는 2.28:1 로 작은 글자의 기준(4.5:1)에 못 미쳤다. 스티커 바탕
   * (#d8d2cb)까지 4.5:1 을 넘는 값으로 올리고, 둘 사이의 위계는 한 단계 남긴다.
   * 이름을 바꾸면 쓰는 곳 수백 군데가 따라 바뀌어야 해서 이름은 그대로 둔다. */
  --ink-70: rgba(40, 61, 59, 0.88);
  --ink-45: rgba(40, 61, 59, 0.78);
  --wash-tide: rgba(25, 114, 120, 0.1);
  /* 작은 글씨용 청록. Design.md §2.3 이 --tide 를 "4.3:1 → 14px 본문 금지,
   * 18.5px+ 나 굵은 14px+ 에만" 이라고 정해 두었는데, 링크는 12~16px 로 쓰인다.
   * 팔레트(§2.1 확정 5색)는 그대로 두고 명도만 10% 낮춘 파생 토큰을 만든다.
   * paper 4.98:1 / paper-hi 5.79:1 / paper-lo 4.51:1 — 세 바탕 모두 AA 통과. */
  --tide-text: #16676c;
  --wash-flame: rgba(196, 69, 54, 0.1);
  /* 청록 점선 테두리 — RuleSticker 전용 (§6.2) */
  --tide-dash: rgba(25, 114, 120, 0.55);
  /* --flame 면 위 흰 글씨 4.9:1 (§2.3) */
  --on-flame: #ffffff;
  /* 사진 위에 글씨를 얹을 때 까는 막. 잉크를 옅게 깐 것이라 새 색이 아니다. */
  --scrim: rgba(40, 61, 59, 0.62);
  /* 어두운 표면(--ink/--wine) 위 보조 텍스트. --ink-45 의 반전 짝. */
  --paper-60: rgba(237, 221, 212, 0.6);

  /* ── §7/§9 기여자 색띠 12색 램프 ─────────────────────────
   * 손으로 고른 값이 아니다. `node lib/domain/color.js --print` 의 출력이다.
   * 램프를 바꾸려면 color.js를 고치고 다시 뽑는다. */
  --spine-0: #772e25;
  --spine-1: #853228;
  --spine-2: #93362b;
  --spine-3: #a13b2e;
  --spine-4: #af3f31;
  --spine-5: #bd4334;
  --spine-6: #b4493c;
  --spine-7: #955148;
  --spine-8: #765954;
  --spine-9: #576260;
  --spine-10: #386a6c;
  --spine-11: #197278;

  /* ── 책장 목재 (Design.md §2.1 의 확정 5색 밖) ─────────────
   * 목재 갈색은 팔레트에 없다. 새 색상 계열을 들이지 않으려고 --wine(#772E25)
   * 에서 붉은 기만 덜고 명도로 나눴다. 색상환에서 와인과 같은 자리라 책등·
   * 기여자 색과 부딪히지 않는다. 책장 가구에서만 쓴다. */
  /* 짙은 호두나무에서 밝은 자작나무로. 어두운 책장에서는 --ink 책등이 배경에
   * 묻혀 어느 것이 책인지 구분되지 않았다. 가구를 밝히면 책이 앞으로 나온다. */
  --wood-dark: #bfa184; /* 뒷판. 가장 깊은 그늘 */
  --wood: #d3b79b; /* 기둥·측판 */
  --wood-face: #dcc3a6; /* 선반 윗면. 빛을 받는 면 */
  --wood-line: #8c6c55; /* 나뭇결과 외곽선. 검정이 아니라 나무의 진한 결 */
  --brass: #dcb86e; /* 라벨 택과 스위치의 놋쇠. 위에 --ink 글씨가 읽혀야 한다 */

  /* 나뭇결 — 노이즈가 아니라 결이므로 세로 줄이다 (§4 손그림) */
  --grain-wood: repeating-linear-gradient(
    90deg,
    rgba(140, 108, 85, 0) 0 7px,
    rgba(140, 108, 85, 0.22) 7px 8px,
    rgba(140, 108, 85, 0) 8px 19px,
    rgba(140, 108, 85, 0.12) 19px 20px
  );

  /* ── §3.2 폰트 역할 ─────────────────────────────────────── */
  --font-display: 'Gowun Batang', 'Fraunces', serif;
  --font-read: 'Noto Serif KR', 'Newsreader', serif;
  --font-ui: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* 구글 로그인 버튼 전용. 구글 브랜딩 가이드라인이 정한 값이라 5색 팔레트의 예외다
     (Design.md §10). 다른 곳에 쓰지 않는다. */
  --font-google: 'Roboto', system-ui, sans-serif;
  /* 숫자만 Fraunces (§6.1 히어로) */
  --font-numeral: 'Fraunces', serif;
  /* 리더 본문 전용. 위 @font-face 참고 — Reading 역할(--font-read) 자체는
     Design.md §3.2 그대로 유지하고 이 토큰만 따로 둔다. */
  --font-print: 'Bookk Myungjo', 'Noto Serif KR', serif;

  /* ── §3.3 타입 스케일 ───────────────────────────────────── */
  --t-display-xl: 56px;
  --lh-display-xl: 1.1;
  --ls-display-xl: -0.02em;

  --t-display-l: 40px;
  --lh-display-l: 1.15;
  --ls-display-l: -0.01em;

  --t-title: 28px;
  --lh-title: 1.3;

  --t-subtitle: 20px;
  --lh-subtitle: 1.4;

  --t-body: 16px;
  --lh-body: 1.7;

  /* ★ 리더 본문 2.0 은 협상 불가 (§3.3) */
  --t-read: 18px;
  --lh-read: 2;
  --ls-read: -0.003em;

  --t-read-lead: 20px;
  --lh-read-lead: 1.9;

  /* §11 리더 폰트 크기 조절 3단계. Design.md가 단계별 수치는 정하지
   * 않아 read(18px)를 가운데 두고 위아래로 잡았다. */
  --t-read-s: 16px;
  --t-read-l: 21px;

  /* ── UI 글 ────────────────────────────────────────────────
   * Design.md §3.3 의 스케일은 본문 16px 다음이 바로 캡션 13px 인데, 화면의
   * 내비·버튼·탭·라벨·칩은 그 사이 단을 쓴다. 없는 단이라 app.css 에 15px 과
   * 14px 이 33곳에 손으로 적혀 있었다 — 스케일이 모자란 것이지 그 33곳이
   * 틀린 것이 아니었다. 실제로 쓰고 있던 두 값을 그대로 토큰으로 올린다.
   *
   * 본문(--t-body)이 읽는 글이라면 이쪽은 조작하는 글이다. 문단에는 쓰지
   * 않는다. */
  --t-ui: 15px;
  --t-ui-sm: 14px;

  --t-caption: 13px;
  --lh-caption: 1.5;

  --t-meta: 12px;
  --lh-meta: 1.4;
  --ls-meta: 0.04em;

  /* ── §4 레이아웃 · 형태 ─────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  /* 내비 높이. 로그인 상태에는 상자 버튼이, 비로그인에는 텍스트가 들어가서
   * 그냥 두면 페이지마다 18px 씩 들썩였다. 높이를 결과로 두지 않고 정한다. */
  --nav-h: 72px;
  --w-content: 1200px;
  --w-reader: 680px;
  --measure-read: 62ch;
  --gutter: var(--s-6);

  /* 테두리 언어 — 상태를 테두리로 말한다 (§4) */
  --border-solid: 1px solid var(--rule); /* 확정된 것 */
  --border-dashed: 1.5px dashed var(--rule-dash); /* 아직 열려 있는 것 */
  --border-double: 2px double var(--rule-dash); /* 시스템 큐레이션 */

  /* 오프셋 실선 그림자만. 블러 그림자 금지 (§4) */
  --shadow-print: 0 2px 0 var(--rule);

  /* ── Design.md §4 의도적 위반 ────────────────────────────
   * §4 는 "블러 그림자 금지 / 오프셋 실선만" 이라고 못박는다. 그 금지는
   * 카드·버튼이 머티리얼풍으로 떠오르는 것을 막기 위한 것이고, 지금도
   * 유효하다 — 아래 그림자는 오직 .page(종이 한 장) 한 곳에만 쓴다.
   * 여백이 휑한 이유는 종이와 책상이 같은 평면에 있기 때문이고, 깊이 없이
   * 색조만으로는 두 평면이 분리되지 않는다.
   * 세로 오프셋을 주지 않는 이유: .page 는 화면 바닥까지 이어져서 아래쪽
   * 그림자가 보이지 않는다. 실제로 보이는 것은 좌우로 번지는 부분뿐이다. */
  --shadow-page: 0 0 24px rgba(40, 61, 59, 0.07), 0 0 80px rgba(40, 61, 59, 0.05);

  /* ── 리더 지면 — Design.md §2.1·§4 의 의도적 위반 ──────────
   * 사용자 지시로 두 가지를 어긴다. (1) 바탕이 --paper 가 아니라 흰색이다.
   * (2) 두 지면 사이 중철에 블러 그림자를 쓴다.
   * 1px 괘선으로는 마주 본 두 지면이 한 장으로 붙어 보였다 — 실제 인쇄물에서
   * 두 면을 나누는 것은 선이 아니라 접힌 골이 만드는 그늘이다.
   * 리더의 지면(.reader-pages__viewport) 안에서만 쓴다. */
  --print-paper: #ffffff;
  /* 접힌 종이의 그늘은 골에서 가장 짙고 아주 빠르게 옅어진 뒤, 지면 쪽으로
   * 길게 끌린다. 균등한 간격으로 놓으면 골이 아니라 인쇄된 회색 띠로 보인다 —
   * 가운데를 촘촘히, 바깥을 성기게 두는 이유다. 정점을 낮추고 띠를 넓게 잡아
   * 경계가 눈에 띄지 않게 한다. */
  --print-gutter: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.008) 22%,
    rgba(0, 0, 0, 0.025) 36%,
    rgba(0, 0, 0, 0.06) 45%,
    rgba(0, 0, 0, 0.115) 48.6%,
    rgba(0, 0, 0, 0.175) 50%,
    rgba(0, 0, 0, 0.115) 51.4%,
    rgba(0, 0, 0, 0.06) 55%,
    rgba(0, 0, 0, 0.025) 64%,
    rgba(0, 0, 0, 0.008) 78%,
    rgba(0, 0, 0, 0) 100%
  );

  /* 책상의 결. §4 는 "종이 질감은 노이즈 1장으로만" 이라 하지만, 종이와
   * 책상은 다른 재질이다 — 한 장으로는 두 재질을 말할 수 없다. 종이보다
   * 성기고(baseFrequency .55) 진하다. 채도는 0 으로 눌러 팔레트를 늘리지 않는다. */
  --grain-desk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23d)' opacity='.1'/%3E%3C/svg%3E");

  /* 종이의 결. body::before 와 같은 값을 .page 배경으로도 쓴다 — .page 가
   * 불투명해지면서 그 아래 깔린 오버레이가 본문 영역에서 가려지기 때문이다. */
  --grain-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='.04'/%3E%3C/svg%3E");

  /* ── §5 모션 ────────────────────────────────────────────── */
  --dur-micro: 180ms;
  --dur-panel: 320ms;
  --dur-book: 700ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ── §11 포커스 링 — 절대 제거 금지 ─────────────────────── */
  --focus-ring: 2px solid var(--tide);
  --focus-offset: 2px;

  /* ── 구글 로그인 버튼 (라이트 테마) ─────────────────────────
   * 구글 브랜딩 가이드라인이 정한 값이다. 우리 팔레트로 바꾸면 가이드라인 위반이
   * 되므로 5색 규칙의 예외로 둔다(Design.md §10). .gsi-btn 밖에서 쓰지 않는다.
   * https://developers.google.com/identity/branding-guidelines */
  --google-fill: #ffffff;
  --google-stroke: #747775;
  --google-text: #1f1f1f;
}

/* §3.3 모바일: display-xl → 36px, read → 17px */
@media (max-width: 640px) {
  :root {
    --t-display-xl: 36px;
    --lh-display-xl: 1.2;
    --t-display-l: 28px;
    --t-read: 17px;
  }
}