@charset "UTF-8";
/* ==========================================================================
   tools/_shared/tokens.css
   Roboma tools 共通デザイントークン

   § 1 は roboma-lp-builder スキルの references/brand-tokens.md を
       そのまま写したもの（**値を勝手に変えない**）。
   § 2 は tools/ 配下の診断ページ用に § 1 から派生させたエイリアス。
       色は必ず § 1 の変数から導出し、16進数を直接書かない。

   読み込み順: tokens.css → layout.css → 各ツールの assets/app.css
   本体 LP の /style.css は読み込まない（DOM・クラス名を独立させるため）
   ========================================================================== */

/* ==========================================================================
   § 1. 公式ブランドトークン（brand-tokens.md 準拠）
   ========================================================================== */
:root {
  /* ── Primary ──────────────────────────── */
  --rm-navy:        #0F1240;  /* ロゴ文字色・ヒーロー暗背景 */
  --rm-navy-mid:    #1A2060;  /* パネル背景（ネイビーより少し明るい） */
  --rm-blue-dark:   #2D3C87;  /* ロゴマーク下部・濃いアクセント */
  --rm-blue:        #4B78C3;  /* ★メインブランドブルー（CTA・アクセント） */
  --rm-blue-light:  #5AA5F0;  /* 薄めのブルー */
  --rm-cyan:        #1EE1F0;  /* シアン（グロー・アクセント） */
  --rm-purple:      #8796F0;  /* パープル（ロゴ中段・差し色） */

  /* ── Background ───────────────────────── */
  --rm-bg-white:    #FFFFFF;
  --rm-bg-gray:     #F4F5F8;  /* セクション背景 */
  --rm-bg-card:     #EEF0F7;  /* カード背景 */
  --rm-bg-active:   #EBF0FA;  /* ハイライト背景・選択状態 */

  /* ── Text ─────────────────────────────── */
  --rm-text-dark:   #0F1240;  /* 見出し */
  --rm-text-body:   #333344;  /* 本文（少し柔らかいダーク） */
  --rm-text-gray:   #6B7599;  /* サブ説明文 */
  --rm-text-mid:    #9BA3BF;  /* プレースホルダー・フッター文字 */
  --rm-text-white:  #FFFFFF;

  /* ── Border / Divider ─────────────────── */
  --rm-border:      #E0E4EE;  /* 区切り線・テーブル罫線 */

  /* ── Status ───────────────────────────── */
  --rm-success:     #28A745;
  --rm-warning:     #FFC107;
  --rm-danger:      #DC3545;

  /* ── グラデーション ───────────────────── */
  --rm-gradient-hero: linear-gradient(135deg, #0F1240 0%, #2D3C87 50%, #4B78C3 100%);
  --rm-gradient-cta:  linear-gradient(135deg, #4B78C3 0%, #1EE1F0 100%);
  --rm-gradient-soft: linear-gradient(180deg, #FFFFFF 0%, #EBF0FA 100%);

  /* ── フォント ─────────────────────────── */
  --rm-font-jp: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
                "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  --rm-font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --rm-font-num: "Inter", "Helvetica Neue", sans-serif;

  /* ── タイポグラフィスケール ───────────── */
  --rm-fs-hero:  clamp(2rem, 5vw, 3.5rem);
  --rm-fs-h1:    clamp(1.75rem, 4vw, 2.5rem);
  --rm-fs-h2:    clamp(1.5rem, 3vw, 2rem);
  --rm-fs-h3:    1.25rem;
  --rm-fs-body:  1rem;
  --rm-fs-small: 0.875rem;
  --rm-fs-xs:    0.75rem;

  /* ── スペーシング ─────────────────────── */
  --rm-section-py: clamp(60px, 8vw, 120px);
  --rm-container:  1200px;
  --rm-gap-sm:     12px;
  --rm-gap-md:     24px;
  --rm-gap-lg:     48px;
  --rm-gap-xl:     80px;

  /* ── カード / 影 ──────────────────────── */
  --rm-radius-sm: 8px;
  --rm-radius-md: 16px;
  --rm-radius-lg: 24px;
  --rm-shadow-card: 0 4px 20px rgba(15, 18, 64, 0.08);
  --rm-shadow-card-hover: 0 8px 32px rgba(15, 18, 64, 0.15);
}

/* ==========================================================================
   § 2. 診断ツール用の派生エイリアス
   § 1 の変数からのみ導出する。診断ページは「読み物」ではなく入力フォームなので、
   LP より本文幅を狭め、余白スケールを細かく持つ。
   ========================================================================== */
:root {
  /* --- テキスト --- */
  --rm-text: var(--rm-text-body);
  --rm-text-sub: var(--rm-text-gray);
  --rm-text-mute: var(--rm-text-mid);
  --rm-text-invert: var(--rm-text-white);

  /* --- 面 --- */
  --rm-bg: var(--rm-bg-white);
  --rm-bg-soft: var(--rm-bg-gray);
  --rm-bg-navy: var(--rm-navy);

  /* --- 選択状態・ハイライト --- */
  --rm-blue-tint: var(--rm-bg-active);
  /* 選択肢・入力欄の枠。--rm-border では境界が弱く操作対象に見えないため、
     WCAG の非テキストコントラスト 3:1 を満たす濃さのブルーグレーを使う */
  --rm-border-strong: #C9CEDD;
  /* PDFフォーム等、ブルー面のカードの枠線 */
  --rm-blue-line: #C9DAF2;
  /* 「自動化後」を示す面。シアンを面で使うと強すぎるため薄いティントにする */
  --rm-cyan-tint: #E6FCFE;

  /* --- 注意を引く面（--rm-warning の薄いティント） ---
     読ませたい補足を目立たせるための背景。テキストは --rm-text で AA を満たす */
  --rm-attention-bg: #FFF8E1;
  --rm-attention-line: #F2DFA6;

  /* --- ステータス（§1 のエイリアス。独自色は作らない） --- */
  --rm-alert: var(--rm-danger);   /* コスト・上限超過の注意喚起 */
  --rm-good: var(--rm-success);

  /* --- 強CTAの配色（規約からの意図的な例外） -----------------------------
     brand-tokens.md の強CTAは --rm-gradient-cta（ブルー→シアン）だが、
     本体 LP の CTA（.gradation）がオレンジ→ピンクで統一されており、
     サイト内で同じボタンが2色あると迷わせるため LP 側に合わせる。
     ※ この配色は現状維持とする方針が確定済み。変更する場合は LP 側と同時に行う。 */
  --rm-cta-from: #FF8855;
  --rm-cta-to: #FF3366;
  --rm-cta-gradient: linear-gradient(135deg, var(--rm-cta-from) 0%, var(--rm-cta-to) 100%);

  /* --- タイポグラフィ（§1 のスケールに対応付ける） --- */
  --rm-font: var(--rm-font-jp);
  --rm-fs-sm: var(--rm-fs-small);
  --rm-fs-base: var(--rm-fs-body);
  --rm-fs-md: var(--rm-fs-h3);
  --rm-fs-lg: var(--rm-fs-h2);
  --rm-fs-xl: var(--rm-fs-h1);
  --rm-fs-2xl: var(--rm-fs-hero);
  --rm-lh: 1.7;      /* brand-tokens.md の body line-height */
  --rm-ls: 0.04em;

  /* --- レイアウト --- */
  --rm-container-tool: 880px;   /* 診断本文の幅（LP の 1200px より狭める） */
  --rm-container-wide: 1120px;

  /* --- 角丸・影（§1 のエイリアス） --- */
  --rm-radius: var(--rm-radius-md);
  --rm-shadow-sm: 0 1px 2px rgba(15, 18, 64, 0.06);
  --rm-shadow: var(--rm-shadow-card);
  --rm-shadow-lg: var(--rm-shadow-card-hover);

  /* --- 余白（--rm-gap-* より細かい刻みが必要なため） --- */
  --rm-space-1: 4px;
  --rm-space-2: 8px;
  --rm-space-3: var(--rm-gap-sm);   /* 12px */
  --rm-space-4: 16px;
  --rm-space-5: var(--rm-gap-md);   /* 24px */
  --rm-space-6: 32px;
  --rm-space-7: var(--rm-gap-lg);   /* 48px */
  --rm-space-8: 64px;

  /* --- ヘッダー高さ（sticky 用） --- */
  --rm-header-h: 60px;
}

@media (min-width: 768px) {
  :root { --rm-header-h: 72px; }
}

/* ==========================================================================
   § 3. Noto Sans JP
   brand-tokens.md は Google Fonts からの読み込みを指定しているが、
   本体 LP が同じ Noto Sans JP を woff2 でローカル配信しているため、
   外部リクエストを増やさない目的でそちらを再利用する（書体は規約どおり）。
   tools/<tool>/ から見た相対パスは ../../assets/font/
   ========================================================================== */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/font/NotoSansJP-Regular.woff2") format("woff2"),
       url("../../assets/font/NotoSansJP-Regular.woff") format("woff");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/font/NotoSansJP-Medium.woff2") format("woff2"),
       url("../../assets/font/NotoSansJP-Medium.woff") format("woff");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/font/NotoSansJP-Bold.woff2") format("woff2"),
       url("../../assets/font/NotoSansJP-Bold.woff") format("woff");
}