@charset "UTF-8";
/* =========================================================================
   variables.css — MA COULEUR デザイントークン
   出典：design-spec.md v0.4 ／ 実装指示書 §3
   方針：白基調。黒の面は使わない。ゴールドは細罫線・小印が基本
        （面は下層ヒーローの淡いシャンパンの空気のグラデまで）。
   鉄則：色・フォントはここで一元管理。各CSSは直値を書かず var() を参照する。
   ========================================================================= */

:root {
  /* --- 背景・文字（白が基本） --- */
  --kc-color-base:       #FFFFFF; /* 地。全セクションの背景 */
  --kc-color-soft:       #FBF3F5; /* ごく淡いピンクの面。最終CTA等の見せ場に稀に使う */
  --kc-color-air-pink:   #F6DCE6; /* ヒーローの空気のグラデ／装飾光の淡いピンク（白基調でも知覚できる低彩度ピンク） */
  --kc-color-champagne:  #FAF3E4; /* 淡いシャンパン。下層ページのヒーローの空気のグラデ（階層の目印） */
  --kc-color-ink:        #3D363C; /* 文字（くすみプラム。純黒 #000 は使わない） */
  --kc-color-sub:        #8A7A82; /* 補助文字（ラベル・キャプション） */

  /* --- アクセント：ピンク（2階級制） --- */
  --kc-color-pink:       #C96591; /* 機能ピンク：下線・ホバー・小UI・アクセント点。白背景3.65:1のため線/ホバー/装飾に留め、本文文字色には使わない（本文は --kc-color-ink） */
  --kc-color-pink-cta:   #D3006E; /* CTA塗り（白文字で5.26:1＝AA合格） */
  --kc-color-brand-pink: #D3006E; /* ブランドピンク（正式ブランドカラー）：ロゴと小さな署名のみ */

  /* --- アクセント：ゴールド（極小署名） --- */
  --kc-color-gold:       #B89A5E; /* 金：細い罫線・小印のみ（面で塗らない） */
  --kc-color-gold-ink:   #8C6F38; /* 金を小さな文字に使う時の可読版 */
  --kc-color-goldln:     #E4D6B4; /* 金の細罫線（淡）。ヘッダー下辺・最終CTA等 */

  /* --- 罫線（中立） --- */
  --kc-color-line:       #EFEAEC; /* 中立の細罫線（区切り） */

  /* --- フォント --- */
  /* 見出し：游明朝体 Pr6N（Adobe Fonts）。h1〜h3 / .kc-macouleur-heading に限定適用。
     [要確認] "yu-mincho-pr6n" は暫定。Adobe Fonts Webプロジェクトに表示される正確値へ差し替える。
     キット未設定でもフォールバック明朝で見出しが空白にならない。 */
  --kc-font-display: "yu-mincho-pr6n", "Yu Mincho", "YuMincho",
                     "Hiragino Mincho ProN", "Noto Serif JP", serif;
  /* 本文：Noto Sans JP（セルフホスト）。 */
  --kc-font-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                  Meiryo, sans-serif;

  /* --- レイアウト（実測値は custom.js が上書き） --- */
  /* サイトヘッダー高さ。ファーストビュー高 calc(100svh - var(--kc-header-h)) に使用。
     custom.js が #header（＋#wpadminbar）の実高さを設定。JS不発時はこの値。 */
  --kc-header-h: 80px;
}

/* JS不発時のSPフォールバック（SWELLのSPヘッダーは概ね低い）。JSが実測すれば上書きされる。 */
@media (max-width: 768px) {
  :root {
    --kc-header-h: 60px;
  }
}