/*
 * css/tokens.css
 *
 * サイト全体のデザイントークン定義。
 * 顧客案件ごとの色・フォント等の切替は、このファイルの値を書き換えるだけで
 * 全ページ・全モジュールに反映される。
 *
 * 【使用方法】
 *   .some-class { color: var(--color-primary); }
 *
 * 【ルール】
 * - このファイルは style.css より必ず先に読み込まれる（functions.php で依存指定）
 * - モジュール側の CSS では色は直書きせず、var(--color-*) 経由で指定する
 * - CSS 変数は @media クエリ内では使えないため、ブレークポイントは定義せず
 *   コメント規約（768px / 769px）で統一する
 */

:root {
	/* ========== ブランドカラー（Phase 1） ==========
	   二井くみよ（futai-kumiyo）固有のピンク系トーン。 */
	--color-primary: #C64B74; /* メイン：ふたいピンク */
	--color-accent:  #3aa7c7; /* アクセント：シアン */
	--color-warning: #cb171d; /* 警告・強調：赤 */

	/* ========== サイト基盤色（Phase 1） ========== */
	/* 注意：--color-bg は白〜極淡色の範囲で変更すること。
	   濃色に変えるとハンバーガーボタンの線など、body 背景が白い前提で
	   --color-primary を前景色に使っている要素が視認しづらくなる。
	   印象を大きく変えたい場合は --color-primary / --color-accent で行う。 */
	--color-bg:   #ffffff; /* body 背景色（明色範囲のみ） */
	--color-text: #2b2b2b; /* body 文字色 */

	/* ========== スペーシング ==========
	   モジュール（.module）の上下間隔および、モジュール内部の余白に用いる。
	   数値そのものを書かず、これらの変数を参照することでサイト全体で一貫したリズムが得られる。
	   ブレークポイント超過時の縮小値は @media 内で値のみ上書きする。 */
	--space-2xs: 4px;
	--space-xs:  8px;
	--space-sm:  16px;
	--space-md:  24px;
	--space-lg:  40px;
	--space-xl:  60px;
	--space-2xl: 80px;

	/* セクション間隔（.module の padding-block に使われる既定値） */
	--space-section: 120px; /* PC */

	/* ========== 中立色（Phase 2） ========== */
	--color-white:        #ffffff; /* 白 */
	--color-black:        #000000; /* 黒 */
	--color-text-muted:   #6c6c6c; /* 本文より少し淡い文字色 */
	--color-border:       #cccccc; /* 汎用ボーダー（区切り線・リスト枠線） */
	--color-border-image: #aaaaaa; /* 画像・サムネイルのボーダー（やや濃いめ） */
	--color-border-soft:  #d3d3d3; /* メンバー画像等のボーダー（柔らかめ） */
	--color-bg-subtle:    #ffffea; /* うっすらとした面色（事務所案内等の箱）— futai は薄黄 */

	/* ========== セマンティックカラー（Phase 2） ========== */
	--color-label-blog:  #3d8060; /* ブログラベル（緑）— 白文字でAA 4.5:1通過 */
	--color-label-news:  #b8650a; /* ニュースラベル（橙）— 白文字でAA 4.5:1通過 */
	--color-label-press: var(--color-primary); /* 広報紙ラベル（ブランド青） */
	--color-marker:      #fef84c; /* テキスト用マーカーライン（黄） */

	/* policy セクション 5色＋番号色 */
	--color-policy-1:    #3091d0; /* 青 */
	--color-policy-3:    #d55e7d; /* 桃 */
	--color-policy-4:    #e0823a; /* 橙 */
	--color-policy-5:    #2861a3; /* 濃青 */
	--color-policy-num:  #fabe00; /* 番号・マーカー黄 */

	/* フォーム要素 */
	--color-form-border: #9e9e9e; /* input/select/textarea の枠線 */
	--color-form-check:  #002457; /* ラジオ・チェックボックスの塗り */

	/* slick カルーセルドット */
	--color-slick-dot:   #b6b6b6;

	/* Gutenberg yellow パレット */
	--color-yellow-block: #fbee31;

	/* ========== フォント（Phase 3） ========== */
	--font-base: "BIZ UDPGothic", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	--font-icon: "Font Awesome 5 Free";

	/* ========== 影（Phase 3） ==========
	   サイト全体で box-shadow / drop-shadow は --shadow に統一。 */
	--shadow: 0 3px 6px rgba(0, 0, 0, 0.24);

	/* ========== オーバーレイ背景 ==========
	   モーダル・ドロワー・ライトボックス等、コンテンツ上に被せる
	   半透過の暗幕の色。サイト全体で統一する。 */
	--color-overlay: rgba(0, 0, 0, 0.75);
}

@media (max-width: 768px) {
	:root {
		/* SP ではセクション間隔を詰める */
		--space-section: 80px;
	}
}

/* border-radius はサイト全体 0 統一（CLAUDE.md 方針）。
   * は最低詳細度のため、ラジオの 50% 等の個別ルールは上書きされない。 */
* { border-radius: 0; }