/*
  목요일의 화원 — 디자인 토큰
  전부 3단계에서 확정한 값이고, 근거는 design.md 에 있다.

  값의 출처는 취향이 아니라 실측이다.
  Aesop(#FFFEF2) · Sarah Winward(#F8F7F3) · Cereal(#F7F6EF) 세 곳이
  전부 순백을 피하고 따뜻한 오프화이트를 쓴다. 글자도 순검정이 아니다.
*/
:root {
  /* ── 색 ──────────────────────────────────────────────
     강조색은 하나다. 그리고 **면이 아니라 점**으로만 쓴다.
     꽃 사진에는 이미 온갖 색이 들어 있어서, 화면에 색을 더 칠하면
     사진과 싸운다. 링크·라벨·구분선 정도가 강조색이 쓰이는 전부다. */
  --paper: #f8f6f0;
  --paper-deep: #f1ede4; /* 섹션 하나만 살짝 눕힌다. 리듬용 */
  --ink: #2a2723;
  --ink-muted: #6b655c;
  --ink-faint: #a09889;
  --accent: #7c4a3f; /* 마른 장미. 꽃의 초록과 충돌하지 않는다 */
  --line: #ddd7ca;

  /* ── 타입 ────────────────────────────────────────────
     크기를 4종으로 묶는다. Aesop 이 3종(31/14/12), Cereal 이 2종(12/11)이었다.
     종류를 늘리면 위계가 아니라 소음이 된다.

     자간은 크기에 따라 **방향이 뒤집힌다**(Kinfolk 실측).
       50px → -0.5px(-1%)   ·   15px → +0.15px(+1%)
     큰 글자는 조여서 덩어리로, 작은 글자는 풀어서 낱글자로 읽히게 한다. */
  --font-display: "MaruBuri", "Nanum Myeongjo", Georgia, serif;
  --font-body: "Pretendard", -apple-system, "Segoe UI", sans-serif;

  /* 가장 긴 줄이 "그 주에 좋은 꽃만"(한글 7 + 공백 2 ≒ 7.7em)이다.
     세로 라벨이 왼쪽에서 60px 을 먹으므로 텍스트 칼럼은 화면 폭의 절반보다 좁다.
     1024px 에서 55.7px 로 잡히자 딱 넘쳐 3줄이 됐다(카운트 규칙 위반).
     기울기를 낮춰 전 구간에서 2줄을 유지한다. */
  --step-display: clamp(2.2rem, 1.3rem + 2.9vw, 4.2rem);
  --step-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  --step-body: 1rem;
  --step-label: 0.75rem;

  --track-display: -0.02em;
  --track-lead: -0.005em;
  --track-body: 0;
  --track-label: 0.14em;

  /* 웨이트는 둘이면 충분하다. 굵기로 소리치지 않는다.
     큰 글자일수록 가늘게 — Aesop 의 31px 이 400 이었고 12px 라벨이 700 이었다. */
  --weight-regular: 400;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-body: 1.85; /* 한글은 라틴보다 넉넉해야 한다. 받침 때문에 줄이 붙어 보인다 */

  /* 한글 본문은 25~35자가 읽기 폭이다. 라틴 기준 65자를 그대로 쓰면 너무 넓다 */
  --measure: 32ch;

  /* ── 간격 ────────────────────────────────────────────
     여백이 콘텐츠다. 섹션 간격을 본문 간격의 5배 이상으로 벌린다. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6.5rem;
  --space-8: clamp(6rem, 4rem + 8vw, 11rem); /* 섹션 사이 */

  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --container: 1240px;

  /* ── 모션 ────────────────────────────────────────────
     R1(sarahwinward.com)의 스크롤 이동량을 쟀더니 **0px** 이었다.
     하이엔드 플로럴은 움직이지 않는다. 등장만 조용히 처리한다. */
  --dur-slow: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rise: 10px;
}

@media (prefers-contrast: more) {
  :root {
    --ink-muted: #4a453e;
    --line: #b9b0a0;
  }
}