/**
 * PlanStudy Design Tokens
 *
 * Source of truth: docs/design-system.md (프로젝트 루트 기준)
 * 이 파일의 값이 문서와 달라지면 문서를 먼저 갱신한 뒤 이 파일을 맞춘다.
 */

:root {
	/* ---- Color: Core ---- */
	--ps-color-primary: #1B2A4A;          /* Primary Navy */
	--ps-color-primary-secondary: #2C3E63; /* Secondary Navy (hover, gradient) */
	--ps-color-accent: #2BA89D;           /* Accent Teal (진도율, 체크, 링크) */

	/* Action Accent — conversion CTA(무료 학습진단 신청/상담신청) 전용.
	   일반 버튼이나 장식 요소에 사용하지 않는다. (docs/design-system.md 2장) */
	--ps-color-action: #FF7A59;

	--ps-color-background: #FAF7F2; /* Warm Ivory 페이지 배경 */
	--ps-color-surface: #FFFFFF;    /* 카드/패널 배경 */
	--ps-color-text: #1C2230;       /* 기본 텍스트 */
	--ps-color-text-muted: #6B7280; /* 보조 텍스트 */
	--ps-color-border: #E7E2D9;     /* 카드/입력 테두리 */

	/* ---- Color: Semantic ---- */
	--ps-color-success: #2E9E5B; /* 완료/달성 */
	--ps-color-warning: #E8A33D; /* 시험 D-day 임박 */
	--ps-color-alert: #E25C5C;   /* 오답/미완료 */

	/* ---- Color: Tints (배지/보조 배경) ---- */
	--ps-color-accent-tint: #DDF2EF;
	--ps-color-warning-tint: #FBEBD2;
	--ps-color-success-tint: #DFF3E6;
	--ps-color-alert-tint: #FBE3E3;
	--ps-color-surface-alt: #F3EEE4; /* 진행바 트랙, 섹션 구분 배경 */

	/* ---- Typography ---- */
	--ps-font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Noto Sans KR', sans-serif;

	--ps-font-size-h1: 52px;
	--ps-font-size-h1-mobile: 32px;
	--ps-font-size-h2: 40px;
	--ps-font-size-h2-mobile: 26px;
	--ps-font-size-h3: 22px;
	--ps-font-size-h3-mobile: 19px;
	--ps-font-size-body: 17px;
	--ps-font-size-body-mobile: 16px;
	--ps-font-size-button: 16px;
	--ps-font-size-caption: 14px;

	--ps-font-weight-regular: 400;
	--ps-font-weight-medium: 500;
	--ps-font-weight-bold: 700;
	--ps-font-weight-heavy: 800;

	--ps-line-height-heading: 1.2;
	--ps-line-height-hero: 1.2;
	--ps-line-height-body: 1.7;
	--ps-line-height-tight: 1.3;

	/* ---- Spacing ---- */
	--ps-space-1: 4px;
	--ps-space-2: 8px;
	--ps-space-3: 12px;
	--ps-space-4: 16px;
	--ps-space-5: 20px;
	--ps-space-6: 24px;
	--ps-space-8: 32px;
	--ps-space-10: 40px;

	/* ---- Radius ---- */
	--ps-radius-sm: 8px;
	--ps-radius-md: 12px;
	--ps-radius-lg: 16px;
	--ps-radius-pill: 999px;

	/* ---- Shadow (navy 기반 저채도. 순검정 그림자 사용 금지) ---- */
	--ps-shadow-card: 0 2px 8px rgba(27, 42, 74, 0.08);
	--ps-shadow-elevated: 0 12px 32px rgba(27, 42, 74, 0.16);

	/* ---- Container ---- */
	--ps-container-max: 1120px;
	--ps-container-content: 720px;
	--ps-container-gutter: 20px;

	/* ---- Transition ---- */
	--ps-transition-fast: 120ms ease;
	--ps-transition-base: 200ms ease;
}

@media (max-width: 782px) {
	:root {
		--ps-font-size-h1: var(--ps-font-size-h1-mobile);
		--ps-font-size-h2: var(--ps-font-size-h2-mobile);
		--ps-font-size-h3: var(--ps-font-size-h3-mobile);
		--ps-font-size-body: var(--ps-font-size-body-mobile);
		--ps-container-gutter: 16px;
	}
}