/* ============================================================
   GW2 입문 가이드 — Design Tokens
   tokens.css
   모든 색상/타이포/간격/반경은 여기서만 정의한다
   ============================================================ */

:root {

  /* ── 색상: 배경 ─────────────────────────── */
  --bg-canvas:      #f6f2ea;   /* 전체 페이지 배경 */
  --bg-surface:     #fffdfa;   /* 카드, 패널 표면 */
  --bg-alt:         #efe7da;   /* 강조 배경, 아이콘 배경 */
  --bg-panel:       #f8f5ef;   /* 유틸 스트립, 사이드바 */
  --bg-hero:        #ebe2d4;   /* 히어로 섹션 */
  --bg-deep:        #4d3b2b;   /* 다크 밴드 (로드맵 등) */

  /* ── 색상: 텍스트 ─────────────────────────── */
  --text-strong:    #1f2429;   /* 헤딩, 강조 본문 */
  --text-body:      #3c434b;   /* 기본 본문 */
  --text-soft:      #68707a;   /* 보조 설명, 캡션 */
  --text-inv:       #f7f5f1;   /* 다크 배경 위 텍스트 */

  /* ── 색상: 선 ─────────────────────────── */
  --line-soft:      #ddd3c4;
  --line-strong:    #bca98b;

  /* ── 색상: 브랜드 ─────────────────────────── */
  --bronze:         #8e6d45;   /* 기본 액션 컬러 */
  --gold:           #b58a45;   /* 강조, 호버, 언더라인 */
  --deep:           #4d3b2b;   /* 다크 포인트 */
  --red:            #8f3d34;   /* 경고, 위험 선택 */

  /* ── 색상: 상태 ─────────────────────────── */
  --state-info:     #2d5a8e;
  --state-success:  #546b3d;
  --state-warning:  #8b5e2a;
  --state-danger:   #8a3d34;

  /* ── 색상: 그림자 ─────────────────────────── */
  --shadow-soft:    0 8px 24px rgba(45, 35, 24, 0.07);
  --shadow-card:    0 10px 32px rgba(45, 35, 24, 0.10);
  --shadow-float:   0 18px 48px rgba(45, 35, 24, 0.16);

  /* ── 타이포: 폰트 패밀리 ─────────────────── */
  --ff-head: 'Noto Serif KR', 'Cormorant Garamond', Georgia, serif;
  --ff-body: 'Noto Sans KR', 'Pretendard', 'Apple SD Gothic Neo', sans-serif;

  /* ── 타이포: 굵기 ─────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-bold:      700;

  /* ── 타이포: 스케일 (데스크탑) ──────────────
     형식: font-size / line-height               */
  --text-hero:    56px;  --lh-hero:    60px;
  --text-h1:      42px;  --lh-h1:      50px;
  --text-h2:      30px;  --lh-h2:      38px;
  --text-h3:      22px;  --lh-h3:      30px;
  --text-h4:      18px;  --lh-h4:      26px;
  --text-lg:      18px;  --lh-lg:      30px;
  --text-base:    16px;  --lh-base:    28px;
  --text-sm:      14px;  --lh-sm:      22px;
  --text-xs:      12px;  --lh-xs:      18px;

  /* ── 간격 스케일 ─────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* ── 레이아웃 너비 ─────────────────────────── */
  --w-shell:    1440px;   /* 전체 셸 최대 너비 */
  --w-content:  1200px;   /* 콘텐츠 최대 너비 */
  --w-read:     740px;    /* 본문 읽기 최적 너비 */
  --w-sidebar:  272px;    /* 좌측 사이드바 */

  /* ── 반경 ─────────────────────────── */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-pill: 999px;

  /* ── 전환 ─────────────────────────── */
  --ease-default: 180ms ease;
  --ease-slow:    280ms ease;
}