/* =============================================================
   tokens.css — PRONIアイミツ デザイントークン（正・SOURCE OF TRUTH）
   -------------------------------------------------------------
   IM_スタイルガイド（proni-imitsu-styleguide / imitsu-site-design）から
   転記した公式デザイントークン。色・タイポ・余白・影・字間をここに一元管理する。

   読み込み順（必須）:
     fonts → tokens.css → typography.css → style.css

   ★ このファイルは編集しない（共通基盤）。LP個別の調整は各HTMLの
     <style> 内で :root をオーバーライドして行う。
   ============================================================= */

:root {
  /* =========================================================
     1. カラー — ブランド / Primary（赤）
     使用ルール: 赤はCV導線・最重要要素のみに限定する（多用しない）
     ========================================================= */
  --color-primary: #de2d2d;            /* High Emphasis */
  --color-primary-medium: rgb(222 45 45 / 60%);
  --color-primary-low: rgb(222 45 45 / 38%);
  --color-primary-deep: #b90a0a;       /* Hover/Pressed */
  --color-primary-container: #fce6e2;  /* チップ等の背景 */
  --color-primary-surface: #fefbfb;    /* 薄い背景 */

  /* カラー — Secondary（ブラウン） */
  --color-secondary: #9f7356;
  --color-secondary-deep: #8a5b42;
  --color-secondary-container: #ebe6dc;
  --color-secondary-surface: #f7f5f3;

  /* =========================================================
     2. カラー — セマンティック（Info / Success / Error）
     ※旧テンプレには無かった。フォームのエラー/完了表示等で使用
     ========================================================= */
  /* Info（青） — リンク標準色は Info Deep を使う */
  --color-info: #1b6ef3;
  --color-info-deep: #1253d3;
  --color-info-container: #bddef9;
  --color-info-surface: #f1f8fd;
  --color-link: var(--color-info-deep);   /* インラインリンクの標準色 */

  /* Success（緑） */
  --color-success: #16a247;
  --color-success-deep: #12813b;
  --color-success-container: #dff6e7;
  --color-success-surface: #f8fff8;

  /* Error（オレンジ） */
  --color-error: #d24d14;
  --color-error-deep: #bb3c11;
  --color-error-container: #fbebda;
  --color-error-surface: #fdfbf8;

  /* =========================================================
     3. カラー — テキスト / 背景 / ボーダー（GrayScale）
     ベース #06101A の不透明度で強調レベルを表現
     ========================================================= */
  --color-text-1: rgb(6 16 26 / 92%);  /* High（本文） */
  --color-text-2: rgb(6 16 26 / 62%);  /* Medium（補足） */
  --color-text-3: rgb(6 16 26 / 38%);  /* Disabled（薄） */

  --color-bg-white: #fff;              /* Surface Light */
  --color-bg-light: #f6f6f6;           /* Gray 50 */
  --color-bg-muted: #f7f5f3;           /* Secondary Surface */

  --color-outline-1: rgb(6 16 26 / 38%); /* 強めの罫線 */
  --color-outline-2: rgb(6 16 26 / 12%); /* 薄い罫線・区切り */
  --color-border: var(--color-outline-2);

  --color-overlay: rgb(6 16 26 / 8%);  /* ホバー等のオーバーレイ */
  --color-scrim: rgb(6 16 26 / 32%);   /* モーダル背景 */

  /* GrayScale（必要に応じて使用） */
  --gray-0: #fff;   --gray-50: #f6f6f6; --gray-100: #e3e3e3;
  --gray-200: #c8c8c8; --gray-300: #a4a4a4; --gray-400: #818181;
  --gray-500: #666666; --gray-600: #515151; --gray-700: #424242;
  --gray-800: #313131; --gray-900: #1a1a1a;

  /* =========================================================
     4. フォント
     和文=Noto Sans JP / 欧文・数字=Schibsted Grotesk
     （Schibstedを先頭に置くことでラテン字形のみ欧文フォントが当たる）
     全テキスト共通 letter-spacing = 4%
     ========================================================= */
  --font-family: "Schibsted Grotesk", "Noto Sans JP", sans-serif;
  --ls-base: 0.04em;     /* 全テキスト共通の字間 */

  --fw-regular: 400;
  --fw-bold: 700;

  /* =========================================================
     5. タイポグラフィ・スケール（PCデフォルト値）
     SP値は typography.css の @media(max-width:767px) で上書き
     行間: Display140% / Heading・Title150% / Body160% / Article200%
           / Button130% / Foreign120%
     ※実際の適用は typography.css のユーティリティクラスで行う
     ========================================================= */
  --fs-display-1: 64px; --fs-display-2: 48px; --fs-display-3: 40px;
  --fs-h1: 34px; --fs-h2: 28px; --fs-h3: 24px; --fs-h4: 20px;
  --fs-title-1: 18px; --fs-title-2: 16px; --fs-title-3: 14px;
  --fs-body-xxl: 20px; --fs-body-xl: 18px; --fs-body-l: 16px;
  --fs-body-m: 14px; --fs-body-s: 12px; --fs-body-xs: 10px;
  --fs-article-xl: 18px; --fs-article-l: 16px; --fs-article-m: 14px; --fs-article-s: 12px;
  --fs-btn-xl: 20px; --fs-btn-l: 16px; --fs-btn-m: 14px; --fs-btn-s: 12px;

  --lh-display: 1.4; --lh-heading: 1.5; --lh-body: 1.6;
  --lh-article: 2.0; --lh-button: 1.3; --lh-foreign: 1.2;

  /* =========================================================
     6. スペーシング・スケール（基本単位 4px）
     ========================================================= */
  --space-2: 2px;   --space-4: 4px;   --space-8: 8px;
  --space-12: 12px; --space-16: 16px; --space-20: 20px;
  --space-24: 24px; --space-28: 28px; --space-32: 32px;
  --space-40: 40px; --space-48: 48px; --space-56: 56px;
  /* LP用の大きめセクション間隔 */
  --space-60: 60px; --space-80: 80px; --space-100: 100px;

  /* ページ外側余白（PC32 / SP20）— SPは @media で上書き */
  --page-pad-x: var(--space-32);

  /* =========================================================
     7. Elevation（影）
     ボタン等は Enabled=なし / Hover・Pressed・Focused=あり
     ========================================================= */
  --elevation-light:                    /* カード等の弱い影 */
    0 2px 6px 2px rgb(6 16 26 / 10%);
  --elevation-5:                        /* 強い影（浮かせる要素・ホバー） */
    0 4px 4px 0 rgb(6 16 26 / 30%),
    0 8px 12px 6px rgb(6 16 26 / 15%);

  /* インタラクションのトランジション（ボタン等は 0.1s 推奨） */
  --transition-fast: 0.1s ease;
  --transition-base: 0.2s ease;

  /* =========================================================
     8. レイアウト
     ブレークポイント: PC = min-width:768px（767px以下はSP）
     ※メディアクエリでは数値直書き。下記は参照用
     ========================================================= */
  --content-width: 1060px;            /* フル幅背景・全体コンテナ */
  --content-width-narrow: 800px;      /* 文章・カード列など“読みやすい幅”（本番LP準拠） */
  --bp-pc: 768px;

  /* =========================================================
     9. 角丸（border-radius）
     ※旧テンプレは 4/8/12/16/40/50px が混在 → 下記に統一
     ========================================================= */
  --radius-s: 4px;   --radius-m: 8px;  --radius-l: 12px;
  --radius-xl: 16px; --radius-pill: 9999px;

  /* セクションの縦余白（PC / SPは下の@mediaで上書き・本番LP準拠） */
  --section-padding-y: var(--space-60);          /* 基本 */
  --section-padding-y-lg: var(--space-100);      /* ヒーロー・強調セクション */
  --section-padding-y-sm: var(--space-40);       /* タイトめ */
}

/* SP（〜768px）でのページ外側余白・セクション余白の上書き */
@media screen and (max-width: 767px) {
  :root {
    --page-pad-x: var(--space-16);
    --section-padding-y: var(--space-40);
    --section-padding-y-lg: var(--space-60);
    --section-padding-y-sm: var(--space-28);
  }
}

/* グローバル既定: 字間とフォントを全体へ適用 */
body {
  font-family: var(--font-family);
  letter-spacing: var(--ls-base);
  color: var(--color-text-1);
}

/* インラインリンクの標準色 */
a {
  color: var(--color-link);
}