/* crayon-shelf — 디자인 토큰 정본 (Tailwind 4 @theme 이름공간, 선언은 :root — lessons #73)
 * 방향: 노란 색도화지 위 크레파스 전면 책장. 렌즈 industrial-brutalist-ui(날것의 손 선 · 반듯한 책장 칸 · 극단적 크기 대비).
 * style.css 는 이 변수만 쓴다. 장식 크레파스 색(crayon-*)은 낙서·아이콘 면 칠 전용 — 글자에 쓰지 않는다(대비표 참고). */

:root {
  /* ── 색: 바탕 ── */
  --color-bg: #efd27e;            /* 개나리 색도화지 — 아이 화면 바탕 */
  --color-paper: #fbf6ea;         /* 책 종이 · 이름 딱지 · 부모 화면 종이 장 */
  --color-paper-shade: #efe5cc;   /* 책등 그늘 · 그림 자리 칠 · 빈 칸 */

  /* ── 색: 글·선 ── */
  --color-ink: #2a2520;           /* 검정 크레파스 — 모든 외곽선·본문 */
  --color-ink-soft: #574d43;      /* 연필 회색 — 보조 글(대비: 노랑 5.57 · 종이 7.64) */
  --color-accent: #a42c1b;        /* 빨강 크레파스 — 스티커·도장 면은 한 화면 최대 1, 그 밖엔 현재 장 점(16px)·포커스 링만 */
  --color-blue: #2a5596;          /* 파랑 크레파스 — 큰 버튼 면·선택 동그라미 */
  --color-green: #3b7531;         /* 초록 크레파스 — "꽂혀 있어요" 체크 */
  --color-wood: #8a5a32;          /* 책장 나무 — 기둥·선반 */
  --color-wood-dark: #5e3b1f;     /* 선반 아랫선·나뭇결 */
  --color-tape: rgb(251 246 234 / 0.72); /* 반투명 테이프 조각 */
  --color-on-blue: #fbf6ea;       /* 파랑 버튼 위 글자(6.86:1) */

  /* ── 색: 장식 크레파스(낙서·아이콘 면 칠 전용 — 표지·장면은 생성 삽화) ── */
  --color-crayon-red: #c8452f;
  --color-crayon-orange: #e07b2c;
  --color-crayon-pink: #e58ea3;
  --color-crayon-sky: #79b3dc;
  --color-crayon-green: #6aa349;
  --color-crayon-blue: #2f63ad;
  --color-crayon-purple: #6d58a5;
  --color-crayon-brown: #9a6a3c;

  /* ── 서체 ── */
  --font-display: "Jua", "Pretendard", system-ui, sans-serif;        /* 아이가 읽는 모든 글 · 제목 · 숫자 */
  --font-story: "Jua", "Pretendard", system-ui, sans-serif;          /* 동화 본문 */
  --font-hand: "Gaegu", "Jua", "Pretendard", system-ui, sans-serif;  /* 손글씨 메모 — Gaegu 서가에 없음(메인에 요청), 지금은 Jua 로 떨어진다 */
  --font-body: "Pretendard", system-ui, -apple-system, sans-serif;   /* 부모 화면 본문 · 고지 */

  /* ── 글자 크기 (아이 화면은 --text-kid 20px 미만을 쓰지 않는다) ── */
  --text-xs: 0.875rem;                                     /* 14 — 부모 화면 고지 띠·메타만 */
  --text-sm: 1rem;                                         /* 16 — 부모 화면 보조 */
  --text-base: 1.0625rem;                                  /* 17 — 부모 본문(Pretendard) */
  --text-kid: 1.25rem;                                     /* 20 — 아이 화면 최소 */
  --text-kid-lg: 1.5rem;                                   /* 24 — 이름표·버튼 글 */
  --text-kid-sub: 1.5rem;                                  /* 24 — 아이 화면 보조 글(소개문·메타·캡션·안내). Jua 는 한글 글자 몸이 em 의 약 0.85 라 20px 이 눈에는 17px 로 읽힌다(qa-1 P2-1) */
  --text-mini-tag: 1rem;                                   /* 16 — 부모 화면 작은 표지 제목(어른용 바닥 — 14px Jua 는 12px 로 보인다, qa-1 P3-3) */
  --text-cover: clamp(1.25rem, 0.9rem + 0.6vw, 1.5rem);    /* 20→24 표지 딱지(폭 표: 360·1024 가 빠듯) */
  --text-story: clamp(1.5rem, 0.9rem + 1.6vw, 2.25rem);    /* 24→36 동화 글 */
  --text-story-tall: 1.75rem;                              /* 28 — 키 큰 폰(높이 760↑)의 동화 글. 그림 아래 남는 높이를 글이 쓴다(qa-1 P3-1). 393×660 은 24 그대로 — 28 이면 장 번호가 넘김 띠 밑으로 9px 들어간다 */
  --text-stamp: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);    /* 28→40 도장 */
  --text-title: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);     /* 28→44 오늘의 책 제목 */
  --text-display: clamp(2.25rem, 1.2rem + 3vw, 3.5rem);    /* 36→56 쪽 제목 */
  --text-name: clamp(2.5rem, 1.4rem + 3.2vw, 4.5rem);      /* 40→72 책장 이름 — 가장 큰 것 하나 */
  --text-story--line-height: 1.45;
  --text-body--line-height: 1.65;

  /* ── 간격 (4 배수) ── */
  --spacing: 0.25rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-gutter: clamp(1.25rem, 4vw, 3.5rem);  /* 20 → 56 바깥 여백 */
  --spacing-target-kid: 4rem;                     /* 64 — 아이 화면 누를 것 최소(브리프 60↑) */
  --spacing-target: 3rem;                         /* 48 — 부모 화면 누를 것 최소 */
  --spacing-arrow: 4.5rem;                        /* 72 — 데스크톱 넘김 화살표 */
  --spacing-post: 0.875rem;                       /* 14 — 책장 기둥(<720 은 0.625rem) */
  --spacing-shelf-gap: 1.5rem;                    /* 24 — 표지 사이(720: 1.25rem · <720: 1rem) */

  /* ── 모서리 — 둥근 모서리도 짝이 안 맞게(손으로 오린 종이) ── */
  --radius-paper: 6px 10px 5px 12px / 10px 6px 12px 5px;
  --radius-tag: 14px 20px 12px 22px / 20px 12px 22px 14px;
  --radius-button: 28px 34px 26px 36px / 34px 26px 36px 28px;
  --radius-dot: 48% 52% 50% 50% / 52% 48% 50% 50%;

  /* ── 그림자 — 흐린 그림자 없음(렌즈). 종이가 종이 위에 놓인 납작한 어긋남만 ── */
  --shadow-paper: 3px 4px 0 0 rgb(42 37 32 / 0.16);
  --shadow-lift: 5px 7px 0 0 rgb(42 37 32 / 0.18);
  --shadow-none: none;

  /* ── 이징 ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* 밀기·등장 */
  --ease-flip: cubic-bezier(0.45, 0.05, 0.25, 1);   /* 책장 넘김 460ms */
  --ease-stamp: cubic-bezier(0.25, 1, 0.5, 1);     /* 도장 쿵 — 넘침(1.5→.94→1)은 키프레임이 맡고 곡선은 감속만(튕김 곡선 금지, impeccable bounce-easing) */
}