/* ============================================================
   Travel HUIHUI — Design Tokens (전통 × 에디토리얼)
   Palette: 차콜 네이비 #202943 · 팝 핑크 #EF4D6D · 비비드 민트 #00A58C · 오프화이트 #F7F0E5
   (토큰 이름은 전통 이름을 그대로 쓴다: 먹=네이비, 연지=핑크, 비취=민트, 한지=오프화이트)
   ============================================================ */

:root {
  /* ── 연지 YEONJI (연지·홍 — 브랜드) ── 노리개 술과 매듭의 붉은빛 */
  --yeonji-50:  #FDF0F2;
  --yeonji-100: #FBDDE3;
  --yeonji-200: #F7BFCB;
  --yeonji-300: #F48DA2;   /* 옅은 핑크 — 바탕·보조선 */
  --yeonji-400: #F26C86;
  --yeonji-500: #EF4D6D;   /* 팝 핑크 — 브랜드 포인트(면·선·큰 글씨) */
  --yeonji-600: #C9304F;   /* 작은 글씨용 핑크 — 오프화이트 대비 4.6:1 */
  --yeonji-700: #8E1F36;

  /* ── 비취 BICHWI (옥·청록 — 포인트) ── 단청 뇌록과 옥 장식 */
  --bichwi-50:  #E6F6F3;
  --bichwi-100: #C2EAE3;
  --bichwi-200: #8AD6C9;
  --bichwi-300: #3FBFA8;
  --bichwi-400: #00A58C;   /* 비비드 민트 — 두 번째 포인트 */
  --bichwi-500: #00806D;   /* 작은 글씨용 민트 */
  --bichwi-600: #006254;

  /* ── 한지 HANJI (바탕) ── */
  --hanji-50:  #FBF7F0;
  --hanji-100: #F7F0E5;   /* page background — 오프화이트 */
  --hanji-200: #EEE5D6;
  --hanji-300: #DDD3C3;
  --hanji-400: #CDBB98;
  --hanji-500: #A8946F;
  --hanji-600: #7D6B4D;

  /* ── 금 GEUM (금박·장석 — 디테일) ── */
  --geum-200: #F1E2B4;
  --geum-300: #E3C77A;
  --geum-400: #CFA94E;
  --geum-500: #B08A34;
  --geum-600: #8A6A22;

  /* ── 먹 MEOK (먹·옻칠 — 글자와 현판) ── */
  --meok-900: #161C30;
  --meok-800: #202943;   /* 차콜 네이비 — 글자·선 */
  --meok-700: #333C58;
  --meok-500: #4E5672;
  --meok-400: #646B84;
  --hyeonpan:  #1F3A33;  /* 현판 테두리 (단청 석간주 위 짙은 녹) */

  /* 원칙: 오프화이트 바탕 + 차콜 네이비 글씨·선.
     팝 핑크 = 브랜드 강조(큰 제목·주요 버튼·선택된 상태·처마 술), 비비드 민트 = 상태(방문·성공·가능).
     끈·매듭·번호 같은 구조 요소는 네이비로 둔다. 금은 놋쇠 장식에만 */

  /* ── SEMANTIC ── */
  --color-bg:           var(--hanji-100);
  --color-bg-subtle:    var(--hanji-200);
  --color-surface:      #FBF7F0;
  --color-surface-tint: var(--yeonji-50);

  --color-brand:        var(--yeonji-300);
  --color-brand-dark:   var(--yeonji-600);   /* 글자로 쓰이므로 대비가 되는 진한 핑크 */
  --color-brand-light:  var(--yeonji-100);

  --color-accent:       var(--bichwi-300);
  --color-accent-dark:  var(--bichwi-500);
  --color-accent-light: var(--bichwi-100);

  --color-gold:         var(--geum-400);
  --color-rule:         rgba(32,41,67,0.14);   /* 에디토리얼 가는 선 */
  --color-rule-strong:  rgba(32,41,67,0.85);
  --color-border:       var(--hanji-300);
  --color-border-brand: var(--yeonji-200);

  --color-text-primary:   var(--meok-800);
  --color-text-secondary: var(--meok-500);
  --color-text-tertiary:  var(--meok-400);
  --color-text-inverse:   #FFFDF8;

  --color-success: #4F9F6A;
  --color-warning: #D2A23A;
  --color-error:   #C0443E;

  /* ── TYPOGRAPHY ── */
  --font-display:  'Hahmlet', 'Pretendard Variable', Pretendard, serif;   /* 제목·지명 = 함렛, 본문 = Pretendard */
  --font-heading:  'Pretendard Variable', Pretendard, -apple-system, 'Noto Sans KR', sans-serif;
  --font-body:     'Pretendard Variable', Pretendard, -apple-system, 'Noto Sans KR', sans-serif;
  --font-accent:   'Hahmlet', 'Pretendard Variable', Pretendard, serif;   /* 히어로 제목 등 한 줄짜리 강조 */

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.16em;

  /* ── SPACING ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── RADIUS ── */
  --radius-sm:   2px;
  --radius-md:   2px;
  --radius-lg:   2px;
  --radius-xl:   3px;
  --radius-2xl:  4px;
  --radius-full: 9999px;

  /* ── SHADOW ── */
  --shadow-sm:  0 1px 3px rgba(35, 28, 23, 0.08);
  --shadow-md:  0 4px 12px rgba(35, 28, 23, 0.10);
  --shadow-lg:  0 8px 28px rgba(35, 28, 23, 0.12);
  --shadow-xl:  0 16px 48px rgba(35, 28, 23, 0.16);
  --shadow-brand: 0 4px 20px rgba(239,77,109, 0.22);
  --shadow-jade:  0 4px 20px rgba(47, 127, 108, 0.25);

  /* ── MOTION ── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --dur-slower: 600ms;

  /* ── Z-INDEX ── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-fixed:   400;
}

/* ============================================================
   Global a11y / typography rules
   ============================================================ */
/* 영문 이탤릭은 유지하되, 이탤릭 폰트가 없는 한글은 억지로 기울이지 않는다 */
html { font-synthesis-style: none; }

/* 키보드 포커스는 항상 보이게 */
:focus-visible { outline: 3px solid var(--yeonji-500); outline-offset: 3px; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible {
  outline: 3px solid var(--yeonji-500) !important; outline-offset: 3px;
}

/* 본문 바로가기 */
.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 1000;
  padding: 10px 16px; border-radius: var(--radius-full);
  background: var(--yeonji-600); color: #fff; font: 600 14px/1.2 var(--font-heading);
  text-decoration: none; transition: top .15s var(--ease-out);
}
.skip-link:focus { top: 12px; }