/*
    Theme Name: カラダイアリー（SWELL子テーマ）
    Theme URI: https://bestquality-individual.com/
    Template: swell
    Description: カラダイアリーのためのSWELL子テーマ。身体操作と心理機能を対等な二軸として扱う専門Webメディアの実装。親テーマ SWELL 2.2.7.1 を前提とする。
    Version: 0.1.0
    Author: 津田祐輔
    Text Domain: swell_child
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================================
   このファイルはデザイントークンだけを持つ。
   画面ごとのCSSは assets/css/ 配下に分ける。

   ■ 設計の前提（すべて実測で確定した事実に基づく）
   1. SWELLは子テーマの style.css を自動で読み込まない。
      functions.php で明示的に enqueue している。
   2. SWELLのカスタマイザー由来CSSは wp_head 優先度9のインライン
      <style id="swell_custom_front_style"> として出力される。
      enqueue したCSSは wp_head 優先度8で出るため、必ずSWELLより先に出る。
      → 同詳細度では負けるので、SWELLの部品を上書きするときは
        セレクタに #body_wrap を前置して詳細度で勝つ。
        （SWELLのインラインCSSは267セレクタ中idを含むものが8件だけで、
          最大でも4クラス。id1つで確実に上回る。）
      → 8件のid付きセレクタ（#main_content .post_content など）を
        上書きするときだけ #body_wrap #main_content のように2つ重ねる。
   3. SWELLのmodule CSS機構は使わない。
      module経由のCSSは30日transientに焼き込まれ、
      カスタマイザー保存・SWELL更新・手動クリア以外では消えないため。
   4. 既存画面の独自クラスは sks- 接頭辞。採用したトップページ一式は
      既存実装と分離するため krd- 接頭辞を使う。
   5. CSS変数は --sks- 接頭辞。
      自作プラグイン tabisuru-content-assets が --main / --accent / --gold /
      --text という総称名をラッパースコープで使っているため、
      総称名は絶対に使わない。
   ========================================================================= */

/* -------------------------------------------------------------------------
   配色｜採用案「空」パレット（2026-08-27）

   `top-採用案.html` で選ばれた空色のパレットを全画面の基調へ反映する。
   既存画面から参照される --sks-* の変数名は維持し、値だけを揃える。
   トップページ固有の値は assets/css/karadaiary.css の --krd-* に置く。
   ------------------------------------------------------------------------- */

:root {
	/* 採用案「空」の面・文字・アクセント。 */
	--sks-canvas: #eef3f7;
	--sks-surface: #e2eaf1;
	--sks-card: #f8fbfd;
	--sks-ink: #17293a;
	/* 補助の文字（日付・注記・ナビ）。 */
	--sks-muted: #556676;
	--sks-body-accent: #2f6f9e;
	--sks-psyche-accent: #365d85;
	--sks-overlap-accent: #356c70;

	/* 幕（メニューの背後を暗くする）の素になる色。
	   「暗くする」のが目的なので、明るいキャンバスでは ink 側を使う。
	   キャンバス側で作ると白い霞になり、背後が沈まない。 */
	--sks-scrim: #10202d;

	/* 線の透明度。
	   明るい面の黒線は、同じ透明度でも弱く見えるので濃くしてある。 */
	--sks-line-alpha: 20%;
	--sks-line-strong-alpha: 42%;


	--sks-scheme: light;
}

/* -------------------------------------------------------------------------
   6テーマの色

   「体の使い方」の6つの棚と、今日の一枚のアクセント。
   日替わりで色が変わることが、毎日ひらくことの手応えになる。
   定義はここ1箇所だけに置く（画面ごとに色表を持たない）。
   ------------------------------------------------------------------------- */

:root {
	--sks-theme-datsuryoku: #285f8a;
	--sks-theme-kokyu: #34677e;
	--sks-theme-shisen: #2f5874;
	--sks-theme-juushin: #356c70;
	--sks-theme-hanmi: #3e5f82;
	--sks-theme-fureru: #3d6389;
}

/* -------------------------------------------------------------------------
   配色から導出する値
   派生値の計算式は1箇所に置く（画面ごとに別の計算をしない）。
   ------------------------------------------------------------------------- */

:root {
	/* 面と線 */
	--sks-line: color-mix(in srgb, var(--sks-ink) var(--sks-line-alpha), transparent);
	--sks-line-strong: color-mix(in srgb, var(--sks-ink) var(--sks-line-strong-alpha), transparent);
	--sks-veil: color-mix(in srgb, var(--sks-scrim) 72%, transparent);

	/* 幅
	   スマホの左右余白は 5vw（375pxで18.75px）から 4vw（15px）へ縮めた。
	   津田さんの指摘「スマホ幅はもうちょっと広くてもいい」による。
	   コンテナの二重適用を解消した分と合わせて、
	   375pxでの内容幅は 300px → 345px になる。 */
	--sks-content-max: 1180px;
	--sks-reading-max: 760px;
	--sks-gutter: 4vw;
	--sks-gutter-wide: 40px;

	/* 余白の段階（1.5倍系。段階を増やしすぎない） */
	--sks-space-1: 8px;
	--sks-space-2: 12px;
	--sks-space-3: 18px;
	--sks-space-4: 28px;
	--sks-space-5: 42px;
	--sks-space-6: 64px;
	--sks-space-7: 96px;
	--sks-space-8: 144px;

	/* 書体
	   細すぎるウェイトを避ける方針のため、本文は400を下限とする。
	   和文Webフォントのファイルは環境内に1つも無く、外部到達性も未確定なので
	   この段階では端末内蔵の書体だけで組む。 */
	--sks-font-sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP',
		'BIZ UDPGothic', Meiryo, system-ui, -apple-system, sans-serif;
	--sks-font-mono: 'SFMono-Regular', Menlo, Consolas, monospace;

	/* 見出し・サイト名に使う書体（2026-08-07 刷新で明朝へ）。
	   紙の温度には、明朝の縦画と横画の差が要る。
	   端末内蔵の書体だけで組むので外部からは何も読まない
	   （旧実装が読んでいた Noto Sans JP 700 の enqueue は廃止した）。
	   ゴシックを最後に置くのは、明朝を持たない環境で字面を保つため。 */
	--sks-font-display: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho,
		'Noto Serif JP', 'Times New Roman', serif;
	--sks-weight-display: 600;

	/* 本文（キットの出発点＝16.5〜17px・行間1.8〜1.95） */
	--sks-fz-body: 16.5px;
	--sks-lh-body: 1.9;
	--sks-fz-small: 13.5px;
	--sks-lh-tight: 1.45;

	/* 見出しは和文の詰めすぎを避ける。上限 -0.02em */
	--sks-track-heading: -0.01em;

	/* 時間 */
	--sks-dur-fast: 160ms;
	--sks-dur: 280ms;
	--sks-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* -------------------------------------------------------------------
	   バネの曲線
	   -------------------------------------------------------------------
	   参考にしたLPは Framer Motion のバネを使っている。
	     立ち上がり  { type:'spring', duration:0.6, bounce:0 }
	     ホバー      { type:'spring', duration:0.45, bounce:0.25 }
	   このサイトでは Framer Motion を使えないので、
	   バネの式そのものを22点で標本化して linear() に落とす。
	   近い形のベジェで代用するのではなく、同じ軌跡を再現する。

	   bounce:0 は臨界減衰（行き過ぎ無し）。
	     25%地点 0.445 / 50%地点 0.844 / 75%地点 0.953
	   bounce:0.25 は1回だけ 2.8% 行き過ぎてから戻る。

	   linear() 非対応の環境のために、先に近いベジェを書いておく。
	   対応環境では後の linear() が採用される。
	   ------------------------------------------------------------------- */
	--sks-spring-dur: 600ms;
	--sks-spring: cubic-bezier(0.16, 0.84, 0.28, 1);
	--sks-spring: linear(
		0, 0.03734, 0.1231, 0.2295, 0.34, 0.4452, 0.5404, 0.6236, 0.6947, 0.7543,
		0.8036, 0.8438, 0.8764, 0.9027, 0.9236, 0.9402, 0.9534, 0.9638, 0.9719,
		0.9782, 0.9832, 0.987, 1
	);

	--sks-press-dur: 450ms;
	--sks-press: cubic-bezier(0.34, 1.36, 0.64, 1);
	--sks-press: linear(
		0, 0.03375, 0.117, 0.2274, 0.3489, 0.47, 0.5831, 0.6839, 0.7702, 0.8415,
		0.8984, 0.9423, 0.9748, 0.9978, 1.013, 1.022, 1.027, 1.028, 1.027, 1.025,
		1.022, 1.019, 1
	);
}

@media (min-width: 600px) {
	:root {
		--sks-fz-body: 17px;
	}
}

@media (min-width: 960px) {
	:root {
		--sks-gutter: var(--sks-gutter-wide);
	}
}

/* color-mix() 未対応環境のための素の値。
   対応状況を実測してから使うという方針に従い、
   フォールバックを先に置いて上で上書きする形にしている。 */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
	:root {
		--sks-line: rgba(38, 34, 29, 0.2);
		--sks-line-strong: rgba(38, 34, 29, 0.42);
		--sks-veil: rgba(38, 34, 29, 0.72);
	}

}