/* ============================================================================
 * 大人通信 デザイントークン（案A＝design.md 2026-11-12 版を CSS 変数にしたもの）
 *
 * 値の正本: output/20261112_otona-tsushin/design.md（冒頭の YAML）
 * ロゴ（logo_yoko.svg）の実色に合わせ替えた箇所は、行末のコメントに design.md の元値を残してある。
 * 戻したいときは元値に書き換えるだけでよい。
 *
 * 読み込み: functions.php の otonatsushin_design_enqueue（2026-11-13 から常時。wp-config.php に OTN_DESIGN_OFF が真のときだけ止まる）。
 * すべて body.otn-design-new の配下にだけ効く（クラスは常時付く）。
 * ========================================================================== */
.otn-design-new {
	/* --- 色 --- */
	--ot-primary:        #00bac6; /* 装飾専用（見出しの縦線・アイコン・引用符）。design.md は #009FAB → ロゴの青緑に合わせた */
	--ot-primary-text:   #007A84; /* 白地のリンク・タグ文字、白文字ボタンの背景。白地で 4.5:1 以上 */
	--ot-primary-hover:  #006C75;
	--ot-primary-soft:   #F1FAFB;
	--ot-primary-border: #9AD9DE;
	--ot-ink:            #081d49; /* 見出し・ナビ。design.md は #10183F → ロゴの濃紺に合わせた */
	--ot-body:           #414B68; /* 本文 */
	--ot-muted:          #697180; /* 日付・補足・読み仮名 */
	--ot-neutral:        #FFFFFF; /* ページ地 */
	--ot-surface:        #FFFFFF; /* カード地 */
	--ot-surface-subtle: #FAFBFC; /* 引用・補足のごく淡い面 */
	--ot-border:         #E6EAF0; /* 細い境界線 */
	--ot-accent-coral:   #fe7120; /* 現在ナビの下線・ランキング見出し。design.md は #F36C51 → ロゴの橙 */
	--ot-accent-gold:    #fec819; /* 1位バッジ。design.md は #FFB500 → ロゴの黄 */
	--ot-accent-blue:    #1e78df; /* ロゴの青。design.md に無い予備色。いまは未使用 */
	--ot-error:          #B42318;
	/* CTA ボタン（女優・作品ページのアフィリエイトボタン）＝ロゴの橙。2026-11-13 ユーザー裁定（青緑 design.md の button-primary と比較のうえ橙を採用。
	   白文字とのコントラスト約 2.8:1 は承知のうえで「今の色で可」）。青緑へ戻すなら bg を var(--ot-primary-text)・hover を var(--ot-primary-hover) に */
	--ot-cta-bg:         var(--ot-accent-coral);
	--ot-cta-hover:      #d95b0c;
	--ot-cta-fg:         #FFFFFF;

	/* --- 文字 --- */
	/* 2026-11-13: Google Fonts の Noto Sans JP は既定で読まない（functions.php の $webfont＝false。Local 計測で初回 700KB〜1.1MB・Slow 4G で 2〜6 秒の遅れ）。
	   端末にある Noto（Android の既定＝Noto Sans CJK JP、インストール済みの Noto Sans JP）を先に、無ければ Cocoon 既定と同じ Hiragino → Meiryo */
	--ot-font: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--ot-fs-display: 36px; /* ページに1つの H1（900px 未満 30px・600px 未満 26px は下の media で） */
	--ot-fs-h2:      28px; /* 節見出し（600px 未満 22px） */
	--ot-fs-h3:      18px; /* 小見出し・カード見出し */
	--ot-fs-body-lg: 18px; /* 引用・強調 */
	--ot-fs-body:    16px; /* 本文（スマホでも縮小しない） */
	--ot-fs-sm:      14px; /* 補足・ボタン */
	--ot-fs-xs:      12px; /* メタ情報 */
	--ot-lh-head:  1.6;
	--ot-lh-body:  1.9;
	--ot-lh-sm:    1.8;
	--ot-lh-label: 1.5;
	--ot-ls:       0.02em;
	--ot-ls-body:  0.03em;

	/* --- 角丸 --- */
	--ot-r-sm:   6px;
	--ot-r-md:   8px;
	--ot-r-lg:   12px;
	--ot-r-full: 9999px;

	/* --- 余白 --- */
	--ot-sp-xs:      4px;
	--ot-sp-sm:      8px;
	--ot-sp-md:      16px;
	--ot-sp-lg:      24px;
	--ot-sp-xl:      32px;
	--ot-sp-xxl:     48px;
	--ot-sp-section: 64px;
	--ot-container-max: 1200px;
	--ot-page-margin: 48px; /* 画面端の余白（1200px 未満 32・900px 未満 24・600px 未満 20・360px 未満 16） */
	--ot-col-gap: 48px;     /* 本文と補助欄の間（1200px 未満 32） */

	/* --- 影 --- */
	--ot-shadow-card: 0 2px 12px rgba(16, 24, 63, 0.04);

	/* --- 既存部品との接続 ---
	 * 関連記事カード（.ot-card*）・同人カード（.ot-doujin*）・テキストリンクは var(--seo-*, 既定値) で色を引く。
	 * ここで --seo-* をこのパレットに結び直すと、それらの CSS を触らずに色が揃う。 */
	--seo-accent:      var(--ot-primary-text);
	--seo-accent-deep: var(--ot-primary-hover);
	--seo-accent-soft: var(--ot-primary-soft);
	--seo-ink:         var(--ot-ink);
	--seo-muted:       var(--ot-muted);
	--seo-line:        var(--ot-border);
	--seo-card:        var(--ot-surface-subtle);
}

@media (max-width: 1199px) {
	.otn-design-new { --ot-page-margin: 32px; --ot-col-gap: 32px; }
}
@media (max-width: 899px) {
	.otn-design-new { --ot-fs-display: 30px; --ot-page-margin: 24px; }
}
@media (max-width: 599px) {
	.otn-design-new { --ot-fs-display: 26px; --ot-fs-h2: 22px; --ot-page-margin: 20px; }
}
@media (max-width: 359px) {
	.otn-design-new { --ot-page-margin: 16px; }
}