/* Marginalia 디자인 토큰 — 값의 단일 소스.
 *
 * 앱(index.html → style.css)이 이 파일을 불러온다. 관리자 콘솔은 이제 별도
 * 저장소로 분리돼 자체 토큰을 쓴다 — 예전엔 콘솔이 :root를 따로 복사해 뒀는데,
 * 그 복사본이 조용히 낡아 `--ink-faint`가 대비 미달인 옛 값으로 남아 있었다(캡션 34곳, 약 3.3:1).
 * 값을 바꿀 일이 생기면 여기만 고친다 — test/design-tokens.test.js가 두 번째
 * 소스가 생기는 것을 막는다.
 *
 * 근거와 실측치는 branding/marginalia-branding.md §2. 같은 테스트가 이 파일과
 * 그 문서의 표를 맞대 보므로, 한쪽만 고치면 실패한다.
 *
 * 이 파일은 셸 자산이다 — sw.js의 SHELL_ASSETS에 있고, 고치면 release.json
 * 버전을 올리고 `npm run release:sync`를 돌려야 사용자에게 반영된다.
 */
:root{
  --paper: #F4F3EC;
  --card: #FBFAF6;
  --ink: #232821;
  /* 잉크 3단은 대비를 재서 정한다(2026-07-28). 이전 값(#6C7065 / #9C9484)은
     faint가 paper 위에서 2.7:1이라 WCAG AA(작은 글자 4.5:1)에 한참 못 미쳤다 —
     캡션·보조 설명·푸터가 전부 faint라 밝은 곳에서 읽기 어려웠다.
     faint를 4.5:1로 올리면 옛 soft(4.56)보다 진해져 위계가 뒤집히므로
     soft도 함께 내렸다. 색상·채도는 그대로 두고 명도만 옮겨 톤은 유지한다.
     paper(#F4F3EC) 기준 — ink 13.5:1 · soft 6.2:1 · faint 4.8:1 */
  --ink-soft: #575B52;
  --ink-faint: #70685A;
  --line: rgba(35,40,33,0.14);
  --moss: #5C6E52;
  --moss-soft: #E1E5D7;
  --moss-bg: #EBEEE1;
  --moss-deep: #4E5F45; /* 채운 모스를 누르는 순간만 — hover/pressed 한 단계 어둡게 */
  /* moss-soft·paper-2 위에 앉는 작은 글씨 전용. --moss는 종이 위에선 4.96:1로
     충분하지만 moss-soft 위에선 4.31:1이라 AA(4.5:1)에 못 미친다 — 잉크 3단을
     다시 잡을 때와 같은 방식으로 톤은 두고 명도만 한 단계 내려 4.6:1로 올렸다.
     칩·배지처럼 옅은 바탕에 얹는 글씨는 --moss 대신 이걸 쓴다. */
  --moss-ink: #58694F;
  --sage: #93A382;
  --paper-2: #E4E2D6;
  --clay: #AC7A54;  /* 보조 웜 액센트 — 차트 색 순환, 추천 이유 표식 */
  --gold: #A98B4F;  /* 보조 웜 액센트 — 별점(카멜), 인용부호 */
  /* 회상 카드(작년 이맘때) 표면 — 웜 액센트 hue가 아니라 채도를 낮춘 밝은 바탕이다.
     paper처럼 밝아 --ink가 13:1로 얹히고, 그 위 별점·인용부호는 --gold가 제 역할대로
     잡는다. moss 채움이 배너처럼 튀던 걸 눕히려고 둔다(경계 판정은 branding §2). */
  --gold-bg: #EFE7D3;
  /* 손봐야 하는 신호 — 관리자 콘솔 전용(앱에는 빨강이 없다). paper 4.59:1 ·
     card 4.89:1로 둘 다 AA를 넘긴 것을 재서 정했다. 근거는 branding §2 Alert. */
  --alert: #B2503F;
  --radius: 2px;    /* 각진 에디토리얼 — 인쇄물 감성 (둥근 모서리 반려) */
  --radius-pill: 100px; /* 칩·태그 알약 */
  --radius-sheet: 16px; /* 바텀시트·투어 카드 상단 모서리 */
  /* 모달 뒤를 덮는 딤. 그림자와 **같은 웜 잉크 바탕**(rgba(42,37,32))이라 여기 함께 둔다 —
     그것만 리터럴로 남아 있으면 농도를 손볼 때 고칠 자리를 못 찾는다(헌장 C8). 예전엔
     모달 여섯 벌에 같은 값이 여섯 번 적혀 있었다(2026-08-31에 한 벌로 모으며 토큰화). */
  --scrim: rgba(42,37,32,0.45);
  /* 깊이(그림자) — 웜 잉크 rgba(42,37,32) 한 바탕의 3층. 층은 값의 개수가 아니라
     "누름 < 카드 < 떠 있음"이라는 위계다. 불투명도 .12~.28로 흩어져 있던 손값들을
     여기로 모은다(2026-08-16, 헌장 C8). 방향성 둘(서랍·탭바)은 오프셋이 의미라 따로.
     이 파일은 셸 자산이다 — 고치면 release.json 올리고 release:sync. */
  --shadow-sm: 0 1px 4px rgba(42,37,32,.14);       /* 눌림·resting */
  --shadow-card: 0 6px 18px rgba(42,37,32,.14);    /* 패널·모달·드래그·미리보기 */
  --shadow-lg: 0 12px 32px rgba(42,37,32,.22);     /* 토스트·투어 카드 */
  --shadow-drawer: -18px 0 40px rgba(42,37,32,.14); /* 옆에서 드는 서랍 */
  --shadow-topbar: 0 -4px 14px rgba(42,37,32,.10);  /* 위로 드는 탭바 */
  --serif: 'Noto Serif KR', serif;
  --sans: 'Pretendard', -apple-system, sans-serif;
  --bottomnav-h: 60px; /* 하단 탭바 실제 높이 — .app 하단 여백 계산의 기준값 */
  /* 손끝으로 맞히는 최소 크기. 44px이라는 숫자 자체는 여백에도 쓰이는데
     (add-bar margin 등) 뜻이 전혀 달라서, 터치 타깃일 때만 이 이름을 쓴다
     — grep 한 번으로 "누르는 자리"만 골라낼 수 있다. */
  --tap: 44px;

  /* 모션 — easing·duration을 한 곳에서 고른다. 그동안 transition은 요소마다 .15s/.18s/.2s
     ease로 흩어져 "아무도 안 고른 기본값"이었다(우아함 헌장 C2). 이 토큰을 쓰면 값이
     골라진 것이 된다. 과하지 않게: 앱의 조용함을 해치는 애니메이션은 안 더한다.
     동작 줄이기(prefers-reduced-motion)면 style.css 맨 아래 전역 가드가 전부 끈다. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* 감속 — 등장·확장·채움 */
  --ease-inout: cubic-bezier(.4, 0, .2, 1);  /* 대칭 — 색·상태 전환 */
  --dur-1: 120ms;  /* 미세 — 눌림·호버 */
  --dur-2: 200ms;  /* 표준 — 페이드·슬라이드·별점 채움 */
  --dur-3: 320ms;  /* 등장 — 카드·오버레이 */
}