/* =========================================================
  サイト全体で共有するテーマ定義
  - フォント補正
  - 色 / 線幅 / 角丸 / レイアウト寸法
  - 色は `hwb()` を直接書いて、エディタのカラーピッカーで触りやすくする
========================================================= */

@font-face {
	font-family: "Courier Prime Adjusted";
	src:
		local("Courier Prime"),
		url("/assets/fonts/courier-prime-400.woff2") format("woff2"),
		url("/assets/fonts/courier-prime-400.ttf") format("truetype");
	font-weight: 400;
	font-display: block;
	ascent-override: 85%;
	descent-override: 15%;
	line-gap-override: 0%;
	size-adjust: 120%;
}

@font-face {
	font-family: "Courier Prime Adjusted";
	src:
		local("Courier Prime Bold"),
		local("Courier Prime"),
		url("/assets/fonts/courier-prime-700.woff2") format("woff2"),
		url("/assets/fonts/courier-prime-700.ttf") format("truetype");
	font-weight: 700;
	font-display: block;
	ascent-override: 85%;
	descent-override: 15%;
	line-gap-override: 0%;
	size-adjust: 120%;
}

@font-face {
	font-family: "Zen Kaku Gothic New";
	src:
		local("Zen Kaku Gothic New Regular"),
		local("Zen Kaku Gothic New"),
		url("/assets/fonts/zen-kaku-gothic-new-400.woff2") format("woff2"),
		url("/assets/fonts/zen-kaku-gothic-new-400.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: block;
}

@font-face {
	font-family: "Zen Kaku Gothic New";
	src:
		local("Zen Kaku Gothic New Medium"),
		local("Zen Kaku Gothic New"),
		url("/assets/fonts/zen-kaku-gothic-new-500.woff2") format("woff2"),
		url("/assets/fonts/zen-kaku-gothic-new-500.ttf") format("truetype");
	font-style: normal;
	font-weight: 500;
	font-display: block;
}

@font-face {
	font-family: "Zen Kaku Gothic New";
	src:
		local("Zen Kaku Gothic New Bold"),
		local("Zen Kaku Gothic New"),
		url("/assets/fonts/zen-kaku-gothic-new-700.woff2") format("woff2"),
		url("/assets/fonts/zen-kaku-gothic-new-700.ttf") format("truetype");
	font-style: normal;
	font-weight: 700;
	font-display: block;
}

@font-face {
	font-family: "Zen Maru Gothic";
	src:
		local("Zen Maru Gothic Bold"),
		local("Zen Maru Gothic"),
		url("/assets/fonts/zen-maru-gothic-700.woff2") format("woff2"),
		url("/assets/fonts/zen-maru-gothic-700.ttf") format("truetype");
	font-style: normal;
	font-weight: 700;
	font-display: block;
}

:root {
	color-scheme: light;

	--max: 1060px;
	--measure: 42rem;
	--measure-wide: 54rem;
	--page-gutter: 32px;
	--page-gutter-compact: 24px;
	--section-padding: 16px;
	--grid-gap: 14px;
	/* 固定ヘッダーの初期値。実際の値は `site.js` で測って上書きする */
	--header-offset: 72px;
	--border-thin: 1px;
	--border-regular: 2px;
	--radius-xs: 8px;
	--radius-sm: 10px;
	--radius-md: 12px;
	--radius-lg: 14px;
	--radius-xl: 18px;
	--radius-pill: 999px;
	--font-body:
		"Courier Prime Adjusted", "Zen Kaku Gothic New",
		"Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	--font-heading:
		"Courier Prime Adjusted", "Zen Maru Gothic", "Zen Kaku Gothic New",
		"Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

	/* -------------------------------------------------------
	  色の正本
	  値を直接 `hwb()` で書くことで、VS Code などの色プレビュー対象にする
	------------------------------------------------------- */

	/* 背景紙色 */
	--bg: hwb(0 100% 0%);
	/* --bg: hwb(25 94.5% 1.5%); */

	/* 白地 */
	--surface: hwb(0 100% 0%);

	/* 薄い面 */
	--surface-soft: hwb(25 94.5% 1.5%);

	/* 少し強い面 */
	--surface-soft-strong: hwb(25 86.3% 6.3%);

	/* 主要文字 */
	--text: hwb(11 18% 69.4%);

	/* 補助文字 */
	--text-soft: hwb(17 30.6% 52.9%);
	--subtle: var(--text-soft);

	/* 薄い文字 */
	--muted: hwb(16 49.8% 36.9%);

	/* 主アクセント */
	--accent: hwb(24 20.4% 21.6%);
	--accent-strong: var(--text);

	/* 薄いアクセント */
	--accent-soft: hwb(24 68.2% 9.4%);

	/* 補助色（赤） */
	--accent-rose: hwb(359 40.4% 21.6%);

	/* 補助色（青） */
	--accent-navy: hwb(220 40.4% 21.6%);

	/* 線 */
	--line: hwb(21 72.5% 17.3%);

	/* 薄い線 */
	--line-light: hwb(23 83.9% 9%);

	/* 影やオーバーレイ */
	--shadow-ink: hwb(24 15.7% 64.7%);
	--overlay-ink: hwb(18 7.8% 82%);
	--text-inverse: var(--surface);
	--shadow: 0 12px 30px hwb(24 15.7% 64.7% / 0.08);
	--shadow-soft: 0 6px 18px hwb(24 15.7% 64.7% / 0.08);
	--header-bg: hwb(0 100% 0% / 0.92);
	--header-border: hwb(17 30.6% 52.9% / 0.14);
	--header-shadow:
		0 2px 6px hwb(24 15.7% 64.7% / 0.05),
		inset 0 -1px 0 hwb(0 100% 0% / 0.28);
	--overlay: hwb(18 7.8% 82% / 0.26);
	--overlay-strong: hwb(18 7.8% 82% / 0.5);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}