/* 앱과 수집기가 함께 쓰는 디자인 토큰.
   두 화면이 같은 색과 리듬을 쓰도록 여기 한 곳에서만 정의한다.
   확정안(시안 E)의 값이며, 대비는 주석의 수치를 근거로 고른 것이다. */

:root {
  --bg: #f1eae0;
  --ink: #33302b;          /* 본문      11.0:1 */
  --ink-soft: #6f604f;     /* 저자·보조  5.1:1 */
  --accent: #b4593a;       /* 룰·하트 등 그래픽 전용 */
  --accent-text: #9c4529;  /* 글자·테두리 5.3:1 */
  --hairline: #e0d6c6;
  --toast-bg: #33302b;
  --toast-ink: #f1eae0;
  /* 책장 넘김(길게 누르기·밀기)의 그늘. 회색이 아니라 --ink-soft 에서 뽑은
     따뜻한 갈색이다 — 크림색 종이 위에 회색을 얹으면 지저분한 면이 된다. */
  --fold: rgba(111, 96, 79, 0.20);   /* 책등 쪽 접힘 */
  --cast: rgba(111, 96, 79, 0.26);   /* 아래 쪽에 드리우는 그림자 */
  /* 출처 쪽지(작가 이름을 누르면 올라온다). 책 사이에 끼워 둔 쪽지처럼
     바탕보다 반 톤 밝은 종이다. 그 뒤의 쪽은 살짝 가라앉는다. */
  --paper: #f6f0e7;                    /* --ink 11.6:1 · --ink-soft 5.4:1 · --accent-text 5.6:1 */
  --veil: rgba(51, 48, 43, 0.28);
  --note-shadow: rgba(51, 48, 43, 0.12);

  --font-kr: "Hahmlet", "Nanum Myeongjo", serif;
  --pad: 28px;
  --radius: 3px;
  --tracking-wide: 0.22em;   /* 로고 — 라틴 대문자 기준 */
  --tracking-btn: 0.22em;    /* 버튼 — 한글 두 글자 기준 */
  --tracking-meta: 0.1em;    /* 저자·개수 등 캡션 */
  --quote-size: 21px;
}

/* 폼 요소는 앱에 없고 수집기에만 있다. 수집기 전용이지만 값의 출처가
   위 팔레트라서 같이 둔다. 다크모드에서 함께 뒤집혀야 하기 때문이다. */
:root {
  --field-bg: #fbf8f4;
  --field-border: #d6cab6;
  --field-focus: #9c4529;
  --ok: #2f6b4f;
  --danger: #9c2f2f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1917;
    --ink: #e6e1d9;        /* 13.4:1 */
    --ink-soft: #98908a;   /*  5.6:1 */
    --accent: #d08a5f;
    --accent-text: #d08a5f; /*  6.2:1 */
    --hairline: #3a342f;
    --toast-bg: #e6e1d9;
    --toast-ink: #1c1917;
    --fold: rgba(0, 0, 0, 0.40);
    --cast: rgba(0, 0, 0, 0.55);
    --paper: #24201d;
    --veil: rgba(0, 0, 0, 0.5);
    --note-shadow: rgba(0, 0, 0, 0.4);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --field-bg: #262220;
    --field-border: #4a423b;
    --field-focus: #d08a5f;
    --ok: #7fb79a;
    --danger: #e08d8d;
  }
}