/*
 * design-tokens.core.css — PB1 デザイントークン（core）
 * 仕様: gtm/branding/design-tokens/v1.1-webfont-draft.md §6.1.2 / §6.2（v1.1-rev6）
 *       格納方針: 同§11.1（フォント関連 CSS はすべて本ファイルに格納。
 *       design-tokens.palette-full.css には載せない）
 * Phase 1 §9.2 Step 4-5（2026-06-12）: フォント変数 + body 既定 + 欧文ユーティリティ +
 *       .content-Title（§6.2）。色・タイポ等のその他トークン（v1.1-draft.md §1〜§8）は
 *       後続ステップで追加予定。
 * Phase 2 / 2A P2-1（2026-06-13）: §1 カラートークン（§1.1/§1.1b/§1.2/§1.3/
 *       §1.3b/§1.5）を追加。body へ本文色 var(--color-text-primary) を配線。
 *       タイポ（流体タイポ §2.3 等）・radius・spacing 等の構造系は後続束で追加。
 */

/* ---- §6.1.2 CSS 変数（Family / Weight / Feature）---- */
:root {
  /* Family（v1.1-draft.md §2.1 そのまま） */
  --font-family-ja:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", "Meiryo", sans-serif;

  --font-family-en:
    "Poppins", "Helvetica Neue", "Arial", sans-serif;

  --font-family-base: var(--font-family-ja);

  /* Weight（v1.1-draft.md §2.2 と完全一致 — 3 ウェイト） */
  --font-weight-regular: 400;
  --font-weight-medium:  600;
  --font-weight-bold:    700;

  /* Feature（DESIGN.md §3.7） */
  --font-feature-body: "palt" 1, "kern" 1;
}

/* ====================================================================
 * §1 カラートークン（v1.1-draft.md §1.1 / §1.1b / §1.2 / §1.3 / §1.3b
 *    / §1.5、および DESIGN.pickle-one-web.md §2 に忠実に写経）
 *    Phase 2 / 2A P2-1（2026-06-13）: 色トークン基盤層を追加。
 *    真値は Tier 0 ロゴガイドライン → Tier 1 DESIGN.md。憶測値なし。
 * ==================================================================== */

/* ---- §1.1 Tier 0 真値（DESIGN.md §2 Primary Palette と完全一致）---- */
:root {
  --color-brand-blue:   #003594;        /* PANTONE 661C / sky-blue-700 等価 */
  --color-brand-orange: #EF6A00;        /* PANTONE 3564C / sun-orange-700 等価 */
  --color-brand-white:  #FFFFFF;        /* neutral-0 */
}

/* ---- §1.1b ロゴ専用色（Neutralスケール外・UI流用禁止）---- */
:root {
  --color-logo-mono-gray: #898989;      /* ロゴのモノクローム表示のみ */
}

/* ---- §1.2 Tier 1 — §2.5 HSL 派生（L±10% / L+15% / 白85%混色）---- */
:root {
  --color-blue-dark:  #002361;          /* L -10%。Hover兼用 */
  --color-blue-hover: var(--color-blue-dark);   /* Dark兼用・将来分離可能な構造 */
  --color-blue-light: #0050E0;          /* L +15% */
  --color-blue-pale:  #D9E1EF;          /* 白85%混色 */

  --color-orange-dark:  #BC5300;        /* L -10%。Hover兼用 */
  --color-orange-hover: var(--color-orange-light); /* light #FF933D・意図的AA例外(白文字2.21:1)・美観/カンプ忠実優先・ユーザー承認 2026-06-15 */
  --color-orange-light: #FF933D;        /* L +15% */
  --color-orange-pale:  #FDE9D9;        /* 白85%混色 */
}

/* ---- §1.3 中性色・役割別カラー（DESIGN.md §2 Neutral/Utility・0.4 style.css 実装値）---- */
:root {
  --color-text-primary:      #161414;   /* Body Text（DESIGN.md §2 完全一致） */
  --color-text-link-default: #414143;   /* 通常テキストリンク色 */
  --color-text-muted:        #a1a1a1;   /* 補助テキスト・プレースホルダ */

  --color-search-input-bg:    hsla(0, 0%, 100%, .9);
  --color-overlay-pickup-blue: rgba(0, 53, 148, .4);
  --color-shadow-soft:         rgba(0, 0, 0, .2);
}

/* ---- §1.3b 装飾用ブラウザ既定互換色（<mark>/<ins> 限定・例外扱い）---- */
:root {
  --color-highlight-mark: #fff45c;      /* <mark> タグのブラウザ既定互換 */
  --color-insertion-bg:   #ffff99;      /* <ins> タグのブラウザ既定互換 */
}

/* ---- §1.5 セマンティックエイリアス（DESIGN.md §4 コンポーネントと1:1対応）---- */
:root {
  --color-cta-bg:       var(--color-brand-blue);
  --color-cta-bg-hover: var(--color-blue-hover);
  --color-cta-text:     var(--color-brand-white);

  --color-section-bg-base:       var(--color-brand-white);
  --color-section-bg-alt-orange: var(--color-brand-orange);
  --color-section-bg-alt-blue:   var(--color-brand-blue);

  --color-title-on-white:  var(--color-brand-blue);
  --color-title-on-orange: var(--color-brand-white);
  --color-title-on-blue:   var(--color-brand-white);

  --color-dot-on-white:  var(--color-brand-orange);
  --color-dot-on-orange: var(--color-brand-blue);
  --color-dot-on-blue:   var(--color-brand-orange);

  --color-border-nav-white: var(--color-brand-white);
  --color-border-tab-blue:  var(--color-brand-blue);
}

/* Body 既定 */
body {
  color: var(--color-text-primary);   /* P2-1: 本文 #161414（トークン経由・直値散在を増やさない） */
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-feature-settings: var(--font-feature-body);
  text-rendering: optimizeLegibility;
}

/* 欧文ユーティリティ（既存クラス互換） */
.font-En {
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-regular);
  font-style: normal;
}
.font-Enbold {
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-bold);
}
.font-Bold {
  font-weight: var(--font-weight-bold);
}

/* ---- §6.2 コンポーネント接続（.content-Title）----
 * P2-1（2026-06-13）更新: --color-title-on-white（§1.5）は本ファイル §1.5 で定義済みのため解決する。
 * font-size が参照する --font-size-h2-content-title（v1.1-draft.md §2.3 流体タイポ）は
 * P2-2 タイポ束のスコープのため本ファイル未定義（現状 font-size は無効値で継承値にフォールバック）。
 * 当該クラスは現行テーマテンプレートで未使用（grep 0 件・2026-06-12 確認）のため現状表示影響なし。 */
.content-Title {
  font-family: var(--font-family-en);    /* Poppins */
  font-weight: var(--font-weight-bold);   /* 700 */
  font-size: var(--font-size-h2-content-title);  /* v1.1-draft.md §2.3 */
  color: var(--color-title-on-white);     /* v1.1-draft.md §1.5 */
}
.content-Title span {
  font-family: var(--font-family-ja);     /* Noto Sans JP */
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
}

/* ====================================================================
 * §3 Radius / §4 Transition / §2.3 流体タイポ / §5 Spacing
 *    Phase 2 / STEP2 Step A（2026-06-14）: 構造系トークン基盤を追加。
 *    値の正は gtm/branding/design-tokens/v1.1-draft.md（単一ソース）を写経。
 *    本ブロックは変数宣言のみ。既存セレクタへの適用は Step B/C で行う。
 * ==================================================================== */

/* ---- §3 Radius（v1.1-draft.md §3 写経）---- */
:root {
  --radius-pill:     60px;
  --radius-card:     20px;
  --radius-hero:     90px;
  --radius-circle:   50%;
  --radius-progress: var(--radius-card);   /* card と同値・alias */
  --radius-button:   var(--radius-pill);
}

/* ---- §4 Transition（v1.1-draft.md §4 写経）---- */
:root {
  --t-fast:    0.2s ease-in-out;
  --t-base:    0.3s ease;
  --t-slide:   0.4s ease-in-out;
  --t-slow:    0.6s ease;
  --t-slowest: 0.7s;
  --fade-up-distance: 20px;
  --fade-up-duration: var(--t-slow);
}

/* ---- §2.3 流体タイポ clamp（v1.1-draft.md §2.3 写経）----
 * 命名は v1.1-draft.md §2.3 のキー名に --font-size- を冠する。
 * --font-size-h2-content-title は既存 .content-Title（:137）の dangling 参照を解決する。*/
:root {
  --font-size-h2-content-title: clamp(2.438rem, 2.205rem + 1.16vw, 3.063rem);
  --font-size-title-sub:        1rem;
  --font-size-member-name:      1.562rem;
  --font-size-paddle-card:      clamp(1.25rem, 1.157rem + .47vw, 1.5rem);
  --font-size-tab-link:         clamp(1rem, .907rem + .47vw, 1.25rem);
  --font-size-post-title:       clamp(1rem, .953rem + .23vw, 1.125rem);
  --font-size-slider-caption:   clamp(1.125rem, 1.078rem + .23vw, 1.25rem);
  --font-size-arrow-link:       clamp(1rem, .953rem + .23vw, 1.125rem);
  --font-size-menu-overlay-link: clamp(1.125rem, .637rem + 2.44vw, 2.438rem);
  --font-size-last-block-cta:   1.37rem;
  --font-size-footer-sns-heading: 1.25rem;
}

/* ---- §5 Spacing（v1.1-draft.md §5 写経）----
 * 変数宣言のみ。L1（container 1200->1160）等の既存値変更は本ステップに含めない。*/
:root {
  --space-section:         clamp(3rem, 2.256rem + 3.72vw, 5rem);
  --space-title-bottom:    clamp(2rem, 1.628rem + 1.86vw, 3rem);
  --space-card-padding:    clamp(1rem, .628rem + 1.86vw, 2rem);
  --space-link-vmargin:    clamp(.5rem, .128rem + 1.86vw, 1.5rem);
  --space-footer-info-top: clamp(1rem, -0.488rem + 7.44vw, 5rem);
  --container-max-width:      1160px;
  --container-padding-x-pc:   20px;
  --container-padding-x-sp:   16px;
  --section-padding-right-pc: 120px;
}

/* ====================================================================
 * Phase 2 / STEP2 Step B + C0（2026-06-14）— シグネチャ適用束（残置分）
 *   本ファイルは style.css（priority 10）より後（priority 20・deps:cocoon-child-style）
 *   にロードされるため、.page-id-785 同詳細度セレクタを !important なしで上書きする。
 *   値の正は v1.1-draft.md（トークン）/ DESIGN.pickle-one-web.md（テイスト）。
 *   Phase2B B-1d（2026-06-14）デッドCSS整理: トップをカンプ型(B)へマークアップ置換
 *   したことで対応 DOM が消えた旧A方式の寄せ込みルールを削除した。
 *     - 削除: Step C2（.head_area h2 / .h2_subtitle / section#favorite 見出し）
 *     - 削除: Step C1（.navi_button_area button・新DOMは <a class="arrow-Link">）
 *     - 削除: Step L3（.skewed* 斜め帯打消し・新DOMに .skewed 不在）
 *   残置: Step B（page-id-785 行間字間・見出し・font-En。body class 健在）、
 *         Step C0（figure img radius。event-Area-Grid 等で figure img が現存）、
 *         Step #2（csp 検索 submit ピル。サイト共通検索でトップ非依存）。
 * ==================================================================== */

/* ---- Step B: 主要画面（page-id-785）スコープの行間・字間（Y3）----
 * 全ページ波及を避け、トップ主要画面 body class にスコープして先行適用する。
 * 値: v1.1-draft.md §2.4（body 1.7）/ §2.5（ja-body .04em・ja-heading .06em・en .02em）/ §2.7 禁則 */
.page-id-785 {
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.page-id-785 h1,
.page-id-785 h2,
.page-id-785 h3,
.page-id-785 h4,
.page-id-785 h5,
.page-id-785 h6 {
  line-height: 1.6;
  letter-spacing: 0.06em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.page-id-785 .font-En,
.page-id-785 .font-Enbold {
  letter-spacing: 0.02em;
}

/* ---- Step C0: 画像 radius（主要画面限定・回帰小）---- */
.page-id-785 .wp-post-image,
.page-id-785 figure img {
  border-radius: var(--radius-card);            /* 20px */
}

/* ---- Step #2: ヘッダー/フッター 検索フォーム submit のピル化（DESIGN §4.6）----
 * custom-search-plugin の `<button type="submit" class="btn">検索する` は
 * 子テーマ汎用ルール `form button[type="submit"]`(style.css) で
 * border-radius:5px の角矩形＝NG早見表「角ばった矩形ボタン」に抵触（Plato指摘）。
 * DESIGN §4.6 = 検索ボックス/ボタンはピル。--radius-pill(60px) へ是正。
 * セレクタを CSP 検索ボックス内に限定し、会員/プロフィール等の他フォーム submit には波及させない。
 * 詳細度 (0,3,1) > form button[type="submit"] (0,1,1) かつ core は style.css 後ロード(priority 20)ゆえ !important 不要。 */
.csp-search-box .csp-submit button[type="submit"],
.csp-search-box .csp-submit .btn[type="submit"] {
  background-color: var(--color-cta-bg);          /* #003594 */
  color: var(--color-cta-text);                   /* #FFFFFF */
  border: none;
  border-radius: var(--radius-pill);              /* 60px ピル */
  font-size: var(--font-size-arrow-link);
  padding: 14px 40px;
  cursor: pointer;
  transition: background-color .4s ease-in-out;
}
.csp-search-box .csp-submit button[type="submit"]:hover,
.csp-search-box .csp-submit .btn[type="submit"]:hover {
  background-color: var(--color-blue-light);      /* #0050E0・白文字 6.51:1 AA */
}