/* ============================================================
   청양다돌봄 디자인 토큰 (SSOT: 청양다돌봄 퍼블리싱 저장소 design-system/DESIGN.md v1.18)
   ISSUE-19(WBS-M1-03)에서 이관. 원본은 Tailwind 커스텀 컬러로도 제공되나
   이 프로젝트는 Tailwind CDN을 쓰지 않으므로 CSS 커스텀 프로퍼티만 이관함.
   ============================================================ */
:root {
	/* -- 브랜드 핑크 -- */
	--cy-pink-5: #fffcfc;
	--cy-pink-10: #fdeef1;
	--cy-pink-30: #f6bebe;
	--cy-pink-60: #ff8ea8;
	--cy-pink-100: #e0476a;
	--cy-pink-hover: #f16a89;

	/* -- 블루 -- */
	--cy-blue-5: #eef6ff;
	--cy-blue-30: #0083ff;
	--cy-blue-60: #2a44c8;
	--cy-navy-70: #234363;
	--cy-navy-80: #194173;
	--cy-navy-100: #08264c;

	/* -- 그레이 -- */
	--cy-gray-10: #f5f5f8;
	--cy-gray-20: #ebeced;
	--cy-gray-30: #dcdcdc;
	--cy-gray-40: #c0c0c0;
	--cy-gray-50: #999999;
	--cy-gray-70: #666666;
	--cy-gray-90: #333333;

	/* -- 옐로 -- */
	--cy-yellow-10: #fffcef;
	--cy-yellow-20: #f8ebae;
	--cy-yellow-30: #ebda89;
	--cy-yellow-100: #e08c47;

	/* -- 기본 -- */
	--cy-white: #ffffff;
	--cy-black: #000000;
	--cy-page-bg: #f8f9fd;

	/* -- 시맨틱 별칭 -- */
	--cy-color-primary: var(--cy-pink-100);
	--cy-color-primary-hover: var(--cy-pink-hover);
	--cy-color-text: var(--cy-gray-90);
	--cy-color-text-muted: var(--cy-gray-50);
	--cy-color-border: var(--cy-gray-30);
	--cy-color-focus: var(--cy-pink-100);

	/* -- 타이포. Pretendard 자체 호스팅은 후속 과제(스펙 §6) -- */
	--cy-font-sans: 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;

	/* -- 라운드 -- */
	--cy-radius-control: 6px;
	--cy-radius-badge: 8px;
	--cy-radius-panel: 16px;

	/* -- 간격 스케일 -- */
	--cy-space-6: 6px;
	--cy-space-10: 10px;
	--cy-space-20: 20px;
	--cy-space-30: 30px;
	--cy-space-40: 40px;
	--cy-space-50: 50px;
	--cy-space-60: 60px;
	--cy-space-80: 80px;
	--cy-space-100: 100px;

	/* -- 반응형 브레이크포인트(참고용, 매체 쿼리는 1024px로 직접 기술) -- */
	--cy-breakpoint-lg: 1024px;
}