/* ==========================================================================
   tokens.css — 디자인 토큰 (CSS 변수)
   백서 §3, §4, §5, 부록 A 기반
   ========================================================================== */

:root {
	/* ===== 컬러 - 메인 (브랜드 핵심 3색) ===== */
	--cheecle-yellow:    #F8C31F;  /* 옐로우 - 브랜드 자산, CTA */
	--ink-blue:          #1A3A52;  /* 잉크블루 - 메인 텍스트, 헤더 */
	--cheecle-honey:     #896212;  /* 허니브라운 - 로고 외곽선 */
	--cheecle-ivory:     #FAF7F2;  /* 아이보리 - 따뜻한 배경 */
	--cheecle-cream:     #FEF8E0;  /* 옐로우 옅은 톤 - 강조 영역 */

	/* ===== 컬러 - 잉크블루 변형 ===== */
	--ink-blue-dark:     #0F2436;
	--ink-blue-mid:      #2C5170;
	--ink-blue-light:    #4A7A9A;
	--ink-blue-pale:     #A8C8E0;

	/* ===== 컬러 - 옐로우 호버/액티브 ===== */
	--yellow-hover:      #E5B015;
	--yellow-active:     #C99A0F;

	/* ===== 컬러 - 텍스트 ===== */
	--text-primary:      #1A3A52;  /* 본문 - 잉크블루 */
	--text-secondary:    #5C4720;  /* 보조 - 따뜻한 갈색 */
	--text-tertiary:     #8C7651;  /* 힌트, 캡션 */
	--text-disabled:     #C9BFB2;
	--text-inverse:      #FAF7F2;  /* 어두운 배경 위 */
	--text-accent:       #F8C31F;  /* 어두운 배경 위 강조 */

	/* ===== 컬러 - 배경 ===== */
	--bg-primary:        #FFFFFF;
	--bg-secondary:      #FAF7F2;
	--bg-tertiary:       #FEF8E0;  /* 옐로우 영역 */
	--bg-dark:           #1A3A52;  /* 잉크블루 영역 */
	--bg-darkest:        #0F2436;

	/* ===== 컬러 - 보더 ===== */
	--border-light:      #E5DDD0;
	--border-medium:     #D9C9A8;
	--border-strong:     #B8A175;
	--border-ink:        #1A3A52;

	/* ===== 컬러 - 시스템 ===== */
	--success:           #5B8A47;
	--warning:           #C77D2D;
	--error:             #B5443A;
	--info:              #4A7A9A;

	/* ===== 폰트 ===== */
	--font-body:         'Pretendard Variable', 'Pretendard', -apple-system,
	                     BlinkMacSystemFont, 'Apple SD Gothic Neo',
	                     'Noto Sans KR', sans-serif;
	--font-display:      'Pretendard Variable', 'Pretendard',
	                     'Noto Serif KR', serif;
	--font-numeric:      'Inter', 'Pretendard Variable', 'Pretendard',
	                     sans-serif;

	/* ===== 폰트 사이즈 (40대 가독성 — 본문 17px) ===== */
	--fs-h1:             36px;
	--fs-h2:             28px;
	--fs-h3:             22px;
	--fs-h4:             18px;
	--fs-body:           17px;
	--fs-body-sm:        15px;
	--fs-caption:        13px;
	--fs-button:         16px;

	/* ===== 폰트 무게 ===== */
	--fw-regular:        400;
	--fw-medium:         500;
	--fw-semibold:       600;

	/* ===== 행간 ===== */
	--lh-tight:          1.3;
	--lh-snug:           1.4;
	--lh-normal:         1.6;
	--lh-relaxed:        1.7;

	/* ===== 스페이싱 (8px 기반) ===== */
	--space-1:           4px;
	--space-2:           8px;
	--space-3:           12px;
	--space-4:           16px;
	--space-5:           24px;
	--space-6:           32px;
	--space-7:           48px;
	--space-8:           64px;
	--space-9:           96px;
	--space-10:          128px;

	/* ===== 모서리 ===== */
	--radius-sm:         4px;
	--radius-md:         8px;
	--radius-lg:         12px;
	--radius-xl:         20px;
	--radius-full:       999px;

	/* ===== 그림자 (최소) ===== */
	--shadow-sm:         0 1px 2px rgba(26, 58, 82, 0.05);
	--shadow-md:         0 2px 8px rgba(26, 58, 82, 0.08);

	/* ===== 컨테이너 너비 ===== */
	--container-max:     1200px;
	--container-narrow:  720px;
	--container-wide:    1440px;

	/* ===== 트랜지션 ===== */
	--transition-fast:   150ms ease;
	--transition-base:   250ms ease;
}

/* ===== 모바일 폰트 사이즈 조정 ===== */
@media (max-width: 640px) {
	:root {
		--fs-h1: 28px;
		--fs-h2: 24px;
		--fs-h3: 20px;
	}
}