/* ==========================================================================
   tokens.css — 디자인 토큰 (CSS 변수)
   spec: docs/p2-cheecle-design-spec.md (v3.5) + 마스터 브랜드 가이드 §3-5
   4색 시스템: 60% 아이보리 / 30% 잉크네이비 / 10% 치클오렌지 / 5% 올리브
   ========================================================================== */

:root {
	/* ===== 컬러 - 메인 (v3.5 4색 60-30-10-5) ===== */
	--cheecle-ivory:     #FAF7F2;  /* 60% - 크림 아이보리 (메인 배경) */
	--ink-blue:          #1A3A52;  /* 30% - 잉크 네이비 (본문/헤딩/보더) */
	--cheecle-yellow:    #FCA80A;  /* 10% - 치클 오렌지 (CTA/뱃지, 실제 마크 본체색) */
	--olive:             #8A9A86;  /*  5% - 올리브 그린 (Tip/액센트/배지) */
	--olive-deep:        #5B8A47;  /* 올리브 강조 */
	--cheecle-honey:     #5C4720;  /* 캡션·가이드 (v3.5 - v1.1 #896212 폐기) */
	--cheecle-cream:     #FEF8E0;  /* 옐로우 옅은 톤 - 강조 영역 (legacy) */

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

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

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

	/* ===== 컬러 - 배경 (v3.5: 순백 #FFFFFF 절대 금지) ===== */
	--bg-primary:        #FFFDF8;  /* 카드/컨테이너 (따뜻한 미색, 순백 대체) */
	--bg-secondary:      #FAF7F2;  /* 메인 페이지 배경 (이비, 60% 토대) */
	--bg-tertiary:       #FEF8E0;  /* 옐로우 영역 (legacy) */
	--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:      'Gmarket Sans', 'Pretendard Variable', 'Pretendard',
	                     'Noto Serif KR', serif;
	--font-numeric:      'Inter', 'Pretendard Variable', 'Pretendard',
	                     sans-serif;

	/* ===== 폰트 사이즈 (v3.5 옵션B: 30-40대 가독성 + H1:Body 1.875배 위계 사수) ===== */
	--fs-h1:             40px;
	--fs-h2:             32px;
	--fs-h3:             24px;
	--fs-h4:             20px;
	--fs-body:           18px;
	--fs-body-sm:        16px;
	--fs-caption:        14px;
	--fs-button:         17px;

	/* ===== 폰트 무게 ===== */
	--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;
}

/* ===== 모바일 폰트 사이즈 조정 (v3.5 옵션B) ===== */
@media (max-width: 640px) {
	:root {
		--fs-h1: 32px;  /* 18×1.78배 위계 충족 */
		--fs-h2: 26px;
		--fs-h3: 22px;
	}
}