/*
Theme Name: 아이바로교육 (aibaro-theme)
Theme URI: https://www.aibaro.kr
Author: 아이바로교육
Description: 전국의 옛이야기를 지역별 이야기 마을로 탐색하는 유아교육 통합 웹사이트 전용 블록 테마. 디자인 토큰은 theme.json과 이 파일의 :root가 함께 정의한다.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.2
Text Domain: aibaro
Tags: block-theme, education, accessibility-ready
*/

/* ─────────────────────────────────────────────────────────────────────
 * 디자인 토큰 — 브리프 §5. 값은 확정 시안에서 도출하되 WCAG AA 미달 색을
 * 보정한 것이다. 텍스트·CTA·배지에는 반드시 "접근 가능" 값을 쓴다.
 *
 * theme.json의 preset(`--wp--preset--*`)이 블록 편집기용 계약이라면,
 * 아래 `--color-*`·시맨틱 별칭은 커스텀 CSS·블록 스타일이 쓰는 계약이다.
 * 두 이름 체계가 같은 값을 가리키도록 preset을 참조한다.
 * ───────────────────────────────────────────────────────────────────── */
:root {
	/* ── 원자 팔레트 (실패색은 장식 전용) ───────────────────────────── */
	--color-ink: var(--wp--preset--color--ink);
	--color-brown: var(--wp--preset--color--brown);
	--color-muted: var(--wp--preset--color--muted); /* 장식 전용 — 소형 텍스트 금지 */
	--color-muted-accessible: var(--wp--preset--color--muted-accessible); /* 5.74 */
	--color-cream: var(--wp--preset--color--cream);
	--color-cream-2: var(--wp--preset--color--cream-2);
	--color-line: var(--wp--preset--color--line);
	--color-white: var(--wp--preset--color--white);
	--color-blue: var(--wp--preset--color--blue); /* 장식 — 흰 텍스트 금지 */
	--color-blue-deep: var(--wp--preset--color--blue-deep); /* 5.46 — CTA·텍스트 */
	--color-blue-soft: var(--wp--preset--color--blue-soft);
	--color-green: var(--wp--preset--color--green); /* 장식 */
	--color-green-deep: var(--wp--preset--color--green-deep); /* 5.98 — 배지 텍스트 */
	--color-green-soft: var(--wp--preset--color--green-soft);
	--color-yellow: var(--wp--preset--color--yellow);
	--color-yellow-soft: var(--wp--preset--color--yellow-soft);
	--color-coral: var(--wp--preset--color--coral); /* 3.0 — 장식·보더 전용 */
	--color-coral-soft: var(--wp--preset--color--coral-soft);
	--color-coral-deep: var(--wp--preset--color--coral-deep); /* 5.44 — 에러 텍스트 */
	--color-lav: var(--wp--preset--color--lav);
	--color-lav-soft: var(--wp--preset--color--lav-soft);

	/* ── 시맨틱 (AA 통과값만 — 실제 UI엔 이걸 쓴다) ──────────────────── */
	--text-strong: var(--color-ink);
	--text-body: var(--color-ink);
	--text-secondary: var(--color-brown);
	--text-muted: var(--color-muted-accessible);
	--bg-page: var(--color-cream);
	--bg-surface: var(--color-white);
	--bg-subtle: var(--color-cream-2);
	--border: var(--color-line);
	--brand: var(--color-blue-deep);
	--cta-primary-bg: var(--color-blue-deep);
	--cta-primary-fg: var(--color-white);
	--cta-secondary-bg: var(--color-yellow);
	--cta-secondary-fg: var(--color-ink);
	--badge-free-bg: var(--color-green-soft);
	--badge-free-fg: var(--color-green-deep);
	/*
	 * NEW 배지는 `--color-coral-deep`(에러 텍스트)을 쓰고 있었는데 연코랄
	 * 위에서 대비가 4.47:1로 4.5:1에 못 미쳤다. 에러 텍스트 색은 흰 바탕
	 * 기준이라 그대로 두고, 배지 전용으로 한 단계 더 어두운 값을 쓴다.
	 */
	--badge-new-bg: var(--color-coral-soft);
	--badge-new-fg: var(--color-coral-darker);
	--text-error: var(--color-coral-deep);

	/*
	 * 페이지·세계관별 오버라이드 지점(story_world 테마 색 토큰).
	 * 배지색은 여기서 바꾸지 않는다 — 테마 스왑에서 제외(의미 붕괴 방지).
	 */
	--accent: var(--color-blue-deep);

	/* ── 타이포 ──────────────────────────────────────────────────────
	 * 전 페이지 Pretendard 단일 계열. `--font-serif`는 제목 사용처의
	 * 별칭으로만 유지하되 값은 Pretendard다. */
	--font-sans: var(--wp--preset--font-family--sans);
	--font-serif: var(--wp--preset--font-family--sans);
	--font-size-xs: var(--wp--preset--font-size--xs);
	--font-size-sm: var(--wp--preset--font-size--sm);
	--font-size-base: var(--wp--preset--font-size--base);
	--font-size-md: var(--wp--preset--font-size--md);
	--font-size-lg: var(--wp--preset--font-size--lg);
	--font-size-xl: var(--wp--preset--font-size--xl);
	--font-size-2xl: var(--wp--preset--font-size--2xl);
	--font-size-3xl: var(--wp--preset--font-size--3xl);
	--font-size-4xl: var(--wp--preset--font-size--4xl);

	/* ── 간격·반경 ───────────────────────────────────────────────────── */
	--space-1: var(--wp--preset--spacing--10);
	--space-2: var(--wp--preset--spacing--20);
	--space-3: var(--wp--preset--spacing--30);
	--space-4: var(--wp--preset--spacing--40);
	--space-5: var(--wp--preset--spacing--50);
	--space-6: var(--wp--preset--spacing--60);
	--space-8: var(--wp--preset--spacing--70);
	--radius-sm: var(--wp--custom--radius--sm);
	--radius-md: var(--wp--custom--radius--md);
	--radius-lg: var(--wp--custom--radius--lg);
	--radius-full: var(--wp--custom--radius--full);

	/* ── 레이아웃 ─────────────────────────────────────────────────────── */
	--chrome-max-width: var(--wp--custom--chrome--max-width); /* 헤더·푸터 1200 */
	--document-max-width: var(--wp--custom--document--max-width); /* 법적 문서 760 */
	--touch-min: var(--wp--custom--touch--min); /* 44px */
}

/* ─────────────────────────────────────────────────────────────────────
 * 전역 기본 — 기존 프로젝트 `globals.css` 이식.
 * ───────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--space-3);
}

/* 키보드 포커스는 항상 보이게 — 접근성 게이트(PRD §15.1). */
:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* 조작 요소 최소 터치 영역 44px — 유아 대상 절대 원칙. */
.aibaro-touch,
.wp-block-button__link,
.wp-block-navigation-item__content {
	min-height: var(--touch-min);
	display: inline-flex;
	align-items: center;
}

/* 본문 바로가기 — 키보드 사용자가 네비를 건너뛴다. 포커스 전엔 숨김. */
.skip-link {
	position: absolute;
	left: var(--space-3);
	top: -60px;
	z-index: 100;
	padding: var(--space-2) var(--space-4);
	background: var(--bg-surface);
	color: var(--brand);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: var(--space-3);
}

/* 스크린리더 전용 — 뷰어 숨은 h1 등. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}