/*
 * ブランド刷新 2026-08 —— ローカル検証ドラフト。
 *
 * 正式ロゴ = logo-lockup-tracking-wide。カラー・書体はブランドガイドライン
 * （カラーパレット / 書体とテキストスタイル）の指定値のみを使う。
 * main.css は1行も書き換えず、jp-typography.css の後に読み込んで
 * テンプレートの CSS 変数を上書きする（jp-typography.css と同じ流儀）。
 *
 * 使用比率の目安（ガイドライン）: オフホワイト60% / インク20% / キー12% / アクセント4色 計8%。
 */
:root {
  /* --- コアパレット（ガイドライン指定値） --- */
  --brand-pickle-green: #afc70f; /* KEY */
  --brand-leaf: #8fbf3f;
  --brand-sprout: #c6d96b;
  --brand-ink: #1e1e16;
  --brand-off-white: #f7f6f1;
  --brand-sky: #a8c4e8;
  --brand-mint: #6fcfae;
  --brand-apricot: #f79b55;
  --brand-sand: #d9c9a0;

  /* 文字にブランド色を使うとき専用の濃い版。
   * キーのピクルグリーンは白地で 1.8:1 しかなく（面・装飾の色）、文字には使えない。
   * この値は白地 8.2:1 / オフホワイト 7.6:1 で AA を満たす。src/styles/global.css の
   * --color-brand-ink と同じ値（2箇所で同じ値を持つ）。 */
  --brand-ink-green: #4a5406;

  /* --- テンプレート変数への割り当て --- */
  /* 紫 #864ffe → キーカラー（強調・要点） */
  --color-primary-500: var(--brand-pickle-green);
  /* ほぼ黒 #1a1a1c → インク（文字・濃い地） */
  --color-secondary: var(--brand-ink);
  /* body の地 #f2f5fa（青みの白）→ オフホワイト */
  --color-background-13: var(--brand-off-white);
  /* 濃い地 #0d0d12 → インク */
  --color-background-14: var(--brand-ink);
  /* 黄緑グラデ #daff95→#bfee67 → スプラウト→ピクルグリーン */
  --color-gradient-14: linear-gradient(
    180deg,
    var(--brand-sprout) 0%,
    var(--brand-pickle-green) 100%
  );

  /* --- 書体 ---
   * ガイドライン: Baloo 2 は「ロゴタイプ・見出しの欧文」のみ。
   * 本文・UI は数字を含めて Noto Sans JP（Latin グリフも Noto Sans JP が持つ）。 */
  --font-inter-tight:
    'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'BIZ UDPGothic', Meiryo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans:
    'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'BIZ UDPGothic', Meiryo, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* セキュリティ・連携セクションのセリフ見出し（Instrument Serif）を新ブランドの
   * 見出し書体へ（高木さん指示 2026-08-14）。.text-is-heading-* / .font-instrument-serif は
   * すべてこの変数を経由しているので、値の差し替えだけで置き換わる */
  --font-instrument-serif:
    'Baloo 2', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
    'Hiragino Sans', 'BIZ UDPGothic', Meiryo, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ボタン・ラベルの等幅（IBM Plex Mono）も本文と同じ書体に寄せる。
   * ガイドラインの書体は2つだけで、等幅は入っていない。
   * これで Google Fonts から読む書体が Baloo 2 と Noto Sans JP の2つになる。 */
  --font-mono:
    'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'BIZ UDPGothic', Meiryo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ibm-plex-mono:
    'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'BIZ UDPGothic', Meiryo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* セキュリティ／連携セクション（ai-marketing-agency 流用）は `[data-opai]` スコープの中で
 * --font-instrument-serif を再定義しているので、:root だけでは届かない。同じスコープで上書きする。 */
[data-opai] {
  --font-instrument-serif:
    'Baloo 2', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
    'Hiragino Sans', 'BIZ UDPGothic', Meiryo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* セリフ前提の見出しは font-normal(400) が当たっているが、サンセリフでは
 * ガイドラインどおり 700 に上げる（同詳細度・後勝ちで .font-normal を上書き） */
.text-is-heading-1,
.text-is-heading-2,
.text-is-heading-3,
.text-is-heading-4,
.text-is-heading-5,
.text-is-heading-6 {
  font-weight: 700;
}

/* main.css がハードコードしている紫のグラデーション終端。同名セレクタで色だけ差し替える */
.to-\[\#864FFE\] {
  --tw-gradient-to: var(--brand-pickle-green);
}

/* `primary-500` は面（背景・下線バー）に使う想定の色。**文字に当てると読めない**ので、
 * 文字として使っているクラスだけ濃い版に差し替える（/why-pickles の h1 後半）。 */
.text-primary-500 {
  color: var(--brand-ink-green);
}

/* /comparison の h1 のグラデーション文字（流用元は 紫 #a585ff → ピーチ #ffc2ad）。
 * 文字に当たるので、キーカラーの明部ではなく**濃い版のあいだ**で振る。
 * 実測コントラスト: 濃い緑 8.2:1 / リーフの濃い版 5.9:1（どちらも AA 充足）。 */
.hero-text-color-1 {
  background-image: linear-gradient(45deg, var(--brand-ink-green), #6b7a12, var(--brand-ink-green));
}

/* ヘッダーのロゴ: ピルの左端に付きすぎるので 20px 空ける（高木さん指示 2026-08-14） */
.header-scroll a .logo {
  margin-left: 20px;
}

/* ヘッダーの CTA「専用デモを依頼」: 白いピルの中で黒背景だけが目立つため、
 * キーカラー地＋インク文字に変更（高木さん指示 2026-08-14）。
 * コントラストはインク on ピクルグリーン ≒ 9:1（AA 充足）。
 * 矢印チップはグラデーションをやめて白地（黒矢印はテンプレートのまま） */
.header-scroll .button.bg-secondary {
  background-color: var(--brand-pickle-green);
  color: var(--brand-ink);
}
.header-scroll .button.bg-secondary .button-icon {
  background-image: none;
  background-color: var(--color-white);
}

/* 見出し: 欧文 = Baloo 2 Bold（和文グリフが無いので仮名・漢字は Noto Sans JP に落ちる）。
 * ウェイトはガイドライン指定の 700（jp-typography.css の 600 を上書き） */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:
    'Baloo 2',
    'Noto Sans JP',
    -apple-system,
    BlinkMacSystemFont,
    'Hiragino Kaku Gothic ProN',
    'Hiragino Sans',
    'BIZ UDPGothic',
    Meiryo,
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif;
  --tw-font-weight: 700;
  font-weight: 700;
}