/*
 * tokens.css — Design System Foundation
 * 색상, 타이포그래피, 간격을 바꾸고 싶으면 이 파일만 수정하면 됩니다.
 */

:root {
  /* ── Surface ── */
  --c-bg:       #F4F2EB;   /* 따뜻한 양피지 — 녹색빛 제거 */
  --c-surface:  #FDFCF7;
  --c-border:   #C8C4B0;

  /* ── Text ── */
  --c-text:     #1A2014;   /* 짙은 나무 색 */
  --c-muted:    #647558;   /* 올리브 그린 */
  --c-faint:    #9EA88C;   /* 이끼 회색 */

  /* ── Accent — 나뭇잎 초록 ── */
  --accent:        #4C7A36;
  --accent-sub:    #DDE8CC;
  --accent-text:   #305A20;

  /* ── Fixed palette ── */
  --c-blue:      #3A7868;   /* 숲 청록 */
  --c-blue-sub:  #D2EBE4;
  --c-gold:      #8A6C36;   /* 나무 갈색 */
  --c-gold-sub:  #EEE0C4;

  /* ── Locked chapter ── */
  --c-locked:    #A0A48C;
  --c-locked-bg: #E4E8DA;

  /* ── Typography ── */
  --f-sans:  'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-serif: 'Noto Serif JP', serif;

  /* ── Spacing (4px base) ── */
  --s1:  4px;   --s2:  8px;   --s3:  12px;  --s4:  16px;
  --s5:  20px;  --s6:  24px;  --s8:  32px;  --s10: 40px;
  --s12: 48px;  --s16: 64px;  --s20: 80px;  --s24: 96px;

  /* ── Radii ── */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --sh-sm:     0 2px 8px  rgba(0,0,0,0.05);
  --sh-md:     0 4px 20px rgba(0,0,0,0.08);
  --sh-accent: 0 8px 32px rgba(76,122,54,0.22);

  /* ── Layout ── */
  --max-w:  860px;
  --py:     clamp(72px, 12vw, 128px);
}

/* Korea chapter — 가을 단풍 (따뜻한 주황-갈색) */
[data-chapter="korea"] {
  --accent:      #B86040;
  --accent-sub:  #F0E0D4;
  --accent-text: #8C4028;
}

/* Japan chapter — 대나무 초록 */
[data-chapter="japan"] {
  --accent:      #5A8040;
  --accent-sub:  #DDE8CC;
  --accent-text: #3A6028;
}

/* Europe chapter — 이끼 청록 */
[data-chapter="europe"] {
  --accent:      #3A7060;
  --accent-sub:  #D0E8E0;
  --accent-text: #204E42;
}