@charset "UTF-8";
/* ================================================================
   モバレコ デザイントークン（サイト全体で唯一の定義元）
   2026-08-22 新規 — Phase 1: 一元化

   ■ 経緯
   同じ色・同じ書体が4系統で別名定義されていた。
     --mbv2-*  記事/カテゴリ/タグ/固定ページ（article-v2 / archive-v2 / page-v2 の3ファイルで重複定義）
     --mbt-*   TOP（new-top-v4.css の .mbt スコープ）
     --h4-*    ヘッダーウィジェット（DBの widget_custom_html[5] にインライン）
     --f4-*    フッターウィジェット（同 [13]）
   その結果「TOPだけ別世界」に見え、色を変えるのに4箇所を触る必要があった。

   ■ 方針
   ここで --mb-* を唯一の定義とし、既存の --mbv2-* / --mbt-* は
   同じ値を指すエイリアスとして維持する。既存の膨大な参照を書き換えずに
   一元化できる（参照は壊れない）。新しく書くCSSは --mb-* を使う。

   ■ トーン
   白地。黒(--mb-ink)が「構造」を、えんじ(--mb-red)が「状態」を示す。
   写真だけが色を持つ。角丸は原則なし（丸みが意味を持つ吹き出し・円形アイコンは例外）。

   ■ 読み込み
   functions.php で wp_enqueue_scripts の priority 1（＝最初）に全ページで enqueue。
   CSS変数はカスケードで解決されるので読み込み順に厳密な依存はないが、
   「トークンが先」という意図を明確にするため最初に置く。
   ================================================================ */

:root {
    /* ── 面 ────────────────────────────── */
    --mb-bg: #ffffff;        /* 基本の地 */
    --mb-bg-2: #f5f5f5;      /* 面の切り替え（セクション区切り等） */
    --mb-bg-3: #fafafa;      /* ごく薄い面（枠を薄くした箱の地） */

    /* ── 文字・構造の黒 ─────────────────── */
    --mb-ink: #0d0d0d;       /* 本文・見出し・構造線 */
    --mb-ink-2: #4a4a4a;     /* 副次テキスト */
    --mb-ink-3: #8c8c8c;     /* 補助・キャプション・パンくず */

    /* ── アクセント（えんじ）＝状態を示す ─── */
    --mb-red: #a02b33;       /* カテゴリ・NEW・順位1〜3・現在地 */

    /* ── 罫線 ──────────────────────────── */
    --mb-line: #dedede;      /* 枠・セル罫線 */
    --mb-line-2: #efefef;    /* さらに薄い区切り */
    --mb-dot: #e0e0e0;       /* 点線・ドット */

    /* ── マーカー ───────────────────────── */
    --mb-marker: #f0dfe2;    /* 淡いえんじ（強調） */
    --mb-marker-2: #e8e8e8;  /* グレー（副次の強調） */

    /* ── 書体 ──────────────────────────── */
    /* Webフォントは使わない（AdSenseが読み込むNoto Sans JPを拾わないため
       'Noto Sans JP' を絶対に入れないこと）。Windowsは BIZ UDPGothic。 */
    --mb-font: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'BIZ UDPGothic', 'Yu Gothic UI', Meiryo, sans-serif;

    /* ================================================================
       後方互換エイリアス
       既存CSSの参照を壊さないために残す。新規CSSでは使わない。
       ================================================================ */

    /* 記事・カテゴリ・タグ・固定ページ系（旧 article-v2 / archive-v2 / page-v2） */
    --mbv2-ink: var(--mb-ink);
    --mbv2-red: var(--mb-red);
    --mbv2-yellow: var(--mb-marker);
    --mbv2-cream-marker: var(--mb-marker-2);
    --mbv2-gray: var(--mb-bg-2);
    --mbv2-soft: var(--mb-bg-3);
    --mbv2-line: var(--mb-line);
    --mbv2-dot: var(--mb-dot);
    --mbv2-seed: var(--mb-font);

    /* TOP系（旧 new-top-v4.css の .mbt スコープ） */
    --mbt-ink: var(--mb-ink);
    --mbt-ink-2: var(--mb-ink-2);
    --mbt-ink-3: var(--mb-ink-3);
    --mbt-line: var(--mb-line);
    --mbt-line-2: var(--mb-line-2);
    --mbt-bg-2: var(--mb-bg-2);
    --mbt-red: var(--mb-red);
    --mbt-font: var(--mb-font);
}