/* clayday — 디자인 시스템 정본.
 * 이름은 Tailwind 4 @theme 이름공간을 따르지만 선언은 :root 에 둔다(브라우저는 @theme 를 읽지 않는다, lessons #73).
 * style.css 는 여기 있는 var() 만 쓴다. 대비 실측표는 _design/DESIGN.md.
 */
:root {
  /* ── 색: 점토 슬립 바탕 · 종이 · 먹 · 코발트 라벨 테이프 ───────────────── */
  --color-bg: #e3d2c2;            /* 점토 슬립 — 굽기 전 흙물 빛. OKLCH L 0.873 (종이색 쿼터 밖) */
  --color-surface: #f4ece2;       /* 종이 — 노트·가격표·앱 화면 */
  --color-surface-deep: #d9c6b3;  /* 작업대 그늘 — 교대 띠·트레이 바닥 */
  --color-ink: #2b2420;           /* 먹 — 본문·제목·먹색 테이프 */
  --color-ink-soft: #5f5248;      /* 보조 글자 — 캡션 */
  --color-ink-field: #4a3f37;     /* 11~12px 대문자 필드 — ink-soft 보다 한 단계 짙게(qa-1 P3-1) */
  --color-line: #7a6c60;          /* 선 — 입력 경계·표 선(3:1 이상) */
  --color-line-faint: #cdb9a5;    /* 장식 선 — 뜯은 종이 가장자리·점선(정보 없음) */
  --color-accent: #2447c4;        /* 코발트 라벨 테이프 — 테이프·링크·포커스에만 */
  --color-accent-press: #1f3fb8;  /* 눌린 테이프 */
  --color-on-accent: #faf6f0;     /* 테이프 위 돋움 글자 — 종이보다 한 단계 밝게(impeccable gray-on-color, NOTES) */
  --color-on-ink: #f4ece2;        /* 먹색 테이프 위 글자 */

  /* 점토 조각 — 습관·기분 조각과 사진 톤. 글자를 얹지 않는다(fired 만 예외, 5.02:1) */
  --color-clay-terracotta: #b4623f;
  --color-clay-fired: #9c4f30;    /* 끝 CTA 점토판 — 위 글자 on-ink */
  --color-clay-ochre: #c99a45;
  --color-clay-sage: #8f9c7a;
  --color-clay-ash: #a3968b;
  --color-clay-cream: #efe4d3;

  /* ── 서체 ───────────────────────────────────────────────────────── */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Familjen Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-tape: "Familjen Grotesk", system-ui, sans-serif;   /* 라벨 테이프 — 대문자 600 + 자간 */

  /* Fraunces 축: 서가 조각은 opsz·wght 뿐(SOFT·WONK 없음 — 메인에 요청). 있으면 SOFT 100 이 점토처럼 둥글다 */
  --font-display-variation: "opsz" 144, "SOFT" 100, "WONK" 0;
  --font-display-weight: 500;
  --font-heading-variation: "opsz" 72, "SOFT" 100, "WONK" 0;

  /* ── 글자 크기 (실측 폭 표: _design/wireframe.md §폭) ─────────────── */
  --text-display: clamp(3.25rem, 1.8rem + 5.2vw, 7.5rem);     /* H1 — 390:52 · 1024:82 · 1440:104px */
  --text-display--line-height: 0.94;
  --text-display--letter-spacing: -0.02em;
  --text-h2: clamp(2.25rem, 1.5rem + 2.6vw, 4.25rem);         /* 390:36 · 1024:51 · 1440:61px */
  --text-h2--line-height: 1.02;
  --text-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --text-h3--line-height: 1.15;
  --text-price: clamp(4rem, 2.6rem + 4.4vw, 8rem);            /* 가격표 숫자 */
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-lead--line-height: 1.5;
  --text-body: 1.0625rem;
  --text-body--line-height: 1.6;
  --text-small: 0.875rem;
  --text-tape: 0.8125rem;                                     /* 테이프 글자 13px, 자간 0.1em */
  --text-tape--letter-spacing: 0.1em;
  --text-field: 0.75rem;                                    /* 필드 이름 12px, 자간 0.14em — ink-field(qa-1 P3-1) */
  --text-field--letter-spacing: 0.14em;

  /* ── 간격 — 4px 척도 + 유체 구간 ─────────────────────────────────── */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.5rem;
  --spacing-6: 2rem;
  --spacing-7: 3rem;
  --spacing-8: 4rem;
  --spacing-9: 6rem;
  --spacing-10: 9rem;
  --spacing-gutter: clamp(1.25rem, 0.5rem + 3.2vw, 4rem);     /* 바깥 여백 — 390:20 · 1024:41 · 1440:54 */
  --spacing-gap: 1.5rem;                                      /* 12열 거터 */
  --spacing-section: clamp(5rem, 2.5rem + 8vw, 10rem);        /* 구간 사이 — 렌즈 py-24..40 */
  --spacing-header: 4.5rem;                                   /* 머리 높이 ≥1024 (모바일 3.5rem) */
  --spacing-header-sm: 3.5rem;
  --spacing-touch: 3.5rem;                                    /* 점토 조각 최소 56px */

  /* ── 모서리 — 손으로 빚은 비대칭 ───────────────────────────────── */
  --radius-tape: 2px;
  --radius-paper: 3px;
  --radius-slab: 1.75rem;
  --radius-slab-inner: 1.375rem;                              /* 판 안쪽 — 동심(slab − 6px) */
  --radius-lump: 47% 53% 44% 56% / 56% 44% 57% 43%;
  --radius-lump-2: 58% 42% 51% 49% / 45% 59% 41% 55%;
  --radius-lump-3: 41% 59% 60% 40% / 52% 47% 53% 48%;
  --radius-tag: 0.75rem 0.75rem 0.75rem 2.5rem;              /* 가격표 — 구멍 쪽만 둥글게 */

  /* ── 그림자 — 따뜻한 갈색 기운, 바닥 그림자 하나 + 눌림 하나 ─────── */
  --shadow-rest: 0 1px 0 rgb(43 36 32 / 0.06), 0 10px 18px -10px rgb(84 48 26 / 0.38);
  --shadow-lift: 0 2px 0 rgb(43 36 32 / 0.05), 0 22px 30px -14px rgb(84 48 26 / 0.34);
  --shadow-press: inset 0 2px 5px rgb(84 48 26 / 0.32), inset 0 -1px 0 rgb(255 248 238 / 0.35);
  --shadow-dent: inset 0 3px 8px rgb(84 48 26 / 0.30), inset 0 -2px 0 rgb(255 248 238 / 0.40);
  --shadow-tape-emboss: 0 1px 0 rgb(0 0 0 / 0.28);           /* 테이프 돋움 글자 — text-shadow 용 */
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  /* ── 움직임 — 무광 점토: 튐 없음(overshoot 0) ─────────────────────── */
  --ease-settle: cubic-bezier(0.22, 0.8, 0.24, 1);           /* 내려놓기 — 빠르게 와서 무겁게 선다 */
  --ease-press: cubic-bezier(0.3, 0, 0.2, 1);                /* 누름 — 손가락이 들어갈 때 */
  --ease-peel: cubic-bezier(0.55, 0, 0.7, 0.4);              /* 스티커 떼기 퇴장 — 비대칭 */
  --ease-unfold: cubic-bezier(0.32, 0.72, 0, 1);             /* 접힌 쪽지 펼침 */
  --duration-press: 90ms;
  --duration-release: 220ms;
  --duration-settle: 240ms;
  --duration-peel: 300ms;
  --duration-unfold: 260ms;
  --duration-place: 420ms;                                    /* 구간 등장 "내려놓기" — 1회 */
  --stagger-place: 60ms;
  --tilt-max: 3deg;                                           /* 커서 기울기 상한 */
}