/* =========================================================
   AI家来づくり LP — design tokens
   出典:
     [M] innovate-lab.jp 本体サイト（Next.js + Tailwind のビルドCSSから抽出）
     [P] pleasanter.innovate-lab.jp LP（index.html 内の <style> から抽出）
   方針: 色・フォントは本体サイト[M]に合わせ、ページの組み方・部品の形は[P]を踏襲する。
   ページ側のCSSは、ここで定義した変数だけを参照すること。
   ========================================================= */

:root {
  /* ---------- Color: brand ---------- */
  --color-navy:        #0c3484;  /* [M] メイン。[P]は #0A3584（ほぼ同色） */
  --color-navy-hover:  #0d2b68;  /* [M] ボタンhover */
  --color-navy-deep:   #071f52;  /* [P] ヒーロー/CTAのグラデーション終端 */
  --color-navy-ink:    #061838;  /* [P] フッター最下部 */
  --color-gold:        #facd89;  /* [M] アクセント（ロゴの太陽色）。[P]は #FFD58E / #F2A93B */
  --color-gold-strong: #f2a93b;  /* [P] 主ボタンの影・フォーカスリング用 */
  --color-gold-tint:   rgba(250, 205, 137, 0.30);  /* 強調面の下地 */
  --color-gold-marker: rgba(250, 205, 137, 0.70);  /* 見出しの蛍光ペン風マーカー */
  --color-on-navy-faint: rgba(250, 247, 241, 0.06); /* [P] ヒーロー内の帯 rgba(255,255,255,.06〜.08) */

  /* ---------- Color: surface / text ---------- */
  --color-ivory:  #faf7f1;  /* [M] ページ背景 */
  --color-paper:  #ffffff;  /* [M] カード背景（bg-paper） */
  --color-tint:   rgba(12, 52, 132, 0.05);  /* [M] navy/[0.05] 淡い面・タグ背景 */
  --color-sumi:   #231815;  /* [M] 本文（墨）。[P]は #231916 */
  --color-text-muted:  rgba(35, 24, 21, 0.78);  /* [M]は sumi/65。読みやすさのため濃くした */
  --color-text-subtle: rgba(35, 24, 21, 0.60);  /* [M]は sumi/50。注記 */
  --color-on-navy:       #faf7f1;                   /* [M] text-ivory */
  --color-on-navy-muted: rgba(250, 247, 241, 0.84); /* [M]は ivory/70。読みやすさのため濃くした */
  --color-on-navy-subtle:rgba(250, 247, 241, 0.40); /* [M] ivory/40 */

  /* ---------- Color: border ---------- */
  --color-line:        rgba(35, 24, 21, 0.10);  /* [M] border-sumi/10 カード枠 */
  --color-line-soft:   rgba(35, 24, 21, 0.05);  /* [M] border-sumi/5 ヘッダー下線 */
  --color-line-navy:   rgba(12, 52, 132, 0.20); /* [M] border-navy/20 タグ枠・カードhover */
  --color-line-on-navy:rgba(250, 247, 241, 0.10);/* [M] ivory/10 フッター区切り */

  /* ---------- Font family ---------- */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;  /* [M] */
  --font-en: "Manrope", sans-serif;                                                 /* [M] 英字ラベル・数字 */
  --font-body:    var(--font-jp);
  --font-display: "Manrope", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; /* [M] .font-display */
  --font-feature: "palt";  /* [M] body に font-feature-settings:"palt" */

  /* ---------- Font weight ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;  /* [M] 見出し(.font-display) */
  --fw-heavy:   800;  /* [M] 英字ラベル font-extrabold */

  /* ---------- Font size ---------- */
  --fs-xs:   12px;   /* 英字アイブロウ・コピーライト（[M]は11px） */
  --fs-caption: 13px; /* 出典・小注記 */
  --fs-sm:   14px;   /* フッター・注記 */
  --fs-ui:   15px;   /* カード本文・表 */
  --fs-base: 16px;   /* 本文（[M]は15px） */
  --fs-lead: clamp(1rem, 1.5vw, 1.125rem);  /* リード文 16→18px */
  --fs-md:   19px;   /* カード見出し */
  --fs-lg:   22px;   /* 小見出し・強調 */
  --fs-stat: clamp(1.75rem, 3.6vw, 2.5rem);  /* 帯の数字（3週間など） */
  --fs-label: clamp(1.15rem, 2.6vw, 1.75rem); /* [M] 英字セクションラベル（SERVICES 等） */
  --fs-h2:    clamp(1.9rem, 6.6vw, 3.1rem);   /* セクション見出し 30→50px（[M]は〜41px） */
  --fs-h1:    clamp(2.4rem, 10vw, 4.6rem);    /* キャッチ 38→74px（[M]は 2.7rem→5rem） */
  --fs-price: clamp(2.5rem, 5vw, 3.25rem);    /* 料金の金額 40→52px */

  /* ---------- Line height / tracking ---------- */
  --lh-body:    1.95;  /* 文字を大きくした分、行間は少し詰める（[M]は2.1〜2.3） */
  --lh-tight:   1.2;   /* [M] h1 */
  --lh-heading: 1.5;   /* [M] h2 */
  --ls-heading: -0.02em;  /* [M] h2 */
  --ls-label:   0.12em;   /* [M] 英字セクションラベル */
  --ls-eyebrow: 0.35em;   /* [M] ヒーロー上の英字 */
  --ls-button:  0.1em;    /* [M] tracking-widest 相当 */

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;   /* [M] px-6 / [P] .wrap padding */
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --gutter:        24px;  /* [M] px-6（スマホ）。375px幅では本文幅327px */
  --gutter-lg:     40px;  /* [M] lg:px-10 */
  --section-y:     clamp(56px, 12vw, 128px);  /* スマホ56px〜PC128px（[M] py-28〜40 / [P] 64–88px） */
  --section-head-gap: 48px;  /* [M] mb-12 */

  /* ---------- Layout ---------- */
  --maxw:        1152px;  /* [M] max-w-6xl。[P]は 1080px */
  --maxw-text:   34rem;   /* [M] リード文の最大幅 */
  --header-h:    68px;    /* [P] */
  /* ブレークポイント（CSS変数はmedia queryで使えないため、値の控えとして記載）
     --bp-md: 768px  [M] Tailwind md / ナビ表示切替
     --bp-lg: 1024px [M] Tailwind lg
     [P] は 900px 1本。LPでは 768px / 1024px を使う */
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* ---------- Radius ---------- */
  --radius-sm:   6px;    /* [M] rounded-md */
  --radius-md:   12px;   /* [M] rounded-xl メニュー項目 */
  --radius-card: 16px;   /* [M] rounded-2xl カード。[P]は14px */
  --radius-pill: 999px;  /* [M][P] ボタン・タグ */

  /* ---------- Shadow ---------- */
  --shadow-card-hover: 0 20px 45px -25px rgba(12, 52, 132, 0.35);  /* [M] */
  --shadow-float:      0 20px 50px rgba(3, 14, 42, 0.30);          /* [P] ヒーロー上の白カード */
  --shadow-button:     0 6px 18px rgba(242, 169, 59, 0.35);        /* [P] 主ボタン */

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.65, 0, 0.35, 1);  /* [M] ボタンの塗りアニメ */
  --dur-fast:  150ms;
  --dur-base:  300ms;
  --dur-fill:  450ms;   /* [M] */

  /* =========================================================
     Component tokens（部品の見た目）
     ========================================================= */

  /* Button —— [M] 角丸ピル、太字、字間広め。主=ゴールド地+ネイビー字、副=枠線 */
  --btn-font:        var(--font-jp);
  --btn-weight:      var(--fw-bold);
  --btn-fs:          16px;           /* [M]は14px。押しやすさ優先 */
  --btn-fs-lg:       19px;           /* 料金・末尾CTA用 */
  --btn-pad-y:       18px;
  --btn-pad-x:       40px;
  --btn-radius:      var(--radius-pill);
  --btn-primary-bg:  var(--color-gold);
  --btn-primary-fg:  var(--color-navy);
  --btn-primary-hover-bg: var(--color-ivory);  /* [M] ivory が左から塗られる */
  --btn-navy-bg:     var(--color-navy);        /* [M] ヘッダーの「お問合せ」 */
  --btn-navy-fg:     var(--color-ivory);
  --btn-ghost-border:rgba(250, 247, 241, 0.45);/* [M] border-ivory/45 */
  --btn-focus-ring:  3px solid var(--color-gold-strong);  /* [P] */

  /* Section heading —— [M] ロゴマーク(イルカ) + 英字ラベル(Manrope 800, uppercase, navy) → 和文h2(sumi) → リード */
  --sechead-mark-h:     40px;   /* [M] h-10 / lg:h-12(48px) */
  --sechead-mark-gap:   12px;   /* [M] gap-3 */
  --sechead-label-font: var(--font-en);
  --sechead-label-weight: var(--fw-heavy);
  --sechead-label-color:  var(--color-navy);
  --sechead-title-color:  var(--color-sumi);
  --sechead-title-mt:     24px; /* [M] mt-6 */
  --sechead-lead-mt:      28px; /* [M] mt-7 */
  --sechead-lead-color:   var(--color-text-muted);

  /* Card —— [M] 白地・細枠・16px角丸、hoverで浮く */
  --card-bg:      var(--color-paper);
  --card-border:  1px solid var(--color-line);
  --card-radius:  var(--radius-card);
  --card-pad:     28px;   /* [M] p-7 / lg:p-9(36px) */
  --card-pad-lg:  36px;
  --card-num-color: rgba(12, 52, 132, 0.60);  /* [M] 01/02… の英数字 */

  /* Tag —— [M] 「中小～中堅企業」タグ */
  --tag-bg:     var(--color-tint);
  --tag-border: 1px solid var(--color-line-navy);
  --tag-fg:     var(--color-navy);
  --tag-fs:     11px;

  /* Pricing —— [P] 白カード + おすすめ枠(navy 2px) + 太字の金額 */
  --price-bg:          var(--color-paper);
  --price-border:      1px solid var(--color-line);
  --price-reco-border: 2px solid var(--color-navy);
  --price-reco-badge-bg: var(--color-navy);
  --price-reco-badge-fg: var(--color-ivory);
  --price-amount-color:  var(--color-navy);
  --price-amount-font:   var(--font-en);  /* 数字はManropeで [M] */
  --price-unit-color:    var(--color-text-muted);

  /* Table（比較表） */
  --table-head-bg:  var(--color-navy);
  --table-head-fg:  var(--color-ivory);
  --table-row-alt:  var(--color-tint);
  --table-border:   1px solid var(--color-line);

  /* FAQ —— [P] details/summary、白地カード、右端に＋/－ */
  --faq-bg:       var(--color-paper);
  --faq-border:   1px solid var(--color-line);
  --faq-radius:   var(--radius-card);
  --faq-q-color:  var(--color-navy);
  --faq-a-color:  var(--color-text-muted);
  --faq-icon-color: var(--color-navy);

  /* Header —— [M] sticky、ivory 85%＋blur、下線sumi/5 ／ 形式は[P]（ロゴ＋相談ボタンのみ） */
  --header-bg:      rgba(250, 247, 241, 0.85);
  --header-blur:    12px;
  --header-border:  1px solid var(--color-line-soft);
  --header-logo-h:  40px;  /* [P] 38px */

  /* Character（イメージキャラクター「AI家来」） —— 高さで指定。-sp は 767px 以下 */
  --kerai-hero-h-sp:    128px;
  --kerai-hero-h:       280px;
  --kerai-komari-h-sp:  150px;
  --kerai-komari-h:     220px;
  --kerai-aisatsu-h-sp: 120px;
  --kerai-aisatsu-h:    190px;

  /* Speech bubble —— 本文フォント・細枠・小さめの角丸。漫画風にしない */
  --bubble-bg:     var(--color-paper);
  --bubble-fg:     var(--color-navy);
  --bubble-border: 1px solid var(--color-line-navy);
  --bubble-radius: var(--radius-md);
  --bubble-fs:     var(--fs-ui);
  --bubble-pad-y:  var(--space-2);
  --bubble-pad-x:  var(--space-4);
  --bubble-maxw:   14em;
  --bubble-tail:   10px;

  /* Footer —— [M] navy地、ivory文字、白ロゴ、細い区切り線 ／ 形式は[P]（会社情報＋本体サイトリンク） */
  --footer-bg:      var(--color-navy);
  --footer-fg:      var(--color-on-navy-muted);
  --footer-strong:  var(--color-on-navy);
  --footer-link-hover: var(--color-gold);
  --footer-fs:      var(--fs-sm);
  --footer-logo-h:  56px;  /* [M] h-14 */
}