/*
 * base.css — リセット + デザイントークン
 *
 * 責任範囲: ブラウザデフォルトの正規化と、サイト全体で使うCSS変数の定義のみ。
 * レイアウト・コンポーネント固有のスタイルはlayout.css / components.css /
 * blocks.cssに置く。
 *
 * STEP7で確定した正式デザインシステム（エディトリアル×ユーティリティ）の
 * トークン実装。白・黒・グレーを主役にし、アクセント（ワインレッド）は
 * 重要なUI・状態表示にのみ限定的に使う。
 *
 * ブレークポイントについて: CSS変数はメディアクエリの条件には使えないため
 * トークン化していない。theme全体で以下の値に統一している。
 *   600px  … カードグリッド2列
 *   900px  … サイドバー2カラムレイアウト・通常ナビ表示
 *   1024px … カードグリッド3列
 */

:root {
	/* ---------- カラートークン ---------- */
	--mono-white: #ffffff;
	--mono-100: #f4f4f5;
	--mono-200: #e4e4e7;
	--mono-300: #d4d4d8;
	--mono-500: #71717a;
	--mono-600: #52525b;
	--mono-900: #18181b;

	/* アクセント（ワインレッド）。#7A2E3Aは白背景・白文字ボタンどちらに
	   対しても約9.2:1のコントラスト比を確認済み（WCAG AA 4.5:1を満たす）。 */
	--color-accent: #7a2e3a;
	--color-accent-hover: #5e212b;
	--color-accent-tint: #f6e8ea;
	--color-accent-contrast: #ffffff;

	/* セマンティックエイリアス（コンポーネント側はこちらを参照する） */
	--color-bg: var(--mono-white);
	--color-surface: var(--mono-100);
	--color-border: var(--mono-200);
	--color-border-strong: var(--mono-300);
	--color-text: var(--mono-900);
	--color-text-muted: var(--mono-600);
	--color-link: var(--mono-900); /* 本文リンクはアクセントにせず下線で示す */

	/* ---------- タイポグラフィ ---------- */
	/* Webフォントは追加しない。ブランド性はサイズ・太さ・行間・余白で作る。 */
	--font-family-base: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

	--font-size-caption: clamp(0.75rem, 0.735rem + 0.08vw, 0.8125rem);   /* 12→13px: メタ情報 */
	--font-size-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);        /* 13→14px: 補助テキスト */
	--font-size-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);            /* 15→16px: 本文 */
	--font-size-lead: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);            /* 16→18px: リード文 */
	--font-size-h3: clamp(1.125rem, 1.03rem + 0.5vw, 1.375rem);          /* 18→22px: 記事内小見出し */
	--font-size-h2: clamp(1.375rem, 1.18rem + 1vw, 1.75rem);             /* 22→28px: セクション見出し */
	--font-size-h1: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);            /* 26→36px: 記事タイトル */

	--font-weight-normal: 400;
	--font-weight-bold: 700;

	--line-height-base: 1.8;
	--line-height-lead: 1.7;
	--line-height-heading: 1.5;

	/* ---------- スペーシング（4pxベース） ---------- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* ---------- 角丸・シャドウ ---------- */
	--radius-sm: 6px;      /* 入力欄・小さなバッジ */
	--radius-button: 7px;  /* ボタン（直線的すぎず丸すぎない） */
	--radius-md: 8px;      /* カード・ボックス */
	--shadow-card: 0 2px 8px rgba(24, 24, 27, 0.06); /* ホバー時のみ使用。通常時は無地 */

	/* ---------- コンテナ幅（用途別） ---------- */
	--content-width: 700px;  /* 記事本文（narrow） */
	--wide-width: 960px;     /* 画像・表・強調CTA等の alignwide */
	--container-width: 1140px; /* ヘッダー/フッター/トップページ/カードグリッド */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	-webkit-font-smoothing: antialiased;
}

/* 見出し階層はサイズ・太さ・余白のみで表現する（アクセントカラーは使わない）。
   「上は広く・下は狭く」のリズムを基本とし、本文中(.entry-content)での
   刻みはcomponents.css側で個別に調整する。 */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-4);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
	color: var(--color-text);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4, h5, h6 { font-size: var(--font-size-lead); }

p {
	margin: 0 0 var(--space-4);
}

a {
	color: var(--color-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--color-accent);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol {
	margin: 0 0 var(--space-4);
	padding-left: 1.25em;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--space-4);
	font-size: var(--font-size-sm);
}

th, td {
	border: 1px solid var(--color-border);
	padding: var(--space-2) var(--space-3);
	text-align: left;
}

button {
	font-family: inherit;
}

/* アクセシビリティ: フォーカス状態を明示する */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

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

.skip-link {
	position: fixed;
	top: -100px;
	left: 0;
	z-index: 1000;
	padding: var(--space-2) var(--space-4);
	background: var(--mono-900);
	color: var(--mono-white);
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0;
}