/* ==========================================================
   tatemon_brand.css — タテモン共通ブランド層（3サービス共有の正）
   2026-08-01 新設（S61）

   目的：書体・配色・部品の質感を1ファイルに集約する。
        これ以前は agent LP・適職診断・年収診断がそれぞれ独自に
        トークンを定義しており、片方だけ書体がズレる事故（D-095で
        Shippori Mincho が入りD-094と衝突）が起きた。以後、
        ブランドに関わる値はこのファイルだけを直す。

   正＝DECISIONS D-093（マスターロゴ・サブブランド名）
       DECISIONS D-094（タイポグラフィ）
       00_経営/docs/ブランド運用ガイドライン_TaTeMON.md §10

   読み込み順（厳守）：
     paypulse_v2.css  →  tatemon_brand.css  →  各サービス固有CSS
   ＝共用の paypulse_v2.css は書き換えず、この層で後読み上書きする。

   ⚠️ ガウディキャリアCP経由（cp=gaudi / gaudi-ad）では、この
      ファイルを読み込まない。ガウディ導線は現行デザインを維持する
      決定のため（2026-08-01 AKI）。判定は各ページの head 内スクリプト。
   ========================================================== */

:root {
  /* ── 書体（D-094）──
     見出し・ロゴ = IBM Plex Sans JP（ロゴ500 / 見出し600）
     本文・説明・チェック項目 = Noto Sans JP 400
     数値は等幅の IBM Plex Mono（欧文のみ・和文は Noto へフォールバック） */
  --font-head: 'IBM Plex Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-body: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* paypulse_v2.css の既存トークン名に流し込む（既存ルールを書き換えずに効かせる） */
  --plex: var(--font-head);
  --jp:   var(--font-body);
  --mono: var(--font-mono);

  /* ── ブランドグリーン ── */
  --green:       #1c382e;   /* 主色（ボタン・バー・アクセント） */
  --green-dark:  #152b23;   /* hover */
  --green-deep:  #0f1f19;   /* 最強調（数値・ランク） */
  --green-mid:   #2f5647;   /* バーの塗り（深緑だけだと黒く見えるため中間色） */
  --green-light: #e6ece6;   /* バッジ等の薄面 */

  /* ── 面・罫線・背景（生成り）── */
  --white:   #ffffff;
  --bg-soft: #f6f4ee;
  --beige:   #f1ecdf;
  --line:    #dedacd;
  --line-2:  #e7e3d8;

  /* ── 本文（緑がかった墨）── */
  --ink:   #26261f;
  --ink-2: #4c4a41;
  --ink-3: #75725f;
  --ink-4: #a8a493;

  /* ── Do/Don't・二項対立の面 ── */
  --good-bg:         #f4f6f2;
  --good-line:       rgba(28, 56, 46, .22);
  --green-tint:      #e9efe7;
  --green-tint-line: #c7d4c4;

  /* ── 対極（右側）＝生成り背景に馴染むテラコッタ ── */
  --warm:       #9c4a24;
  --warm-deep:  #6b3117;
  --warm-light: #f6ece2;
  --warm-line:  #e2c9b4;

  /* ── 年収診断・結果ページのヒーローバンド ──
     旧デザインは navy(#16233f)。ページ側は var(--hero-*, navy) で参照しており、
     このファイルを読まないガウディCP導線では navy のまま残る。 */
  --hero-bg:      var(--green);
  --hero-eyebrow: #a9c0b1;
  --hero-sub:     #ccd8ce;

  /* ── 部品の質感（Lv2：3サービスで形を揃える）── */
  --radius:    12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}

/* ----------------------------------------------------------
   ベース
   ---------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg-soft);
  color: var(--ink);
  font-feature-settings: 'palt' 1;
}

/* 見出しは IBM Plex Sans JP SemiBold（D-094）。
   paypulse_v2.css は .h1〜.h3 を 700 で組んでいるため 600 へ落とす。 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
  font-family: var(--font-head);
  font-weight: 600;
}

/* ロゴは Medium 500（D-094） */
.logo, .site-header .logo {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--green);
  white-space: nowrap;
}

/* ラベル・ボタン類は本文より一段締める（ゴシックでも視線の階層を保つ） */
.eyebrow, .cta, .btn, button, label, th {
  font-family: var(--font-head);
  font-weight: 600;
}

/* 数字は等幅で桁を揃える（比較・順位の可読性） */
.mono, .num, .n, table td, table th {
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------
   共通部品
   ---------------------------------------------------------- */
.site-header { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.site-footer { background: var(--beige);   border-top: 1px solid var(--line); }
.site-header .logo .dot      { color: var(--warm); }
.site-header .logo .logo-sub { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-left: 8px; }

/* CTA＝ブランド深緑のピル型（3サービス共通の形） */
.cta {
  background: var(--green);
  border-color: var(--green);
  border-radius: var(--radius-pill);
  color: #fff;
}
.cta:hover { background: var(--green-dark); border-color: var(--green-dark); }

/* リンク */
a       { color: var(--green); }
a:hover { color: var(--green-dark); }

/* カード・面 */
.card, .panel, .box {
  background: var(--white);
  border-color: var(--line);
  border-radius: var(--radius);
}