/* 멍코치 디자인 토큰.
   팔레트는 실제 스티커시트(ver.sticker.svg)에서 뽑은 값이다.
   DESIGN.md의 primary는 오렌지(#8f4e00)로 적혀 있지만, 최신 로고(7/27)와
   스티커시트가 옐로우+잉크브라운이라 실물 기준으로 간다. */
:root {
  /* 잉크 */
  --ink:        #23190F;
  --ink-80:     #4A3E30;
  --ink-60:     #6E5F4D;
  --ink-40:     #8A7A64;
  --ink-25:     #B7A78F;

  /* 종이 */
  --paper:      #FBF5EA;
  --paper-2:    #F2ECE1;
  --paper-3:    #ECE6DB;
  --paper-hi:   #FFF8EC;
  --paper-warm: #F1E9DA;

  /* 액센트 */
  --yellow:     #FFE08A;
  --yellow-dp:  #F5CB5C;
  --kakao:      #FEE500;
  --gold:       #B97E3C;
  --mint:       #BFE8CE;
  --peach:      #FFC9A3;
  --coral:      #F0906B;
  --lavender:   #DCD0F2;
  --sky:        #BFDCF2;

  /* 타이포 스케일 — 유동값, 뷰포트에 맞춰 늘어난다 */
  --t-display: clamp(2.5rem, 1.2rem + 5.6vw, 5.5rem);
  --t-h1:      clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
  --t-h2:      clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --t-h3:      clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --t-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* 간격 — 8px 기준 리듬 */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-6: 3rem;    --s-8: 4rem;   --s-12: 6rem;   --s-16: 8rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 62ch;

  /* 형태 */
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* 모션 — impeccable의 "이미 보이는 상태에서 시작하는 지수 이즈아웃" */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 180ms; --dur-2: 320ms; --dur-3: 560ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }

/* 브라우저가 그리는 표면도 디자인에 포함된다 (impeccable craft floor) */
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
:root { accent-color: var(--ink); caret-color: var(--ink); scrollbar-color: var(--ink-25) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-25); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-40); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}