/* =========================================================
 * base.css
 * DESIGN.md（Zen Editorial）のデザイントークンをCSS変数として定義し、
 * サイト全体の下地（背景・文字色・フォント・コンテナ幅）を設定する。
 * ========================================================= */

:root {
	/* Colors */
	--tks-surface: #f9f9f6;
	--tks-surface-container-lowest: #ffffff;
	--tks-surface-container-low: #f4f4f1;
	--tks-surface-container: #eeeeeb;
	--tks-surface-container-high: #e8e8e5;
	--tks-on-surface: #1a1c1b;
	--tks-on-surface-variant: #434842;
	--tks-outline: #747872;
	--tks-outline-variant: #c3c8c0;
	--tks-primary: #506250;
	--tks-on-primary: #ffffff;
	--tks-primary-container: #687b68;
	--tks-secondary: #5f5e5e;
	--tks-secondary-container: #e2dfde;
	--tks-tertiary: #74565c;
	--tks-error: #ba1a1a;
	--tks-surface-white: #ffffff;
	--tks-text-sub: #777777;
	--tks-border-subtle: #e5e5e0;

	/* Typography */
	--tks-font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	--tks-font-body: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Spacing */
	--tks-unit: 8px;
	--tks-container-max: 1140px;
	--tks-text-max-width: 720px;
	--tks-gutter: 24px;
	--tks-margin-mobile: 20px;
	--tks-section-gap: 80px;

	/* Radius */
	--tks-radius: 0.25rem;
	--tks-radius-lg: 0.5rem;
}

.tks-container {
	max-width: var(--tks-container-max);
	margin: 0 auto;
	padding: 0 var(--tks-gutter);
}

@media (max-width: 782px) {
	.tks-container {
		padding: 0 var(--tks-margin-mobile);
	}
}

/* 比較記事/トップページ/アーカイブなど、本カスタマイズが及ぶ範囲だけに
   フォント・文字色を適用する。Cocoon標準の管理画面や他プラグインには影響しない。 */
#tks-front-page,
#tks-comparison-wrap,
.tks-archive-page {
	background: var(--tks-surface);
	color: var(--tks-on-surface);
	font-family: var(--tks-font-body);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

#tks-front-page h1,
#tks-front-page h2,
#tks-front-page h3,
#tks-comparison-wrap h1,
#tks-comparison-wrap h2,
#tks-comparison-wrap h3,
.tks-archive-page h1,
.tks-archive-page h2,
.tks-archive-page h3 {
	font-family: var(--tks-font-heading);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--tks-on-surface);
}

.tks-section-heading {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 24px;
}
.tks-section-heading-center {
	text-align: center;
}

/* ボタン共通 */
.tks-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 24px;
	border-radius: var(--tks-radius);
	font-family: var(--tks-font-heading);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: box-shadow 0.15s ease, background-color 0.15s ease;
	cursor: pointer;
	border: 1px solid transparent;
}
.tks-btn-primary {
	background: var(--tks-primary);
	color: var(--tks-on-primary);
}
.tks-btn-primary:hover {
	background: #435243;
	color: var(--tks-on-primary);
}
.tks-btn-ghost {
	background: transparent;
	border-color: var(--tks-outline-variant);
	color: var(--tks-on-surface);
}
.tks-btn-ghost:hover {
	border-color: var(--tks-primary);
	color: var(--tks-primary);
	box-shadow: 0 2px 12px rgba(80, 98, 80, 0.12);
}
.tks-btn-sm {
	padding: 8px 16px;
	font-size: 12px;
}

.tks-price-note {
	font-size: 12px;
	color: var(--tks-text-sub);
	margin: 8px 0 0;
}

.tks-breadcrumb {
	font-size: 13px;
	color: var(--tks-text-sub);
	margin: 24px 0;
}
.tks-breadcrumb a {
	color: var(--tks-text-sub);
	text-decoration: none;
}
.tks-breadcrumb a:hover {
	color: var(--tks-primary);
}