/* ==========================================================================
   MODULE: base/variables
   전역 디자인 토큰. 색상/타이포/간격을 바꿀 때는 이 파일만 수정하면 됨.
   ========================================================================== */

:root {
	/* --- 컬러: Ink Navy(신뢰) + Amber(절제된 강조) + Slate Blue(보조/데이터) --- */
	--wzs-ink: #101828;
	--wzs-ink-soft: #3a4152;
	/* 보조 텍스트 회색. 예전 값 #667085 는 흰 배경에서는 겨우 통과했지만 회색 배경
	   (--wzs-bg-alt #eef0f4, --wzs-blue-soft #e4e9fb) 위에서 4.36~4.39:1 로 떨어져
	   14px 이하 본문 기준(4.5:1)에 미달했다 — 요금 주석, 섹션 눈썹, 보고서 예시의
	   작은 글씨가 여기 걸렸다. 한 단계만 어둡게 내려 어느 배경에서든 4.9:1 이상이 된다.
	   더 밝게 되돌리려면 이 색을 쓰는 작은 글씨들의 대비를 다시 잴 것. */
	--wzs-ink-muted: #5c6473;
	--wzs-bg: #f7f8fa;
	--wzs-bg-alt: #eef0f4;
	--wzs-white: #ffffff;
	--wzs-border: #e2e5eb;

	/* 앰버 사용 규칙 — 강조색이 도처에 있으면 아무것도 강조되지 않는다.
	   다음 두 경우에만 쓸 것:
	     (1) 주요 행동  — 기본 CTA 버튼, 추천 요금제(featured)
	     (2) 현재/진행 상태 — 진행률 바, 타임라인의 현재 단계, 진행률 수치
	   그 외 장식(리스트 불릿, 링크 화살표 등)에는 잉크 계열을 쓸 것.
	   예외적으로 카피 강조(.wzs-hl, 카드 태그라인)는 허용하되 화면당 1~2회로 제한. */
	--wzs-amber: #d98c1f;
	--wzs-amber-soft: #f7e6c8;
	/* 앰버 계열 글씨색. 예전 값 #7a4e0e 는 채도가 낮아 주황이 아니라 탁한 갈색으로 보인다는
	   지적을 받아 채도를 끝까지 올린 짙은 주황으로 교체했다. 흰 배경 대비 5.4:1,
	   연앰버 배경(--wzs-amber-soft) 대비 4.4:1 로 본문 크기에서도 읽힌다.
	   더 밝게(=주황에 가깝게) 가려면 대비가 떨어지므로 큰 글씨에만 --wzs-amber 를 쓸 것.
	   #a35f00 에서 한 번 더 내린 이유: 흰 배경에서는 통과했지만 회색 배경(--wzs-bg-alt)의
	   "요금" 눈썹과 연앰버 배경(--wzs-amber-soft)의 보고서 진행률 숫자가 4.39~4.41:1 로
	   미달이었다. 지금 값은 흰색 5.8:1 / 회색 4.8:1 / 연앰버 4.8:1 로 전부 통과한다. */
	--wzs-amber-ink: #9a5a00;

	--wzs-blue: #3b5bdb;
	--wzs-blue-soft: #e4e9fb;

	--wzs-success: #2f9e5b;
	--wzs-danger: #d64545;

	/* --- 타이포 --- */
	--wzs-font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
	--wzs-font-display: 'Space Grotesk', 'Pretendard', -apple-system, sans-serif;

	--wzs-fs-sm: 0.875rem;
	--wzs-fs-base: 1rem;
	--wzs-fs-lg: 1.125rem;
	--wzs-fs-xl: 1.375rem;
	--wzs-fs-2xl: 1.75rem;
	--wzs-fs-3xl: 2.25rem;
	--wzs-fs-4xl: 3rem;

	--wzs-lh-tight: 1.3;
	--wzs-lh-base: 1.6;
	--wzs-lh-article: 1.9;

	/* --- 간격/레이아웃 --- */
	--wzs-space-1: 4px;
	--wzs-space-2: 8px;
	--wzs-space-3: 16px;
	--wzs-space-4: 24px;
	--wzs-space-5: 32px;
	--wzs-space-6: 48px;
	--wzs-space-7: 64px;
	--wzs-space-8: 96px;

	--wzs-container: 1120px;
	--wzs-container-article: 760px;
	--wzs-radius-sm: 6px;
	--wzs-radius-md: 12px;
	--wzs-radius-lg: 20px;

	--wzs-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--wzs-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
	--wzs-shadow-lg: 0 20px 48px rgba(16, 24, 40, 0.14);

	/* --- 모션: 스크롤 리빌/호버 인터랙션 공용 타이밍 --- */
	--wzs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--wzs-duration-fast: 160ms;
	--wzs-duration-base: 320ms;
	--wzs-duration-slow: 560ms;
}