/* site/css/tokens.css — 꾸메땅 디자인 토큰
   근거: docs/팔레트_실측_v1.md (현장사진 실측) · assets/brand/logo.svg (원형 배지·검정 단색)
   ⚠️ 색을 바꾸려면 실측 문서를 먼저 고친다. 여기서 지어내지 않는다. */

:root {
  /* ── 바탕 ─────────────────────────────────────────── */
  --greige:      #EAE6DE;   /* 공간의 지배색 */
  --greige-lift: #F4F2ED;   /* 페이지 배경 */
  --paper:       #FFFFFF;
  --tile:        #D8D2CB;   /* 회색 타일 */
  --ink:         #141A22;   /* 로고와 같은 계열의 근검정 */
  --ink-2:       #454B52;
  --ink-3:       #6B6862;
  --hair:        #D5D0C7;

  /* ── 실측 액센트 (docs/팔레트_실측_v1.md §2) ────────── */
  --oak:         #B29576;   /* 모든 방의 바탕 재료. 5~12% */
  --olive:       #5E6042;   /* 대주도관 의자 2.83% */
  --burgundy:    #58393B;   /* 소주도관 의자 4.44% */
  --blue:        #5A76A8;   /* 두뇌훈련실 헤드밴드 1.31% */
  --redrust:     #5B3124;   /* 복도 벤치 6.47% — 최고 채도 */

  --olive-soft:  #EDEEE6;
  --burgundy-soft:#F2EBEB;
  --blue-soft:   #E9EDF4;
  --redrust-soft:#F3EAE6;

  /* ── 서체 ─────────────────────────────────────────── */
  --f-brand: "Exo", "IBM Plex Sans KR", system-ui, sans-serif;      /* 로고 레터링과 동일 */
  --f-disp:  "SUIT", "IBM Plex Sans KR", system-ui, sans-serif;
  --f-body:  "IBM Plex Sans KR", system-ui, -apple-system, sans-serif;

  --t-hero:  clamp(2.25rem, 6.2vw, 4.25rem);
  --t-h2:    clamp(1.6rem, 3.4vw, 2.5rem);
  --t-h3:    clamp(1.15rem, 2vw, 1.4rem);
  --t-lead:  clamp(1.02rem, 1.6vw, 1.2rem);
  --t-body:  1rem;
  --t-small: .875rem;
  --t-micro: .78rem;

  --lh-tight: 1.22;
  --lh-body:  1.75;   /* 한글은 넉넉해야 읽힌다 */

  /* ── 간격 ─────────────────────────────────────────── */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --wrap:   1120px;
  --wrap-n: 720px;   /* 읽기 폭 */
  --gut:    clamp(1.25rem, 4vw, 2.5rem);

  /* ── 모티프: 원 · 아치 · 둥근 모서리 ────────────────── */
  /* 로고가 원형 배지이고, 실제 공간에 아치 개구부가 두 곳 있다 */
  --r-s:    8px;
  --r-m:    14px;
  --r-l:    24px;
  --r-arch: 999px 999px 0 0;   /* 아치 — 위가 반원 */
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(20,26,34,.05), 0 4px 16px rgba(20,26,34,.05);
  --shadow-2: 0 2px 6px rgba(20,26,34,.07), 0 14px 40px rgba(20,26,34,.09);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .32s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .001s; }
}