/**
 * デザイントークン定義（:root のみ。実スタイルルールはここに書かない）
 *
 * 命名規則: --<category>-<role>
 *   - 色は「見た目の値」ではなく「役割」で命名する（同じ色でも用途が違えば別名にする）
 *   - WordPress core が決める値（管理バー高さ等）は --wp- 接頭辞で自作トークンと区別する
 *
 * 他ファイルで :root に新規プロパティを追加しない。ページ固有の上書きが必要な場合は
 * クラススコープ（例: .kajima-info-detail { --xxx: ... }）で行う。
 */
:root {
    /* ---------- 色 ---------- */
    --color-accent:          #e63946; /* タブ下線(building-info)・一覧chevron */
    --color-text-base:       #111;    /* 本文色・タブ文字色 */
    --color-text-secondary:  #333;    /* カテゴリー見出し・一覧記事タイトルの文字色 */
    --color-page-bg:         #e5e7eb; /* list/detailページ背景 */
    --color-border-subtle:   #e5e7eb; /* 一覧行・詳細タイトル下のボーダー */
    --color-surface:         #fff;    /* カード/一覧の白背景 */

    /* ---------- フォント ---------- */
    /* Noto Sans JP はWebフォントとして読み込む（template-routing.php参照）。*/
    --font-family-base:    "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Sans", sans-serif;
    --font-family-rounded: ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif; /* info-widgetカードのみ */

    /* ---------- レイアウト ---------- */
    /* tabs.css の .kajima-tabs 実高さ(padding+font-sizeから決まる)の決め打ち複製。
     * tabs.css側のpadding/font-sizeを変えたら、ここも合わせて更新する（隠れた結合）。 */
    --tabs-height:            56px;
    --layout-max-width-detail: 720px; /* ビル情報詳細の既存幅（モバイル/タブレット用） */
    --layout-width-reels-pc:   428px; /* PC時のReels固定幅（9:16目安。見た目で微調整可） */
    --layout-content-width-pc: 1100px; /* PC時、ビル情報3画面（一覧/カテゴリー別一覧/詳細）共通のコンテンツ幅 */
    /* 情報ウィジェット(3カード横並び)が内部デザインを保てる基準幅。PC最小幅(768px)付近では
     * コンテンツ幅(--layout-content-width-pc)より画面が狭く、実際の横幅がこれより狭くなり、
     * flex:1 1 0 のカードが縮こまって崩れるため、info-widget.js が実測幅とこの基準幅を比較し、
     * 狭い場合だけこの基準幅のレイアウトを transform:scale で丸ごと縮小表示する（基準幅以上なら
     * 従来どおり100%フィルで変化なし）。値は見た目で微調整可。 */
    --info-widget-natural-width: 900px;
    /* .info-widget__card の実測高さ（building-info.css で使用）。info-widget.js が上記スケール時に
     * クリップラッパー(.info-widget__swiper-clip)の高さをスケールに合わせて縮めるために読み取る。
     * カードの padding/gap 構成を変えて実測高さが変わったら、このトークンの値も更新すること。 */
    --info-widget-card-height: 156px;

    /* ---------- ブレークポイント ----------
     * PC判定の正本値。JS(info-widget.js)はこの変数をgetComputedStyleで読んでmatchMediaを組む。
     * CSSの @media() の条件式には使えない（CSS Custom Media Queries未採用のため）。
     * @media (min-width: 768px) を書く箇所は必ず
     *   "PC breakpoint (768px) — see assets/css/variables.css --bp-pc"
     * というコメントを直前に付け、grep で全箇所を洗い出せるようにする。 */
    --bp-pc: 768px;

    /* ---------- WordPress管理バー ----------
     * wp-adminログイン時に表示される #wpadminbar の高さ。WP core (admin-bar.css) が
     * ブラウザ幅 782px を境に高さを 32px → 46px に切り替える仕様に合わせた値。
     * この 782px は本サイトのPC判定 --bp-pc(768px) とは無関係の値なので混同しないこと。 */
    --wp-adminbar-height:        32px;
    --wp-adminbar-height-mobile: 46px;

    /* ---------- z-index ---------- */
    --z-tabs:    20; /* .kajima-tabs */
    --z-overlay: 10; /* .kajima-overlay */
}