/* ==========================================================================
   Cute SS 设计 tokens：颜色 / 像素描边 / 圆角 / 字体栈 / 工具类
   主色与强调色可被 Customizer 输出的 :root 覆盖（inc/customizer.php）。
   ========================================================================== */

/* 本地打包字体（Task 12 下载/放置文件；缺失时浏览器自动回退字体栈，不报错） */
@font-face {
	font-family: 'Silkscreen';
	src: url('../fonts/Silkscreen.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Press Start 2P';
	src: url('../fonts/PressStart2P-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Muyao Softbrush';
	src: url('../fonts/Muyao-Softbrush.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}

:root {
	/* 配色：pastel 粉 / 奶油白 / 薄荷绿 */
	--cute-primary: #ff9ebb;
	--cute-primary-soft: #ffd6e4;
	--cute-accent: #7fd8c0;
	--cute-accent-soft: #d2f3ea;
	--cute-cream: #fff8f0;
	--cute-paper: #fffdf8;
	--cute-white: #ffffff;
	--cute-ink: #5b4a52;
	--cute-ink-soft: #9b8890;
	--cute-line: #f3d9e2;
	--cute-danger: #e0607e;
	--cute-success: #4fae8f;

	/* 阶梯式像素描边（box-shadow 实现：四角留空形成阶梯缺角） */
	--cute-px: 4px;
	--cute-px-border:
		0 calc(-1 * var(--cute-px)) 0 0 var(--cute-ink),
		0 var(--cute-px) 0 0 var(--cute-ink),
		calc(-1 * var(--cute-px)) 0 0 0 var(--cute-ink),
		var(--cute-px) 0 0 0 var(--cute-ink);
	--cute-px-shadow: 6px 6px 0 0 rgba(91, 74, 82, 0.15);

	/* 圆角与间距 */
	--cute-radius: 10px;
	--cute-radius-sm: 6px;
	--cute-gap: 1.5rem;

	/* 字体栈 */
	--cute-font-pixel: 'Silkscreen', 'Press Start 2P', 'Courier New', monospace;
	--cute-font-body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif;
	--cute-font-hand: 'Muyao Softbrush', 'STXingkai', 'KaiTi', 'STKaiti', cursive;

	/* 布局 */
	--cute-max-width: 1120px;
	--cute-content-width: 720px;
}

/* 阶梯像素描边卡片 */
.pixel-frame {
	position: relative;
	background: var(--cute-white);
	margin: var(--cute-px);
	box-shadow: var(--cute-px-border), var(--cute-px-shadow);
}

/* 像素按钮 */
.pixel-btn {
	display: inline-block;
	font-family: var(--cute-font-pixel);
	font-size: 0.7rem;
	line-height: 1;
	letter-spacing: 0.05em;
	color: var(--cute-white);
	background: var(--cute-primary);
	border: 3px solid var(--cute-ink);
	border-radius: 0;
	padding: 0.9em 1.5em;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 3px 3px 0 0 var(--cute-ink);
	transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
}

.pixel-btn:hover,
.pixel-btn:focus-visible {
	background: var(--cute-accent);
	color: var(--cute-ink);
}

.pixel-btn:active {
	transform: translate(3px, 3px);
	box-shadow: none;
}

.pixel-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 可访问性：仅屏幕阅读器可见 */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 0.75em 1em;
	clip: auto;
	z-index: 100000;
	background: var(--cute-white);
	color: var(--cute-ink);
	border: 3px solid var(--cute-ink);
}